:root {
    --primary-color: #00b140;
    --primary-green: #B2D235;
    /* Cor do botão */
    --dark-blue: #003348;
    /* Cor do texto principal */
    --light-blue: #E9F4F7;
    /* Fundo dos cards */
    --bg-gradient: linear-gradient(135deg, #f0f7f9 0%, #e1edf2 100%);
    --dark-color: #1a1a1a;
    --light-gray: #f4f4f4;
    --white: #ffffff;
    --black: #000000;
    --background: oklch(11.13% .019 203.866);
    --foreground: oklch(98.5% 0 0);
    --border: oklch(27.41% .0055 286.033);
    --ring: oklch(87.09% .0055 286.285);
    --primary-color-2: #cddc39;
    --slide-duration: 6s;
    --font-sans: Inter, ui-sans-serif, sans-serif, system-ui;
    --radius: .625rem;
    --spacing: .25rem;
    --container-xs: 20rem;
    --container-sm: 24rem;
    --default-font-family: var(--font-sans);
    --bg-dark: #001212;
    --card-bg: #050f0f;
    --input-bg: #0a1616;
    --accent-color: #c1d93a;
    --text-main: #ffffff;
    --text-muted: #9ca3af;
    --border-color: #1f2937;
    --bg-card: #e8f7fa;
    --btn-color: #c4ecf5;
    --text-color: #333;
    --bg-light: #f8f9fa;
    --inter: 'Inter', sans-serif;
}

body {
    font-family: var(--inter);
    animation: fadeIn 0.5s ease-in-out;
    background-color: var(--black);
}

html,
body {
    overflow-x: hidden;
    /* Trava o site para não rolar para os lados */
    width: 100%;
}

.home-bg {
    background-color: var(--white);
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

body.saindo-da-pagina {
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}

.icon {
    width: 1.25rem;
    height: 1.25rem;
}

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

.lang {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.logo img {
    height: 20px;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

.grid {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 20px;
}

/* Header */
header {
    background: var(--white);
    position: sticky;
    top: 0;
    z-index: 1000;
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

nav ul {
    display: flex;
    list-style: none;
}

nav ul li a {
    text-decoration: none;
    color: var(--dark-color);
    font-weight: 500;
    transition: color 0.3s;
}

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

/* Hero */
.hero {
    background: var(--dark-color);
    color: var(--white);
    text-align: left;
}

.hero h1 {
    font-size: 3rem;
    margin-bottom: 20px;
}

.hero p {
    font-size: 1.2rem;
    max-width: 100%;
    margin: 0 auto 30px;
}

.btn-primary {
    background: var(--primary-color-2);
    color: var(--white);
    padding: 12px 30px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
}

/* Stats */
.stats {
    padding: 60px 0;
    background: var(--light-gray);
    text-align: center;
}

.stat-item h2 {
    font-size: 2.5rem;
    color: var(--primary-color-2);
}

/* Form */
.contact {
    padding: 80px 0;
}

#contact-form {
    display: grid;
    gap: 15px;
    max-width: 600px;
    margin: 40px auto 0;
}

input,
textarea {
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.btn-submit {
    background: var(--dark-color);
    color: var(--white);
    border: none;
    padding: 15px;
    cursor: pointer;
    font-weight: bold;
}

/* Responsividade */
.mobile-menu {
    display: none;
    font-size: 24px;
    background: none;
    border: none;
    cursor: pointer;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 15%;
    color: white;
    /* Efeito de Transparência e Blur */
    background: rgb(20, 22, 23, 0.40);
    /* Preto com 40% de opacidade */
    backdrop-filter: blur(5px);
    /* Suporte para Safari */
    position: fixed;
    top: 0;
    width: 100%;
    box-sizing: border-box;
    z-index: 1000;
}

.nav-links {
    display: flex;
    list-style: none;
    align-items: center;
    gap: 60px;
    margin: 0;
    /* Removido o padding-right de 120px que deslocava o menu */
    padding-right: 0;
}

.nav-links li {
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.3s;
}

.nav-links li:hover {
    opacity: 1;
}

.nav-links a {
    text-decoration: none;
    color: var(--white);
    transition: all 0.3s ease;
}

/* Container do item da lista */
.dropdown-container {
    position: relative;
    /* padding-bottom: 20px; */
    /* Espaço para não fechar o menu ao mover o mouse */
}

/* Esconde o menu por padrão */
.mega-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    /* Alterado para cor sólida e opaca */
    background-color: #050a0e !important;
    backdrop-filter: none !important;
    border: 1px solid #1a202c;
    border-radius: 12px;
    padding: 20px;
    /* Sombra mais densa para dar profundidade sobre o conteúdo da página */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.9);
    z-index: 9999;
}


/* Exibe ao passar o mouse no LI pai */
.dropdown-container:hover .mega-menu {
    display: block;
}

.dropdown-mega {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    padding: 10px;
    display: none;
    /* Escondido por padrão */
}

.dropdown-container:hover .dropdown-mega {
    display: block;
    /* Mostra ao passar o mouse */
}

.mega-content {
    display: flex;
    gap: 20px;
    background-color: #050a0e;
}

/* Estilo do Card (Lado Esquerdo) */
.featured-card {
    position: relative;
    width: 280px;
    height: 200px;
    border-radius: 8px;
    overflow: hidden;
}

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

.featured-card h3 {
    position: absolute;
    bottom: 20px;
    left: 20px;
    color: white;
    margin: 0;
    font-size: 1.2rem;
}

/* Estilo dos Itens (Lado Direito) */
.menu-items {
    flex: 1;
}

.item a {
    text-decoration: none;
    display: block;
    padding: 10px;
    border-radius: 6px;
    transition: background 0.2s;
}

.item a:hover {
    background: rgba(255, 255, 255, 0.05);
}

.item h4 {
    color: white;
    margin: 0 0 5px 0;
}

.item p {
    color: #a0aec0;
    font-size: 0.85rem;
    margin: 0;
}

/* Estilo específico para o botão com borda (Inteligência) */
.dropdown {
    background: rgba(255, 255, 255, 0.1);
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    gap: 5px;
}

@media (max-width: 1200px) {
    .navbar {
        padding: 15px 20px;
    }

    .mega-menu {
        width: 90vw;
        /* Ocupa quase a tela toda no mobile/tablet */
    }
}

/* Ajuste para Celulares */
@media (max-width: 768px) {
    .mega-content {
        flex-direction: column;
        /* Empilha a imagem e os links */
    }

    .featured-card {
        width: 100%;
        height: 120px;
    }

    .nav-links {
        display: none;
        /* Aqui você precisaria de um menu hambúrguer */
    }

    nav ul {
        display: none;
        /* Seria ativado via JS */
    }

    .mobile-menu {
        display: block;
    }
}

/* ==========================================================================
   MENU RESPONSIVO (MOBILE SIDEBAR)
   ========================================================================== */

/* Esconde elementos do mobile no Desktop */
.mobile-menu-toggle,
.sidebar-overlay,
.sidebar-menu {
    display: none;
}

@media (max-width: 992px) {

    /* Ajusta a navbar para não quebrar no celular */
    .navbar {
        padding: 15px 5%;
    }

    /* Esconde menu principal e botão de idioma do desktop */
    .nav-links,
    .navbar .lang {
        display: none !important;
    }

    /* Exibe botão hambúrguer */
    .mobile-menu-toggle {
        display: block;
        background: transparent;
        border: none;
        color: white;
        cursor: pointer;
        padding: 0;
    }

    /* Fundo escuro atrás do menu */
    .sidebar-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
        z-index: 1000;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease;
    }

    .sidebar-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    /* Formatação da Sidebar - Estilo idêntico à imagem */
    .sidebar-menu {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        max-width: 360px;
        height: 100vh;
        /* Gradiente fiel à imagem que você enviou */
        background: linear-gradient(160deg, #586568 0%, #1a2a2e 100%);
        z-index: 1001;
        transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        padding: 30px;
        box-sizing: border-box;
    }

    .sidebar-menu.active {
        right: 0;
    }

    /* Cabeçalho da Sidebar (Logo e Botão Fechar) */
    .sidebar-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 50px;
    }

    .sidebar-logo {
        height: 28px;
    }

    /* Deixa a logo branca caso a sua imagem original seja verde/preta */
    .filter-white {
        filter: brightness(0) invert(1);
    }

    .close-sidebar {
        background: transparent;
        border: 1px solid rgba(255, 255, 255, 0.4);
        /* Bordinha do print */
        border-radius: 6px;
        color: white;
        width: 34px;
        height: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    /* Links Principais */
    .sidebar-content {
        display: flex;
        flex-direction: column;
        gap: 30px;
        /* Espaçamento idêntico ao print */
        flex-grow: 1;
    }

    .sidebar-link {
        color: #ffffff;
        text-decoration: none;
        font-size: 1.15rem;
        font-weight: 700;
        display: block;
    }

    /* Submenus (Recuados como no print) */
    .sidebar-submenu {
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin-top: 20px;
        padding-left: 15px;
        /* O recuo que tem na imagem */
    }

    .sidebar-submenu a {
        color: #e2e8f0;
        text-decoration: none;
        font-size: 1.05rem;
        font-weight: 600;
    }

    /* Rodapé da Sidebar (Idioma) */
    .sidebar-footer {
        margin-top: auto;
        padding-top: 20px;
    }

    .lang-mobile {
        display: flex;
        align-items: center;
        color: #a0aec0;
        /* Cor meio cinza/azulado */
        font-size: 1rem;
        font-weight: 500;
        cursor: pointer;
    }
}

/* ================= Container do Carrossel ================= */
.carousel-container {
    position: relative;
    width: 100%;
    height: 100vh;
    /* Ocupa a tela toda. Mude para px se preferir um tamanho fixo */
    min-height: 600px;
    overflow: hidden;
    background-color: #000;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    z-index: 1;
    /* Imagem de fundo genérica para teste. Substitua pela sua! */
    /* background-image: url('/img/hero/ESTUDO_ESTRATEGICO_ARMAZENAMENTO_2025.jpg'); */
    background-size: cover;
    background-position: center;
}

/* Sobreposição escura para dar leitura ao texto */
.slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.4) 100%);
}

.slide.active {
    opacity: 1;
    z-index: 2;
}

/* ================= Conteúdo e Textos ================= */
.content {
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
    max-width: 1100px;
    color: #fff;
    z-index: 3;
}

/* Preparando os elementos para a animação */
.content>* {
    opacity: 0;
    transform: translateY(40px);
}

.tag {
    display: block;
    color: var(--primary-color);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

h1 {
    font-size: 3rem;
    line-height: 1.2;
    margin-bottom: 20px;
    font-weight: 700;
}

/* p {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 30px;
    color: #e0e0e0;
} */

.btn {
    display: inline-block;
    background-color: var(--primary-color-2);
    color: #000;
    text-decoration: none;
    padding: 12px 32px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 1rem;
    transition: background-color 0.3s;
}

.btn:hover {
    background-color: #b5c42a;
}

/* Animação de surgir de baixo (apenas no slide ativo) */
.slide.active .tag {
    animation: fadeUp 0.8s ease forwards 0.2s;
}

.slide.active h1 {
    animation: fadeUp 0.8s ease forwards 0.4s;
}

.slide.active p {
    animation: fadeUp 0.8s ease forwards 0.6s;
}

.slide.active .btn {
    animation: fadeUp 0.8s ease forwards 0.8s;
}

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

/* ================= Indicadores (Navegação Inferior) ================= */

.indicators {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 4;
    align-items: center;
}

.indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* Indicador ativo: fica maior e mostra o tempo */
.indicator.active {
    width: 50px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.2);
}

/* Barra de progresso dentro do indicador ativo */
.indicator.active::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background-color: var(--primary-color-2);
    /* A animação usa a variável de tempo definida no :root */
    animation: fillProgress var(--slide-duration) linear forwards;
}

@keyframes fillProgress {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}

/* Responsividade Básica */
@media (max-width: 768px) {
    h1 {
        font-size: 2rem;
    }

    .content {
        left: 5%;
        padding-right: 5%;
    }
}

/* ------------------------------ ESTRUTURA DO CARROSSEL MIDIA ------------------------- */

.carousel-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 1400px;
    /* Ajuste conforme o limite do seu layout */
    margin: 0 auto;
}

.carousel-midia {
    width: 100%;
    overflow: hidden;
    /* Esconde os itens que saem da tela */
    padding: 20px 0;
}

.carousel-track {
    display: flex;
    gap: 20px;
    padding: 0 10px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    /* Firefox */
}

.carousel-track::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari */
}

/* --- BOTÕES DE NAVEGAÇÃO --- */
.nav-btn {
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
    cursor: pointer;
    position: absolute;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}

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

.prev-btn {
    left: -45px;
}

.next-btn {
    right: -55px;
}

.midia-title {
    text-align: center;
    color: #00414c;
    padding-top: 40px;
    padding-bottom: 10px;
    font-size: inherit;
    font-weight: inherit;
}

/* --- ESTILO E EFEITOS DO CARD --- */
.card {
    flex: 0 0 380px;
    /* Mantém a largura fixa de 400px */
    position: relative;
    height: 380px;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
}

.card-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(8px) brightness(0.9);

    /* Adicionamos uma escala inicial para que o desfoque vazado seja composto por pixels da imagem */
    transform: scale(1.1);

    /* Mantemos as suas transições */
    transition: filter 0.5s ease, transform 0.5s ease;
}

.card-content {
    position: absolute;
    inset: 0;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: white;
    z-index: 2;
}

.card-logo {
    align-self: flex-end;
    max-height: 20px;
    object-fit: contain;
}

.text-container {
    position: relative;
}

.card-title {
    font-size: 1.1rem;
    line-height: 1.4;
    font-weight: 700;
    margin: 0;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.read-more {
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: 0;
    font-weight: 600;
    transition: opacity 0.4s ease, transform 0.4s ease;
    transform: translateY(10px);
}

/* --- HOVER (A Mágica) --- */
.card:hover .card-bg {
    filter: blur(0) brightness(0.8);
    transform: scale(1.05);
}

.card:hover .card-title {
    opacity: 0;
    transform: translateY(-10px);
}

.card:hover .read-more {
    opacity: 1;
    transform: translateY(0);
}


/* --------------------------- ESTUDOS ------------------------------------- */

/* --- CONFIGURAÇÕES GERAIS DA SESSÃO --- */
.sessao-estudos {
    max-width: 90rem;
    /* max-w-7xl */
    margin: 0 auto;
    padding: 3rem 1rem;
    /* py-12 px-4 */
}

.titulo-sessao {
    text-align: center;
    font-size: 0.875rem;
    /* text-sm */
    font-weight: 700;
    letter-spacing: 0.1em;
    /* tracking-widest */
    color: #1f2937;
    /* text-gray-800 */
    text-transform: uppercase;
    margin-bottom: 2rem;
    /* mb-8 */
}

/* --- GRID PRINCIPAL --- */
.grid-estudos {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    /* gap-6 */
}

@media (min-width: 1024px) {

    /* lg */
    .grid-estudos {
        grid-template-columns: repeat(12, 1fr);
        gap: 1rem;
        /* lg:gap-8 */
    }
}

/* --- CARDS BASE --- */

.card-format {
    margin: 2rem;
}

.card-estudos {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    /* remove sublinhado do link */
    cursor: pointer;
}

/* Efeito de Hover para os Cards de Estudos */
.card-estudos.card-principal,
.card-estudos.card-secundario {
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.3s ease;
    will-change: transform;
    border-radius: 12px;
}

.card-estudos.card-principal:hover,
.card-estudos.card-secundario:hover {
    /* Faz o card "subir" 8 pixels, simulando o clique/foco de um botão */
    transform: translateY(-8px);

    /* Adiciona uma sombra mais profunda para dar profundidade ao movimento */
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

/* .card-estudos:hover .card-img {
    transform: scale(1.03);
} */

/* --- CARD PRINCIPAL (ESQUERDA) --- */
@media (min-width: 1024px) {

    /* lg */
    .card-principal {
        grid-column: span 6 / span 6;
    }
}

.mb-principal {
    margin-bottom: 1.25rem;
}

.card-principal .card-img {
    height: 300px;
}

/* --- COLUNA SECUNDÁRIA E CARDS DA DIREITA --- */
.coluna-secundaria {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

@media (min-width: 1024px) {

    /* lg */
    .coluna-secundaria {
        grid-column: span 6 / span 6;
        gap: 2rem;
    }
}

.card-secundario {
    display: flex !important;
    flex-direction: row !important;
    /* Força imagem e texto ficarem lado a lado */
    align-items: flex-start;
    gap: 1.5rem;
    background-color: #fff;
    /* Opcional: garante fundo branco */
}

.card-secundario .card-format {
    margin: 0 !important;
    /* Remove margens extras que podem quebrar o alinhamento */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (min-width: 640px) {

    /* sm */
    .card-secundario {
        flex-direction: row;
    }
}

.img-secundaria {
    width: 100%;
    flex-shrink: 0;
}

@media (min-width: 640px) {

    /* sm */
    .img-secundaria {
        width: 220px;
    }
}

.card-secundario .card-img {
    height: 240px;
    border-radius: 12px;
}

.card-conteudo {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex: 1;
}

/* --- IMAGENS E TEXTOS --- */
.img-wrapper {
    overflow: hidden;
    border-radius: 20px;
    /* rounded-xl */
}

.card-img {
    width: 100%;
    object-fit: cover;
    transition: transform 0.3s ease-in-out;
}

.card-titulo {
    font-weight: 700;
    color: #111827;
    /* gray-900 */
    transition: color 0.2s ease-in-out;
}

.titulo-grande {
    font-size: 1.5rem;
    /* 2xl */
    line-height: 2rem;
    margin-bottom: 0.75rem;
}

.titulo-medio {
    font-size: 1.125rem;
    /* lg */
    line-height: 1.25;
    margin-bottom: 0.5rem;
}

.card-texto {
    color: #4b5563;
    /* gray-600 */
    margin-bottom: 1.25rem;
    /* Lógica para o line-clamp-3 (limitar a 3 linhas com reticências) */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.texto-pequeno {
    font-size: 0.875rem;
    /* text-sm */
    margin-bottom: 1rem;
    width: 90%;
}

/* --- TAGS --- */
.card-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;

}

.tag {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    /* arredondado total */
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.tag-clara {
    background-color: #f0f5f7;
    color: #1d3547;
}

.tag-escura {
    background-color: #0b3b42;
    color: #ffffff;
}

/* ============================= Conecte-se ============================ */

.contact-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    background: radial-gradient(circle at top left, #0a2525 0%, var(--bg-dark) 60%);
}

.contact-section .container {
    max-width: 1100px;
    width: 100%;
    display: flex;
    gap: 80px;
    align-items: center;
}

/* Esquerda */
.content-left {
    flex: 1;
    color: var(--text-main);
}

.content-left h1 {
    font-size: 2.5rem;
    margin-bottom: 24px;
    font-weight: 700;
}

.content-left p {
    font-size: 1.1rem;
    color: var(--text-muted);
    line-height: 1.6;
}

/* Direita / Card */
.content-right {
    flex: 1;
    background-color: var(--card-bg);
    padding: 40px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-bottom: 6px;
}

input,
select {
    width: 100%;
    background-color: var(--input-bg);
    border: 1px solid var(--border-color);
    color: white;
    padding: 12px;
    border-radius: 6px;
    outline: none;
    transition: border-color 0.3s;
}

input:focus,
select:focus {
    border-color: var(--accent-color);
}

/* Input de Telefone Especial */
.phone-input {
    display: flex;
    gap: 0;
}

.country-code {
    background-color: var(--input-bg);
    border: 1px solid var(--border-color);
    border-right: none;
    padding: 0 12px;
    display: flex;
    align-items: center;
    border-radius: 6px 0 0 6px;
}

.phone-input input {
    border-radius: 0 6px 6px 0;
}

/* Checkbox */
.form-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 20px;
}

.form-checkbox label {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.form-checkbox a {
    color: var(--text-main);
    text-decoration: underline;
}

/* Botão */
.btn-submit {
    width: 100%;
    background-color: var(--accent-color);
    color: #000;
    font-weight: 700;
    padding: 14px;
    border: none;
    border-radius: 6px;
    margin-top: 24px;
    cursor: pointer;
    transition: transform 0.2s, background-color 0.3s;
}

.btn-submit:hover {
    background-color: #acc234;
    transform: translateY(-2px);
}

/* Responsividade */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
        gap: 40px;
        text-align: center;
    }

    .content-right {
        width: 100%;
        padding: 25px;
    }
}

/* ============================= Eventos ============================ */

.webinar-section {
    background-image: url('/img/webnar/background.png');
    background-size: cover;
    background-position: center;
    padding: 100px 0;
    overflow: hidden;
    /* Evita que os cards vazem em telas menores */
}

.container-eventos {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    padding: 0 20px;
}

/* Label Centralizada no Topo */
.section-label {
    display: block;
    text-align: center;
    letter-spacing: 5px;
    color: #00414c;
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 80px;
    text-transform: uppercase;
}

.webinar-layout {
    display: flex;
    align-items: flex-start;
}

.webinar-content {
    flex: 0 0 55%;
    z-index: 2;
}

/* Texto Superior (Tagline) */
.content-tagline {
    color: #333;
    font-size: 1.25rem;
    margin-bottom: 8px;
    font-weight: 400;
}

.content-title {
    color: #001212;
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 25px;
}

.content-text {
    color: #00414c;
    font-size: 1.15rem;
    line-height: 1.5;
    max-width: 580px;
    margin-bottom: 30px;
}

.content-info-line {
    border-left: 2px solid #00A9E0;
    padding-left: 15px;
    color: #333;
    font-weight: 500;
    margin-bottom: 35px;
}

.btn-inscreva {
    display: inline-block;
    background-color: #B2D235;
    color: #003348;
    padding: 12px 35px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 700;
    box-shadow: 0 4px 0 #9cb82d;
    /* Efeito de profundidade do botão */
}

/* Lado dos Cards com Posicionamento Desalinhado */
.webinar-cards {
    flex: 1;
    position: relative;
    height: 350px;
    /* Altura fixa para controlar o posicionamento absoluto */
}

.floating-card {
    position: absolute;
    background: #eef8fb;
    border: 1px solid #d8ecf1;
    border-radius: 18px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 10px 25px rgba(0, 65, 76, 0.08);
    width: 320px;
}

/* Card de Cima: Mais para a esquerda e para cima */
.card-top {
    top: -20px;
    right: 40px;
}

/* Card de Baixo: Mais para a direita e para baixo */
.card-bottom {
    top: 140px;
    right: -20px;
}

.icon-wrapper {
    width: 60px;
    height: 60px;
    background: #d4eff6;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.medal {
    background-size: cover;
    background-position: center;
    background-image: url('/img/webnar/ranking.png');
}

.user {
    background-size: cover;
    background-position: center;
    background-image: url('/img/webnar/user.png');
}

.card-edition {
    font-size: 0.8rem;
    color: #666;
    display: block;
}

.card-body p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.3;
    color: #001212;
}

/* Responsividade */
@media (max-width: 992px) {
    .webinar-layout {
        flex-direction: column;
    }

    .webinar-cards {
        height: auto;
        margin-top: 50px;
    }

    .floating-card {
        position: static;
        margin-bottom: 20px;
        width: 100%;
    }
}

/* =========================================
   PORTAL DE TRANSAÇÕES (M&A)
   ========================================= */

/* --- Hero Section --- */
.ma-hero-section {
    background-color: #06151a;
    /* Fundo escuro azulado baseado na imagem */
    /* Se quiser a foto de fundo como a original: */
    /* background: linear-gradient(rgba(6, 21, 26, 0.9), rgba(6, 21, 26, 0.9)), url('../img/ma-bg.jpg') center/cover; */
    padding: 80px 0 60px;
    color: var(--white);
}

.ma-subtitle {
    color: #74cfe2;
    /* Ciano claro */
    font-size: 1rem;
    display: block;
    margin-bottom: 15px;
}

.ma-title-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
}

.ma-icon-box {
    background-color: #3b4e2f;
    /* Verde musgo/oliva do fundo do ícone */
    width: 45px;
    height: 45px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ma-hero-section h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--white);
    margin: 0;
}

.ma-description {
    max-width: 800px;
    color: #a0aec0;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 40px;
}

/* Filtros */
.ma-filters-container {
    display: flex;
    gap: 20px;
    max-width: 1400px;
}

.ma-filter-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.ma-filter-group .filter-group {
    max-width: 200px !important;
}

.ma-filter-group label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--white);
}

.ma-filter-group input {
    background-color: #030a0d;
    /* Quase preto */
    border: 1px solid #1a2a30;
    color: white;
    /* padding: 14px 15px; */
    border-radius: 6px;
    outline: none;
    font-size: 0.95rem;
    transition: border-color 0.3s;
}

.ma-filter-group input:focus {
    border-color: #74cfe2;
}

/* --- Área de Conteúdo (Cards) --- */
.ma-content-section {
    padding: 60px 0 100px;
    background-color: var(--white);
}

.ma-section-title {
    font-size: 2rem;
    color: #001212;
    font-weight: 700;
    margin-bottom: 35px;
}

.ma-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

/* Estilo do Card individual */
.ma-card {
    background-color: #eafafc;
    /* Azul/Ciano super claro idêntico ao print */
    border-radius: 12px;
    padding: 25px;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ma-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.ma-card h3 {
    font-size: 1.15rem;
    line-height: 1.4;
    color: #001212;
    font-weight: 700;
    margin-bottom: 12px;
}

.ma-resumo {
    font-size: 0.95rem;
    color: #5b6f74;
    /* Cinza esverdeado do texto */
    line-height: 1.5;
    margin-bottom: 25px;
    flex-grow: 1;
    /* Empurra o rodapé para baixo */

    /* Trunca o texto com "..." se passar de 3 linhas */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ma-resumo strong {
    color: #001212;
    font-weight: 700;
}

.ma-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
}

.ma-data {
    font-size: 0.85rem;
    color: #5b6f74;
}

.ma-btn-ler {
    background-color: #bcecf5;
    /* Ciano do botão */
    color: #00414c;
    /* Teal escuro do texto do botão */
    text-decoration: none;
    padding: 8px 18px;
    border-radius: 20px;
    /* Botão formato pílula */
    font-size: 0.85rem;
    font-weight: 700;
    transition: filter 0.2s;
}

.ma-btn-ler:hover {
    filter: brightness(0.95);
}

/* Responsividade M&A */
@media (max-width: 992px) {
    .ma-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

    .ma-filters-container {
        flex-direction: column;
    }

    .ma-hero-section h1 {
        font-size: 2rem;
    }
}

/* =========================================
   SEÇÃO HOME - ARTIGOS RECENTES
   ========================================= */

.home-artigos-section {
    background-color: #041519;
    /* Fundo azul bem claro */
    padding: 80px 20px;
}

.home-artigos-header {
    margin-bottom: 40px;
}

.home-artigos-header h2 {
    font-size: 2.3rem;
    color: #ffffff;
    /* Era #001212 */
    font-weight: 600;
    letter-spacing: -0.5px;
    margin-bottom: 12px;
}

.home-artigos-header p {
    font-size: 1.05rem;
    color: #79bfcc;
    /* Era #00414c */
    font-weight: 400;
}

/* Grid de 3 colunas restaurado perfeitamente */
.home-artigos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

/* Card Moderno da Home */
.home-card {
    background-color: #e1f2f5;
    /* Fundo do card (ciano mais escuro) */
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.home-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 65, 76, 0.08);
}

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

.home-card-content {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.home-card-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    font-weight: 500;
    /* Menos grosso que o original, mais elegante */
    color: #00414c;
    /* Mesmo Teal do subtítulo */
    margin-bottom: 20px;
}

.home-card-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #001212;
    /* Mesmo tom escuro do título da seção */
    margin-bottom: 12px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.home-card-desc {
    font-size: 0.95rem;
    color: #5b6f74;
    /* Cinza esverdeado (Cool Gray) exato do seu print */
    line-height: 1.5;
    font-weight: 400;
    margin-bottom: 30px;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.home-card-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    font-size: 0.9rem;
    color: #001212;
}

/* Colore a setinha de verde escuro igual ao seu layout */
.home-card-link svg {
    color: #537a1a;
    /* Verde folha/oliva do seu layout */
    width: 18px;
    height: 18px;
    stroke-width: 2.5;
    /* Deixa a seta levemente mais gordinha */
}

.home-artigos-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 30px;
}

.link-ver-todos {
    color: #e2e8f0;
    /* Era #4b68a1 */
    text-decoration: underline;
    text-underline-offset: 4px;
    font-weight: 500;
    font-size: 0.95rem;
    transition: color 0.3s;
}

.link-ver-todos:hover {
    color: #00414c;
}

/* Responsividade */
@media (max-width: 992px) {
    .home-artigos-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .home-artigos-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================= Footer ============================ */
.clients-section {
    padding: 60px 20px;
    text-align: center;
    background-color: #fff;
}

.clients-title {
    font-size: 14px;
    color: #333;
    letter-spacing: 1px;
    margin-bottom: 40px;
}

.clients-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
    max-width: 1100px;
    margin: 0 auto;
}

.clients-grid img {
    max-height: 40px;
    /* Opcional: deixa as logos uniformes */
    transition: filter 0.3s;
}

.clients-grid img:hover {
    filter: grayscale(0%);
}

/* Footer */
.main-footer {
    background-color: #051313;
    /* Tom escuro da imagem */
    color: #ffffff;
    padding: 60px 20px 20px;
}

.footer-container {
    max-width: 1100px;
    margin: 0 auto;
}

.footer-brand {
    margin-bottom: 40px;
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.footer-logo {
    height: 35px;
    margin-bottom: 15px;
}

.footer-tagline {
    font-size: 14px;
    color: #ccc;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.footer-column p,
.footer-column a {
    display: block;
    font-size: 13px;
    color: #ccc;
    text-decoration: none;
    margin: 5px 0;
}

.footer-column.links a:hover {
    color: #fff;
    text-decoration: underline;
}

.footer-divider {
    border: 0;
    border-top: 1px solid #1a2a2a;
    margin-bottom: 20px;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #888;
}

/* Responsividade para telas pequenas */
@media (max-width: 768px) {
    .footer-content {
        flex-direction: column;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 10px;
    }
}


/* ============================EVENTO============================ */

.hero-evento {
    /* O linear-gradient aplica a cor azul-petróleo/cinza escura por cima da imagem */
    /* Substitua a URL da imagem pela sua imagem real */
    background: linear-gradient(rgba(31, 64, 73, 0.7),
            rgba(31, 64, 73, 0.7)), url('/img/meet-and-greener/HEADER.png') no-repeat center center/cover;

    color: #ffffff;
    padding: 100px 20px;
    min-height: 500px;
    display: flex;
    align-items: center;
}

.container-evento {
    max-width: 1000px;
    margin: 0 auto;
    width: 100%;
}

.tag-evento {
    display: inline-block;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.titulo-principal {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 25px;
}

.subtitulo {
    font-size: 1.5rem;
    font-weight: 500;
}

.descricao {
    font-size: 1rem;
    line-height: 1.6;
    max-width: 800px;
    /* Limita a largura do texto para não ficar difícil de ler */
    margin-bottom: 30px;
    color: #e0e0e0;
    /* Um branco levemente acinzentado */
}

.detalhes-evento {
    border-left: 3px solid #ffffff;
    /* Cria aquela barrinha branca à esquerda */
    padding-left: 15px;
    margin-bottom: 40px;
}

.detalhes-evento p {
    font-weight: 600;
    font-size: 1.05rem;
}

.btn-inscrever {
    display: inline-block;
    background-color: #cddc39;
    /* Cor verde-limão aproximada */
    color: #1a2a30;
    /* Texto escuro para dar contraste */
    text-decoration: none;
    padding: 12px 30px;
    font-weight: 700;
    border-radius: 6px;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-inscrever:hover {
    background-color: #b8c633;
    transform: translateY(-2px);
}

/* Responsividade para telas menores (celulares) */
@media (max-width: 768px) {
    .titulo-principal {
        font-size: 2rem;
    }

    .subtitulo {
        font-size: 1.2rem;
    }

    .hero-evento {
        padding: 60px 20px;
    }
}


/* =========================================
   DESIGN SYSTEM - BIBLIOTECA DE ARTIGOS
   ========================================= */

/* 1. Hero */
.biblioteca-hero {
    background: linear-gradient(rgba(11, 26, 38, 0.8), rgba(11, 26, 38, 0.8)), url('/img/portal-de-transacoes/HEADER.jpg') center/cover no-repeat;
    padding: 140px 20px 60px;
    color: white;
    margin-bottom: 60px;
}

.icon-book {
    background-color: #314234;
    padding: 10px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    margin-right: 15px;
}

.hero-title {
    font-size: 2.2rem;
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    font-weight: 700;
}

.section-title {
    font-size: 1.8rem;
    margin-bottom: 30px;
    color: #111;
    font-weight: 700;
}

.secao-destaques,
.secao-conteudo {
    margin-bottom: 60px;
}

/* 2. Grid de Destaques */
.destaques-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    /* Proporção exata: esquerda visivelmente maior */
    gap: 30px;
}

/* Card Principal (Esquerda) */
.destaques-grid .destaque-principal img {
    width: 100%;
    height: 250px;
    aspect-ratio: 16 / 9;
    /* Proporção retangular idêntica ao da foto */
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 15px;
}

.destaques-secundarios {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* Espalha as duas notícias perfeitamente no espaço vertical */
    gap: 20px;
}

/* Cards Secundários (Direita) */
.destaques-grid .destaque-secundario {
    display: flex;
    flex-direction: row;
    /* Força a ficar lado a lado */
    gap: 20px;
    align-items: flex-start;
    /* Alinha o texto pelo topo da imagem */
}

/* Uso do !important para blindar contra a regra do .card-moderno img */
.destaques-grid .destaque-secundario img {
    width: 220px !important;
    height: 150px !important;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 0 !important;
    /* Remove a margem inferior */
    flex-shrink: 0;
    /* Impede a imagem de espremer se o texto for longo */
}

.destaque-conteudo {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.meta-autor {
    color: #267a71;
    /* Cor esverdeada/teal do print */
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 8px;
    display: block;
}

.destaques-grid h3 {
    font-size: 1.4rem;
    color: #0b2a30;
    /* Verde bem escuro (chumbo) */
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.destaque-secundario h3 {
    font-size: 1.1rem;
    /* Título menor para os cards laterais */
    line-height: 1.3;
}

/* Coringa: Estiliza o ícone de setinha dentro do H3 */
.destaques-grid h3 svg {
    color: #888;
    flex-shrink: 0;
    margin-top: 4px;
}

.destaques-grid p {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 15px;
    /* Truque do Webkit para limitar em 2 linhas e colocar "..." no final */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Novo visual do globo PT */
.tag-pt {
    background-color: #00414c;
    color: white;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Ajuste Responsivo para os destaques */
@media (max-width: 900px) {
    .destaques-grid {
        grid-template-columns: 1fr;
        /* Quebra para uma coluna */
    }

    .destaques-grid .destaque-secundario {
        flex-direction: column;
        /* No celular, a imagem vai pra cima do texto */
    }

    .destaques-grid .destaque-secundario img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16/9;
    }
}

/* 3. Filtros */
.filter-bar {
    display: flex;
    gap: 20px;
    align-items: flex-end;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.filter-search {
    flex: 1;
    min-width: 300px;
}

.filter-search label {
    display: block;
    font-size: 0.9rem;
    font-weight: bold;
    margin-bottom: 8px;
    color: #111;
}

.search-flex {
    display: flex;
    gap: 10px;
}

.search-flex input {
    background: #fff;
    border: 1px solid #ddd;
    color: #333;
    flex: 1;
}

.btn-buscar {
    background: #00414c;
    color: white;
    border: none;
    padding: 14px 24px;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}

.btn-buscar:hover {
    background: #002b33;
}

.filter-selects {
    display: flex;
    gap: 15px;
}

.select-wrapper select {
    padding: 14px;
    border-radius: 6px;
    border: 1px solid #ddd;
    background: #fff;
    color: #333;
    font-weight: 500;
}

.active-filters {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 40px;
    flex-wrap: wrap;
    font-size: 0.9rem;
}

.filter-pill {
    background: #f0f7f9;
    color: #111;
    padding: 6px 15px;
    border-radius: 20px;
    font-weight: 500;
}

.limpar-filtros {
    background: none;
    border: none;
    color: #666;
    cursor: pointer;
    text-decoration: underline;
}

.resultados-count {
    margin-left: auto;
    color: #888;
}

/* 4. Grid e Cards Modernos */
.grid-biblioteca {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 30px;
}

.card-moderno {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}

.card-moderno img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 15px;
    transition: transform 0.3s;
}

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

.card-meta {
    font-size: 0.85rem;
    color: #00414c;
    font-weight: 700;
    margin-bottom: 10px;
    display: block;
}

.card-moderno h3 {
    font-size: 1.15rem;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    color: #111;
}

.card-moderno p {
    font-size: 0.95rem;
    color: #666;
    margin-bottom: 20px;
    line-height: 1.5;
    flex-grow: 1;
}

.card-tags {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.tag-pt {
    background: #00414c;
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: bold;
}

@media (max-width: 768px) {
    .filter-bar {
        flex-direction: column;
        /* Empilha os filtros */
        gap: 15px;
    }

    .filter-group.width-1,
    .filter-group.width-2,
    .filter-group.width-3 {
        width: 100% !important;
        /* Força a ocupar a tela toda no mobile */
    }
}

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

    .destaque-secundario {
        flex-direction: column;
        align-items: flex-start;
    }

    .destaque-secundario img {
        width: 100%;
        height: 200px;
    }
}

/* =========================================
   FILTROS DINÂMICOS E JANELA FLUTUANTE
   ========================================= */

.active-filters-container {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 30px;
    flex-wrap: wrap;
    font-size: 0.9rem;
    position: relative;
}

.filtros-lista {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Pílula de filtro clicável */
.filter-pill {
    background: #f0f7f9;
    color: #111;
    padding: 6px 15px;
    border-radius: 20px;
    font-weight: 500;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s ease;
    user-select: none;
}

.filter-pill:hover {
    background: #e0eff2;
}

/* Estado quando a pílula está selecionada */
.filter-pill.active {
    background: #00414c;
    color: #ffffff;
    border-color: #00414c;
}

/* Estrutura da Janela Flutuante (Modal) */
.dropdown-filtros-container {
    position: relative;
}

.btn-mais-filtros {
    background: #ffffff;
    border: 1px solid #ddd;
    color: #333;
    padding: 6px 15px;
    border-radius: 20px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
}

.btn-mais-filtros:hover {
    background: #f4f4f4;
}

.modal-filtros {
    position: absolute;
    top: 120%;
    left: 0;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
    width: 350px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

/* Classe que o JS adiciona para exibir a janela */
.modal-filtros.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.modal-filtros h4 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1rem;
    color: #111;
}

.todos-filtros-lista {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    max-height: 250px;
    overflow-y: auto;
    /* Adiciona scroll se houver muitos filtros */
}

.todos-filtros-lista .filter-pill {
    font-size: 0.8rem;
    padding: 5px 12px;
}

/* =========================================
   PÁGINA DO ARTIGO (LEITURA)
   ========================================= */

.artigo {
    background-color: var(--white);
}

.container-artigo {
    max-width: 1360px;
    margin: 0 auto;
    padding: 40px 20px;
}

/* Hero Section (Cabeçalho escuro) */
.artigo-hero {
    padding-top: 4rem;
    background-color: #0b1a26be;
    /* Cor escura do fundo */
    color: #ffffff;
    padding-top: 120px;
    /* Se quiser colocar a imagem de fundo escura: */
    background-image: url('/img/portal-de-transacoes/TRANSACTION.jpg') !important;
    background-size: cover;
    background-blend-mode: overlay;
}

.tempo-leitura {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #004b5a;
    /* Teal escuro */
    font-weight: 500;
    margin-bottom: 30px;
    font-size: 1rem;
}

/* Estilo do bloco do autor */
.artigo-autor {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 50px;
    padding-top: 40px;
    /* border-top: 1px solid #e2e8f0; */
    /* Linha sutil separadora */
}

.autor-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #d1d5db;
    /* Círculo cinza claro como placeholder */
}

.autor-info {
    color: #004b5a;
    font-size: 0.95rem;
}

.autor-info strong {
    color: #004b5a;
    font-weight: 700;
}

.breadcrumbs {
    font-size: 0.9rem;
    color: #8fa3b0;
    margin-bottom: 20px;
}

.breadcrumbs a {
    color: #79a6d2;
    /* Tom azulado do link */
    text-decoration: none;
}

.artigo-hero h1 {
    font-size: 2rem;
    margin: 0 0 20px 0;
    font-weight: 700;
}

.artigo-meta {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 0.9rem;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #d1d5db;
}

.badge-categoria {
    background-color: #ffffff;
    color: #000000;
    padding: 4px 12px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 0.8rem;
}

/* Layout Duas Colunas */
.artigo-layout {
    display: flex;
    gap: 40px;
    /* margin-top: 20px; */
    margin-bottom: 50px;
}

.artigo-principal {
    flex: 2;
    /* Ocupa 2 partes do espaço (aprox. 66%) */
    font-size: 1.05rem;
    line-height: 1.6;
    color: #333;
}

.artigo-fonte {
    margin-top: 40px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.artigo-fonte a {
    color: #000;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.9rem;
}

.artigo-fonte a:hover {
    text-decoration: underline;
}

/* Sidebar (Cards da direita) */
.artigo-sidebar {
    flex: 1;
    /* Ocupa 1 parte do espaço (aprox. 33%) */
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sidebar-card {
    border-radius: 12px;
    padding: 24px;
    background-color: #ffffff;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.sidebar-card h3 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.1rem;
    color: #111;
}

/* Tags */
.tags-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tags-list li {
    background-color: #f0f8fb;
    /* Azul bem claro */
    color: #001212;
    /* Texto escuro */
    padding: 6px 16px;
    border-radius: 20px;
    font-weight: 500;
    font-size: 0.85rem;
}

/* Conteúdo Relacionado */
.relacionados-lista {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.item-relacionado {
    display: flex;
    gap: 15px;
    align-items: flex-start;
    /* Alinha pelo topo */
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease;
}

.item-relacionado:hover {
    transform: translateX(5px);
}

.item-relacionado img {
    width: 90px;
    height: 90px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}

.item-relacionado-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.item-relacionado-info h4 {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.3;
}

.item-relacionado-info .badge-sm {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    color: #333;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    align-self: flex-start;
    /* Impede o badge de esticar */
}

.item-relacionado-info h4 {
    margin: 0;
    font-size: 0.95rem;
    color: #111;
    line-height: 1.4;
    font-weight: 700;
}

/* Navegação no rodapé do artigo */
.artigo-navegacao {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
    padding-top: 30px;
}

.nav-link {
    color: #333;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    transition: color 0.3s ease;
}

.nav-link:hover {
    color: #004b5a;
}

/* ================= Cursos ================= */
.hero-cursos {
    min-height: 90vh;
    /* Usando as cores do seu :root para o degradê */
    background-image: url('/img/cursos/HEADER.png');
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    position: relative;
    overflow: hidden;
}

.container-cursos {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 35% 65%;
    gap: 20px;
    align-items: center;
}

.hero-cursos-content {
    /* Centraliza o texto verticalmente na sua coluna */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 20px;
    /* Pequeno respiro na esquerda */
}

.hero-cursos-content h1 {
    font-size: 2.8rem;
    line-height: 1.1;
    color: #e2f1f5;
    margin-bottom: 25px;
    text-align: left;
}

.hero-cursos-content h1 span {
    display: block;
    color: #e2f1f5;
}

.hero-cursos-content p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #e2f1f5;
    margin-bottom: 35px;
    max-width: 550px;
    text-align: left;
    /* Mantém alinhamento à esquerda */
}

/* Botão específico para não conflitar com .btn-primary */
.btn-hero-cursos {
    display: inline-block;
    width: 220px;
    background-color: var(--primary-green);
    color: var(--dark-blue);
    padding: 16px 35px;
    text-decoration: none;
    font-weight: 700;
    border-radius: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.btn-hero-cursos:hover {
    transform: translateY(-3px);
    filter: brightness(1.1);
}

/* Lado Direito / Imagens */
.hero-cursos-visual {
    position: relative;
    display: flex;
    justify-content: flex-end;
    /* Alinha a imagem à direita */
}

.laptop-img {
    /* Força a imagem a ser maior, ocupando 120% da sua coluna original */
    /* Isso faz ela vazar para a direita e para baixo */
    width: 120%;
    max-width: none;
    /* Removemos o max-width anterior */
    filter: drop-shadow(20px 20px 40px rgba(0, 0, 0, 0.4));
    /* Empurra o notebook um pouco para fora */
    transform: translateX(10%) translateY(5%);
}

.hero-tags {
    margin-top: 12px;
    display: flex;
    gap: 8px;
}

.hero-tags span {
    background: #34aadc;
    /* Tom de azul da imagem */
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: bold;
}

.scroll-arrow {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-size: 1.5rem;
    opacity: 0.7;
}

/* Ajuste de Responsividade */
@media (max-width: 992px) {
    .container-cursos {
        grid-template-columns: 1fr;
        /* Volta para coluna única no mobile */
        text-align: center;
    }

    .laptop-img {
        width: 100%;
        /* No mobile, volta a ocupar a largura normal */
        transform: none;
        /* Remove os vazamentos */
        max-width: 500px;
        /* Limita o tamanho no mobile */
        margin: 0 auto;
    }

    .hero-cursos-content h1,
    .hero-cursos-content p {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    .hero-cursos-visual {
        margin-top: 40px;
    }

}

/* =========================================
   SEÇÃO: MÓDULOS DO CURSO
   ========================================= */

.modulos-cursos {
    padding: 100px 20px;
    background-color: #ffffff;
    /* Fundo branco para destacar os cards escuros */
    text-align: center;
}

.modulos-header h2 {
    font-size: 2rem;
    color: #001212;
    font-weight: 700;
    margin-bottom: 10px;
}

.modulos-header p {
    font-size: 1rem;
    color: var(--dark-blue);
    font-style: italic;
    margin-bottom: 60px;
}

.modulos-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* 2 colunas como na imagem */
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto;
}

.modulo-card {
    background-color: var(--card-bg);
    /* Usando sua variável #050f0f */
    border-radius: 20px;
    padding: 40px;
    text-align: left;
    color: #ffffff;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.modulo-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.modulo-icon-title {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
}

.icon-box {
    width: 45px;
    height: 45px;
    background-color: #537a1a;
    /* Verde oliva do ícone */
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Caso queira o ícone do módulo 2 em uma cor diferente como na imagem */
.icon-yellow {
    background-color: #a0b82d;
}

.modulo-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
}

.modulo-desc {
    font-size: 0.95rem;
    color: #b0bfc3;
    /* Cinza azulado para leitura suave */
    line-height: 1.5;
    margin-bottom: 25px;
}

.modulo-list {
    list-style: none;
    padding: 0;
}

.modulo-list li {
    font-size: 0.9rem;
    position: relative;
    padding-left: 20px;
    margin-bottom: 12px;
    color: #ffffff;
    line-height: 1.4;
}

/* Bolinha da lista */
.modulo-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #ffffff;
    font-weight: bold;
}

/* Responsividade */
@media (max-width: 900px) {
    .modulos-grid {
        grid-template-columns: 1fr;
        /* 1 coluna no mobile */
    }

    .modulo-card {
        padding: 30px;
    }
}

/* =========================================
   SEÇÃO: INFORMAÇÕES TÉCNICAS E MERCADO
   ========================================= */

.info-curso-section {
    padding: 100px 20px;
    background-color: #051313;
    /* Usando o tom escuro do seu footer/bg */
    color: #ffffff;
}

/* Cabeçalho */
.info-header {
    display: flex;
    gap: 40px;
    margin-bottom: 80px;
    align-items: flex-start;
}

.header-left {
    flex: 0 0 250px;
}

.label-tech {
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 2px;
    line-height: 1.4;
    display: block;
}

.header-right {
    flex: 1;
}

.header-right h2 {
    font-size: 1.8rem;
    line-height: 1.3;
    margin-bottom: 25px;
    font-weight: 700;
}

.header-right p {
    font-size: 1.1rem;
    color: #a0aec0;
    line-height: 1.6;
    max-width: 800px;
}

/* Grid de Cards */
.info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.info-card {
    background-color: #f0f7f9;
    /* Branco levemente azulado para cards normais */
    border-radius: 15px;
    padding: 40px 30px;
    color: #051313;
    display: flex;
    flex-direction: column;
}

/* Card de Destaque (Primeiro) */
.info-card.highlight {
    background-color: #d1f1f7;
    /* Azul mais forte do print */
}

.info-icon-container {
    width: 50px;
    height: 50px;
    background-color: #00414c;
    /* Cor escura do ícone */
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
}

.info-icon-container img {
    width: 24px;
    height: 24px;
}

.info-card h3 {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 25px;
    min-height: 50px;
    /* Alinha os textos caso variem de tamanho */
}

.info-list {
    list-style: none;
    padding: 0;
}

.info-list li {
    font-size: 0.95rem;
    position: relative;
    padding-left: 20px;
    margin-bottom: 15px;
    line-height: 1.4;
    color: #1a2a2a;
    font-weight: 500;
}

.info-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    font-weight: bold;
}

/* Responsividade */
@media (max-width: 1024px) {
    .info-header {
        flex-direction: column;
        gap: 20px;
    }

    .info-grid {
        grid-template-columns: 1fr;
        /* Uma coluna no mobile */
    }

    .header-left {
        flex: none;
    }
}

/* =========================================
   SEÇÃO: PROFESSORES / ESPECIALISTAS
   ========================================= */

.professores-section {
    padding: 80px 20px;
    background-color: #ffffff;
    text-align: center;
}

.professores-header {
    margin-bottom: 60px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.professores-header h2 {
    font-size: 1.8rem;
    color: #001212;
    /* Cor escura padrão Greener */
    font-weight: 700;
    margin-bottom: 15px;
    letter-spacing: 1px;
}

.professores-header p {
    font-size: 1.1rem;
    color: #666;
    line-height: 1.5;
}

/* Grid de Professores */
.professores-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px 30px;
    /* 40px de espaço vertical, 30px horizontal */
    max-width: 1100px;
    margin: 0 auto;
}

.professor-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Calcula o tamanho para caber 3 na linha descontando o gap */
    flex: 0 1 calc(33.333% - 20px);
    min-width: 280px;
    /* Garante que não esmaguem em telas médias */
}

.professor-img {
    width: 100%;
    margin-bottom: 20px;
    overflow: hidden;
    border-radius: 12px;
    /* Arredondamento conforme a imagem */
}

.professor-img img {
    width: 100%;
    aspect-ratio: 1 / 1;
    /* Força o formato quadrado */
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

/* Efeito sutil ao passar o mouse */
.professor-card:hover .professor-img img {
    transform: scale(1.05);
}

.professor-info h3 {
    font-size: 1.25rem;
    color: #001212;
    font-weight: 700;
    margin-bottom: 5px;
}

.professor-info p {
    font-size: 0.9rem;
    color: #444;
    line-height: 1.4;
    max-width: 220px;
    margin: 0 auto;
}

/* Responsividade */
@media (max-width: 900px) {
    .professores-grid {
        grid-template-columns: 1fr;
        /* Uma coluna no mobile */
        gap: 50px;
    }

    .professor-img {
        max-width: 350px;
        /* Limita o tamanho da foto no mobile */
    }
}

/* =========================================
   SEÇÃO: CHECKOUT / PREÇO
   ========================================= */

.checkout-section {
    padding: 100px 20px;
    background: radial-gradient(circle at right, #0a2525 0%, #001212 100%);
    /* Fundo escuro profundo */
    color: #ffffff;
}

.checkout-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 60px;
    max-width: 1100px;
}

/* Lado Esquerdo */
.checkout-text {
    flex: 1;
}

.checkout-text h2 {
    font-size: 2.2rem;
    color: var(--primary-green);
    /* Verde limão para o título */
    margin-bottom: 20px;
    font-weight: 700;
}

.checkout-text p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #e0e0e0;
    max-width: 500px;
}

/* Card de Preço à Direita */
.price-card {
    background-color: #05262b;
    /* Azul petróleo escuro */
    padding: 50px 40px;
    border-radius: 20px;
    width: 100%;
    max-width: 450px;
    text-align: right;
    /* Preço alinhado à direita conforme imagem */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.price-label {
    display: block;
    font-size: 0.9rem;
    color: #a0aec0;
    margin-bottom: 5px;
}

.price-value {
    font-size: 3rem;
    font-weight: 700;
    color: var(--primary-green);
    margin-bottom: 20px;
}

.price-divider {
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 30px;
}

.price-features {
    list-style: none;
    padding: 0;
    text-align: left;
    /* Lista volta a ser alinhada à esquerda */
    margin-bottom: 40px;
}

.price-features li {
    font-size: 1rem;
    color: #ffffff;
    margin-bottom: 25px;
    position: relative;
    padding-left: 25px;
    line-height: 1.4;
}

.price-features li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--primary-green);
    font-size: 1.5rem;
    line-height: 1;
}

.btn-checkout {
    display: block;
    background-color: var(--primary-green);
    color: #001212;
    text-align: center;
    padding: 18px;
    text-decoration: none;
    font-weight: 700;
    border-radius: 8px;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.btn-checkout:hover {
    transform: translateY(-3px);
    filter: brightness(1.1);
}

/* Responsividade */
@media (max-width: 900px) {
    .checkout-container {
        flex-direction: column;
        text-align: center;
    }

    .checkout-text p {
        margin: 0 auto;
    }

    .price-card {
        text-align: center;
        max-width: 100%;
    }

    .price-features {
        display: inline-block;
        max-width: 300px;
    }
}

/* =========================================
   SEÇÃO: FAQ (PERGUNTAS FREQUENTES)
   ========================================= */

.faq-section {
    padding: 80px 20px;
    background-color: #f9fdf2;
    text-align: center;
}

.faq-header h2 {
    font-size: 1.8rem;
    color: #001212;
    font-weight: 700;
    margin-bottom: 50px;
}

.faq-list {
    max-width: 900px;
    /* Um pouco mais largo para acomodar bem o texto */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.faq-item {
    background-color: #071a1e;
    /* Tom bem escuro para o cabeçalho (Título) */
    border-radius: 12px;
    overflow: hidden;
    text-align: left;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.faq-question {
    padding: 22px 30px;
    color: #f0f8d1;
    /* A cor que você solicitou para o título */
    font-weight: 700;
    font-size: 1.1rem;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
}

/* Seta customizada usando a cor solicitada */
.faq-question::before {
    content: '∨';
    margin-right: 15px;
    font-size: 0.9rem;
    font-weight: 900;
    /* Deixa o ícone um pouco mais espesso */
    color: #c5da52;
    /* A COR SOLICITADA */
    transition: transform 0.3s ease;
}

/* Rotação da seta quando aberto */
.faq-item[open] .faq-question::before {
    transform: rotate(180deg);
}

/* Linha divisória quando aberto */
.faq-item[open] .faq-question {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.faq-answer {
    padding: 25px 30px;
    /* Um tom de azul petróleo ligeiramente mais claro/azulado que o título */
    background-color: #0a252a;
    border-top: 1px solid rgba(240, 248, 209, 0.1);
    /* Linha sutil com a cor do texto */
}

.faq-answer p {
    margin: 0;
    color: #f0f8d1;
    /* Texto da resposta também seguindo o tom solicitado */
    line-height: 1.6;
    font-size: 1rem;
    opacity: 0.9;
    /* Leve transparência para diferenciar hierarquia */
}

.faq-item[open] .faq-question::before {
    transform: rotate(180deg);
    color: #c5da52;
}

.faq-question::-webkit-details-marker {
    display: none;
}

/* Responsividade */
@media (max-width: 768px) {
    .faq-question {
        font-size: 1rem;
        padding: 20px;
    }
}

/* Seção de Patrocínios Customizada */
.sponsorship-hero {
    /* Criando o efeito de listras verticais da imagem */
    background: linear-gradient(90deg,
            #82c3d1 0%, #82c3d1 10%,
            #9bc9d3 10%, #9bc9d3 20%,
            #b2d1d8 20%, #b2d1d8 30%,
            #cae0e5 30%, #cae0e5 40%,
            #e1eff2 40%, #e1eff2 60%,
            #cae0e5 60%, #cae0e5 70%,
            #b2d1d8 70%, #b2d1d8 80%,
            #9bc9d3 80%, #9bc9d3 90%,
            #82c3d1 90%, #82c3d1 100%);
    padding: 120px 0 60px;
    text-align: center;
    min-height: 80vh;
    display: flex;
    align-items: center;
}

.hero-inner {
    max-width: 900px;
    margin: 0 auto;
}

.hero-tagline {
    color: var(--dark-blue);
    /* Usando sua variável */
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 20px;
    letter-spacing: 0.5px;
}

.sponsorship-hero h1 {
    color: var(--dark-blue);
    /* Cor do texto principal do seu CSS */
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 25px;
}

.hero-description {
    color: var(--dark-blue);
    font-size: 1.15rem;
    line-height: 1.6;
    max-width: 750px;
    margin: 0 auto 40px;
    opacity: 0.9;
}

/* Ajuste específico para o botão nesta seção (Verde Limão do print) */
.sponsorship-hero .btn-primary {
    background-color: var(--primary-color);
    /* #cddc39 do seu :root */
    color: var(--dark-blue);
    padding: 15px 40px;
    border-radius: 8px;
    font-size: 1rem;
    transition: transform 0.2s;
    display: inline-block;
}

.sponsorship-hero .btn-primary:hover {
    transform: scale(1.05);
    background-color: var(--primary-green);
}

.scroll-indicator {
    margin-top: 60px;
    color: var(--white);
    animation: bounce 2s infinite;
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-10px);
    }

    60% {
        transform: translateY(-5px);
    }
}

/* Responsividade */
@media (max-width: 768px) {
    .sponsorship-hero h1 {
        font-size: 2.2rem;
    }

    .sponsorship-hero {
        padding: 80px 20px;
    }
}

/* Seção de Indicadores de Parceria */
.partnership-stats {
    background-color: #051313;
    /* Tom escuro do seu bg-dark/footer */
    padding: 100px 0;
    color: var(--white);
}

.stats-main-title {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 80px;
    color: var(--white);
    text-align: left;
    /* Alinhado à esquerda conforme a imagem */
}

.stats-grid-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.stat-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.stat-number {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--white);
    line-height: 1.2;
}

.stat-description {
    font-size: 1.05rem;
    color: #e0e0e0;
    /* Cinza claro para leitura */
    line-height: 1.4;
    max-width: 220px;
}

/* Divisores verticais finos */
.stat-divider {
    width: 1px;
    height: 180px;
    /* Altura fixa para manter o alinhamento do print */
    background-color: rgba(255, 255, 255, 0.2);
    align-self: center;
}

/* Responsividade para tablets e celulares */
@media (max-width: 992px) {
    .stats-grid-row {
        flex-wrap: wrap;
        gap: 40px;
    }

    .stat-divider {
        display: none;
        /* Remove divisores no mobile para não quebrar o layout */
    }

    .stat-box {
        min-width: 200px;
        text-align: center;
    }

    .stat-description {
        margin: 0 auto;
    }

    .stats-main-title {
        text-align: center;
    }
}

/* Seção Por Que Estar Conosco */
.partnership-reasons {
    padding: 100px 0;
    background-color: var(--white);
}

.reasons-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-bottom: 60px;
    align-items: flex-start;
}

.reasons-header h2 {
    color: var(--dark-blue);
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.2;
}

.reasons-header p {
    color: #4b5563;
    font-size: 1.1rem;
    line-height: 1.6;
}

/* Grid Layout */
.reasons-grid {
    display: grid;
    grid-template-columns: 1.8fr 1fr 1fr;
    /* Proporção do card grande */
    gap: 24px;
}

.reason-card {
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Card Grande com Texto Sobreposto */
.card-large {
    height: 480px;
}

.card-large img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-large .reason-content {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 40px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    color: var(--white);
}

.card-large h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

/* Coluna Central */
.reason-column {
    display: flex;
    flex-direction: column;
    /* Removemos o gap entre os cards para que eles se toquem */
    gap: 0;

    /* Aplicamos o arredondamento e o fundo aqui, no container pai */
    background-color: #e9f4f7;
    /* Seu light-blue */
    border-radius: 20px;
    overflow: hidden;
    /* Garante que a imagem respeite o arredondamento */
}

.card-text-only {
    background-color: #e9f4f7;
    /* Seu light-blue */
    padding: 30px;
    flex: 1;
}

.card-text-only h3 {
    color: var(--dark-blue);
    font-size: 1.2rem;
    margin-bottom: 15px;
}

.card-text-only p {
    color: #4b5563;
    font-size: 0.95rem;
}

.card-image-only {
    flex: 1.5;
}

.card-image-only img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Card Vertical Direita */
.card-vertical {
    background-color: #051313;
    border-radius: 20px;
    overflow: hidden;
    /* Fundo escuro */
}

.vertical-img-wrapper {
    height: 60%;
    width: 100%;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    overflow: hidden;
}

.vertical-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.reason-content-dark {
    padding: 30px;
    color: var(--white);
}

.reason-content-dark h3 {
    font-size: 1.2rem;
    margin-bottom: 15px;
}

.reason-content-dark p {
    color: #9ca3af;
    font-size: 0.95rem;
}

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

    .card-large {
        grid-column: span 2;
    }
}

@media (max-width: 768px) {
    .reasons-header {
        grid-template-columns: 1fr;
    }

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

    .card-large {
        grid-column: span 1;
        height: 350px;
    }
}

/* --- Seção Calendário Greener --- */
.greener-calendar {
    padding: 50px 0;
    background-color: var(--white);
    text-align: center;
}

.calendar-header h2 {
    font-size: 2rem;
    color: var(--dark-blue);
    margin-bottom: 15px;
    font-weight: 600;
}

.calendar-header p {
    color: #4b5563;
    margin-bottom: 80px;
}

/* Timeline Container */
.timeline-wrapper {
    position: relative;
    padding-top: 100px;
}

.timeline-line {
    position: absolute;
    top: 125px;
    /* Alinhado com os pontos */
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #00414c;
    z-index: 1;
}

/* Seta no final da linha */
.timeline-line::after {
    content: '';
    position: absolute;
    right: -5px;
    top: -4px;
    border-left: 10px solid #cddc39;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}

.timeline-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
    position: relative;
    z-index: 2;
}

.timeline-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Badges de Tempo */
.time-badge {
    padding: 8px 20px;
    border-radius: 25px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 35px;
    background: white;
}

.badge-blue {
    border: 1.5px solid #a8e6f0;
    color: #008fa3;
}

.badge-green {
    border: 1.5px solid #cddc39;
    color: #7a8a00;
}

/* Pontos na linha */
.timeline-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    margin-bottom: 30px;
}

.dot-blue {
    background-color: #a8e6f0;
}

.dot-green {
    background-color: #cddc39;
}

/* Cards do Calendário */
.calendar-card {
    background-color: #051313;
    /* Seu bg-dark */
    border-radius: 15px;
    padding: 25px;
    text-align: left;
    color: var(--white);
    width: 100%;
    min-height: 250px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.calendar-card.border-active {
    border: 2px solid #00A9E0;
}

.card-section .label {
    display: block;
    font-size: 0.75rem;
    color: #9ca3af;
    margin-bottom: 8px;
}

.text-green {
    color: #cddc39 !important;
}

.card-section h4 {
    font-size: 0.95rem;
    line-height: 1.4;
    font-weight: 700;
    margin-bottom: 8px;
}

.card-section h4.title-large {
    font-size: 1.3rem;
}

.card-section .date {
    font-size: 0.8rem;
    color: #d1d5db;
}

.card-divider {
    height: 1px;
    background-color: rgba(255, 255, 255, 0.2);
    margin: 5px 0;
}

/* Responsividade */
@media (max-width: 1024px) {
    .timeline-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .timeline-line {
        display: none;
    }

    .calendar-card {
        min-height: auto;
    }
}

.container-full {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

.calendar-header {
    text-align: center;
    margin-bottom: 80px;
}

.calendar-header h2 {
    font-size: 2.2rem;
    color: #000;
    font-weight: 600;
    margin-bottom: 10px;
}

.calendar-header p {
    color: #333;
    font-size: 1.1rem;
}

/* Timeline Layout */
.timeline-container {
    position: relative;
    padding-top: 40px;
}

.timeline-track {
    position: absolute;
    top: 121px;
    /* Ajuste fino para cruzar o centro das bolinhas */
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #00414c;
    z-index: 1;
}

.timeline-arrow {
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 14px solid #b2d235;
    /* var(--primary-green) */
}

.timeline-items {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    position: relative;
    z-index: 2;
}

.timeline-column {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Badges ovais superiores */
.period-badge {
    padding: 10px 24px;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 30px;
    background: #fff;
    white-space: nowrap;
}

.badge-cyan {
    border: 1.5px solid #d0f0f7;
    color: #1f7d8e;
}

.badge-lime {
    border: 1.5px solid #b2d235;
    color: #4e5a1a;
}

/* Marcadores (Dots) */
.marker {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    margin-bottom: 40px;
    position: relative;
    z-index: 3;
    /* Cria o respiro branco sobre a linha */
    flex-shrink: 0;
}

.marker-cyan {
    background-color: #a8e6f0;
}

.marker-lime {
    background-color: #b2d235;
}

/* Cards do Evento */
.event-card {
    background-color: #051313;
    /* Seu bg padrão */
    border-radius: 18px;
    padding: 30px 25px;
    text-align: left;
    color: #fff;
    width: 100%;
    min-height: 320px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* Borda azul de destaque (Item 2) */
/* .event-card.border-focus {
    border: 3px solid #0076a8;
    box-shadow: 0 0 15px rgba(0, 118, 168, 0.3);
} */

.card-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.type-label {
    display: block;
    font-size: 0.8rem;
    color: #9ca3af;
    margin-bottom: 12px;
}

.highlight-lime {
    color: #b2d235 !important;
}

.event-card h3 {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 12px;
}

.event-card h3.font-lg {
    font-size: 1.6rem;
}

.meta-info {
    font-size: 0.85rem;
    color: #d1d5db;
    margin-top: auto;
}

.card-sep {
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    margin: 20px 0;
    width: 100%;
}

/* Ajustes Responsivos */
@media (max-width: 1100px) {
    .timeline-items {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }

    .timeline-track {
        display: none;
    }
}

@media (max-width: 768px) {
    .timeline-items {
        grid-template-columns: 1fr;
    }
}

/* --- Seção Impacto Branding --- */
.branding-impact {
    background-color: #051313;
    /* Fundo escuro conforme o print */
    padding: 100px 0;
    color: var(--white);
}

.impact-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    /* Imagem ligeiramente menor que o texto */
    gap: 80px;
    align-items: center;
}

.impact-image {
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
}

.impact-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.impact-content h2 {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 50px;
    color: var(--white);
}

.impact-list {
    list-style: none;
    padding: 0;
}

.impact-list li {
    display: flex;
    align-items: center;
    gap: 25px;
    padding: 20px 0;
}

.impact-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}

/* O último ícone possui um detalhe azul no print */
.impact-icon.icon-blue {
    border-color: #00A9E0;
    background-color: rgba(0, 169, 224, 0.1);
}

.impact-list p {
    font-size: 1.15rem;
    line-height: 1.4;
    color: #e0e0e0;
}

.impact-sep {
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    margin: 0;
    width: 100%;
}

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

    .impact-content h2 {
        font-size: 1.8rem;
    }
}

/* --- Seção de Logos de Parceiros --- */
.partner-logos {
    padding: 50px 0;
    background-color: var(--white);
    /* Fundo branco conforme o print */
    text-align: center;
}

.partner-header {
    margin-bottom: 60px;
}

.partner-header h2 {
    font-size: 2rem;
    color: #000;
    font-weight: 700;
    margin-bottom: 12px;
}

.partner-header p {
    font-size: 1.1rem;
    color: #333;
}

/* Grid de Logotipos */
.logos-grid {
    display: grid;
    /* Cria 5 colunas de tamanhos iguais para a primeira linha */
    grid-template-columns: repeat(5, 1fr);
    /* Espaçamento generoso: 60px vertical e 40px horizontal */
    gap: 60px 40px;
    max-width: 1200px;
    margin: 0 auto;
    align-items: center;
    /* Centraliza as logos verticalmente na linha */
    justify-items: center;
    /* Centraliza as logos horizontalmente na coluna */
}

.logo-item {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo-item img {
    /* Controle rigoroso de escala para uniformidade */
    max-width: 160px;
    max-height: 45px;
    object-fit: contain;

    /* Efeito visual do design system Greener */
    filter: grayscale(100%);
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.logo-item:nth-child(n+6) {
    grid-column: span 1;
}

/* Efeito sutil ao passar o mouse */
.logo-item img:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.05);
}

/* Ajustes para telas menores */
@media (min-width: 992px) {
    .logos-grid {
        /* Removemos o grid fixo de 5 e usamos flex para a auto-centralização da última linha */
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        column-gap: 100px;
        /* Espaço maior entre logos na mesma linha */
        row-gap: 60px;
        /* Espaço entre as linhas */
    }

    .logo-item {
        width: calc(20% - 100px);
        /* 5 itens por linha descontando o gap */
        min-width: 150px;
    }
}

/* Responsividade para Mobile */
@media (max-width: 768px) {
    .logos-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 2 colunas no celular */
        gap: 40px;
    }
}

/* --- Seção de CTA de Renovação --- */
.renewal-cta-section {
    padding: 80px 0;
    background-color: var(--white);
}

.container-renewal {
    max-width: 1400px;
    height: 500px;
    margin: 0 auto;
    padding: 0 20px;
}

.renewal-card {
    /* O linear-gradient cria a sobreposição escura/petróleo em cima da imagem */
    /* Substitua o caminho da imagem pelo caminho correto no seu projeto */
    background: linear-gradient(to bottom,
            rgba(4, 55, 65, 0.65) 0%,
            rgba(2, 20, 24, 0.95) 100%), url('../img/midia-kit/SPONSORS.png') no-repeat center center;
    background-size: cover;

    border-radius: 20px;
    /* Mantém a consistência dos cantos arredondados */
    min-height: 550px;

    /* Flexbox para empurrar o conteúdo para baixo e centralizar */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;

    padding: 60px 40px;
    text-align: center;
    color: var(--white);
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.renewal-content {
    max-width: 1000px;
    width: 100%;
}

.renewal-content h2 {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 20px;
    color: var(--white);
}

.renewal-content p {
    font-size: 1.1rem;
    color: #e2e8f0;
    /* Um branco levemente acinzentado para não brigar com o título */
    line-height: 1.5;
    margin-bottom: 35px;
}

/* Botão específico desta seção */
.btn-renew {
    display: inline-block;
    background-color: var(--primary-color-2);
    /* Puxando o #cddc39 do seu :root */
    color: #001212;
    /* Texto bem escuro para contraste alto */
    padding: 14px 32px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    transition: transform 0.2s ease, background-color 0.3s ease;
}

.btn-renew:hover {
    transform: translateY(-3px);
    background-color: #b8c633;
    /* Um tom levemente mais escuro para o hover */
}

/* Responsividade */
@media (max-width: 768px) {
    .renewal-card {
        min-height: 450px;
        padding: 40px 20px;
    }

    .renewal-content h2 {
        font-size: 1.4rem;
    }

    .renewal-content h2 br,
    .renewal-content p br {
        display: none;
        /* Remove as quebras de linha manuais no mobile para o texto fluir melhor */
    }

    .renewal-content p {
        font-size: 1rem;
    }
}

/* --- Seção de Captação de Leads (Formulário) --- */
.lead-generation-section {
    padding: 100px 0;
    background-color: var(--white);
}

.lead-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

/* --- Lado Esquerdo: Texto --- */
.lead-text-content {
    text-align: center;
    /* Centralizado conforme a imagem */
}

.lead-text-content h2 {
    font-size: 2.2rem;
    font-weight: 600;
    color: #001212;
    /* Tom escuro principal */
    line-height: 1.4;
    margin-bottom: 30px;
}


.lead-text-content p {
    font-size: 1.1rem;
    color: #333;
    line-height: 1.6;
}

.lead-text-content p strong {
    color: #001212;
    font-weight: 700;
    display: block;
    margin-top: 10px;
}

/* --- Lado Direito: Formulário --- */
.lead-form-wrapper {
    background-color: #042429;
    /* Fundo verde/petróleo escuro da imagem */
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
    /* Sombra elegante */
}

.lead-form-group {
    margin-bottom: 20px;
}

.lead-form-group label {
    display: block;
    color: var(--white);
    font-size: 0.9rem;
    margin-bottom: 8px;
    font-weight: 500;
}

.lead-form-group input,
.lead-form-group select {
    width: 100%;
    background-color: #011114;
    /* Fundo super escuro (quase preto) dos campos */
    border: 1px solid transparent;
    color: var(--white);
    padding: 14px 15px;
    border-radius: 6px;
    outline: none;
    font-size: 0.95rem;
    transition: border-color 0.3s ease;
}

.lead-form-group input::placeholder {
    color: #a0aec0;
    /* Cor do placeholder */
}

.lead-form-group input:focus,
.lead-form-group select:focus {
    border-color: var(--primary-color);
    /* Borda verde ao clicar */
}

/* Remove a setinha padrão do select em alguns navegadores para ficar mais limpo */
.lead-form-group select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 15px top 50%;
    background-size: 12px auto;
}

/* Checkbox de Privacidade */
.lead-checkbox-group {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 30px 0 25px;
}

.lead-checkbox-group input[type="checkbox"] {
    margin-top: 3px;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.lead-checkbox-group label {
    font-size: 0.85rem;
    color: var(--white);
    line-height: 1.4;
    cursor: pointer;
}

/* Botão de Submit */
.btn-submit-lead {
    width: 100%;
    background-color: var(--primary-color-2);
    /* Verde limão */
    color: #001212;
    font-weight: 700;
    font-size: 1.05rem;
    padding: 16px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-submit-lead:hover {
    background-color: #b8c633;
    transform: translateY(-2px);
}

/* Footer do Form (Link da Política) */
.lead-form-footer {
    text-align: center;
    margin-top: 20px;
}

.lead-form-footer p {
    font-size: 0.85rem;
    color: #a0aec0;
}

.lead-form-footer a {
    color: #a0aec0;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.3s ease;
}

.lead-form-footer a:hover {
    color: var(--white);
}

/* --- Mensagem de Sucesso --- */
.lead-success-message {
    text-align: center;
    padding: 30px 10px;
    color: var(--white);
    animation: fadeIn 0.5s ease forwards;
}

.success-icon {
    width: 60px;
    height: 60px;
    background-color: rgba(205, 220, 57, 0.1);
    /* Fundo verde com transparência */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.success-icon svg {
    width: 30px;
    height: 30px;
    color: var(--primary-color);
    /* Verde limão */
}

.lead-success-message h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: var(--primary-color);
}

.lead-success-message p {
    font-size: 1rem;
    color: #a0aec0;
    line-height: 1.5;
    margin-bottom: 25px;
}

.btn-voltar-form {
    background: transparent;
    border: 1px solid var(--primary-color-2);
    color: var(--primary-color-2);
    padding: 10px 24px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-voltar-form:hover {
    background: var(---2);
    color: #001212;
}

.iti {
    width: 100%;
    display: block;
}

.iti__country-list {
    background-color: var(--card-bg, #050f0f);
    color: white;
    border: 1px solid var(--border-color, #1f2937);
}

.iti__country.iti__highlight {
    background-color: rgba(255, 255, 255, 0.1);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

/* Responsividade */
@media (max-width: 992px) {
    .lead-container {
        grid-template-columns: 1fr;
        /* Empilha o texto e o form no mobile */
        gap: 50px;
    }

    .lead-text-content {
        padding: 0 15px;
    }

    .lead-form-wrapper {
        padding: 30px 20px;
    }
}

/* --- Estilos para a Seção: Dê o próximo passo! --- */

.steps-process {
    padding: 80px 0;
    background-color: var(--white);
    /* Força o fundo branco da seção principal */
}

/* Define um fundo escuro apenas para o cabeçalho desta seção, conforme a imagem */
.steps-header {
    background-color: var(--dark-blue);
    padding: 30px;
    border-radius: 12px;
    text-align: center;
    margin-bottom: 60px;
    display: flex;
    /* Para centralizar o h2 verticalmente se ele tiver mais de uma linha */
    align-items: center;
    justify-content: center;
}

.steps-header h2 {
    font-size: 3rem;
    /* Ajuste para não brigar com o h1 */
    font-weight: 700;
    color: var(--white);
    margin: 0;
    /* Remove margens padrão */
}

/* Estrutura vertical dos passos */
.steps-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    /* O espaçamento será controlado pelos divisores ou margens internas */
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    /* Para a linha tracejada */
}

/* Linha tracejada que conecta os passos */
.steps-list::before {
    content: '';
    position: absolute;
    top: 50px;
    /* Começa abaixo do badge 1 */
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: calc(100% - 100px);
    /* Ajuste para não cruzar o badge 3 */
    border-left: 2px dashed #d1d5db;
    /* Linha tracejada cinza */
    z-index: 1;
    /* Garante que fique atrás dos pilares */
}

/* Pilar/Card de cada passo */
.step-pillar {
    background-color: rgba(255, 255, 255, 0.9);
    /* Pilar branco/semi-transparente */
    border-radius: 50px;
    padding: 40px;
    width: 100%;
    margin-bottom: 80px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    /* Sombra suave para profundidade */
    position: relative;
    z-index: 2;
    /* Garante que fique à frente da linha tracejada */
    display: flex;
    align-items: flex-start;
    gap: 30px;
}

/* Remova a margem do último pilar */
.step-pillar:last-child {
    margin-bottom: 0;
}

/* O badge circular com o número */
.step-badge {
    background-color: var(--dark-blue);
    /* Ou substitua por var(--light-blue) se quiser o azul claro da imagem */
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    font-weight: 700;
    flex-shrink: 0;
    /* Impede que o círculo seja esmagado */
    border: 3px solid var(--white);
    /* Borda branca para destacar o badge */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Conteúdo de texto dentro do pilar */
.pillar-content {
    flex-grow: 1;
}

.pillar-content h3 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--dark-blue);
    margin-top: 0;
    margin-bottom: 15px;
}

.pillar-content p {
    font-size: 1.4rem;
    line-height: 1.6;
    color: #4b5563;
    /* Cinza para o corpo do texto */
    margin-bottom: 20px;
}

/* Detalhes com marcadores personalizados (checkmarks) */
.pillar-details {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pillar-details li {
    font-size: 1.2rem;
    color: var(--dark-blue);
    font-weight: 500;
}

.pillar-details .text-primary-green {
    margin-right: 10px;
    font-weight: 700;
}

/* Responsividade: ajuste para telas menores */
@media (max-width: 768px) {
    .steps-header h2 {
        font-size: 2rem;
    }

    .step-pillar {
        flex-direction: column;
        /* Empilha o badge e o texto */
        align-items: center;
        text-align: center;
        padding: 30px;
    }

    .pillar-content h3 {
        font-size: 1.8rem;
    }

    .pillar-content p {
        font-size: 1.2rem;
    }

    /* Centraliza a lista de detalhes */
    .pillar-details {
        align-items: center;
    }

    /* Remove a linha tracejada no mobile para evitar sobreposições */
    .steps-list::before {
        display: none;
    }
}

/* =========================================
   SEÇÃO: CTA CURSOS GREENER
   ========================================= */

.banner-cursos-cta {
    /* Gradiente escuro inspirado na imagem (petróleo para quase preto) */
    background: linear-gradient(135deg, #052a2e 0%, #011114 100%);
    padding: 100px 0;
    color: var(--white);
    /* Puxando variável do seu :root */
}

/* Aproveita o seu .container, mas garante o alinhamento à esquerda */
.banner-cursos-cta .container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.banner-cursos-content {
    max-width: 900px;
}

.banner-cursos-cta h2 {
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.2;
    color: var(--white);
}

/* Destaque em Ciano/Azul claro no título */
.banner-cursos-cta h2 span {
    color: #00d2df;
}

.banner-cursos-cta p.subtitle {
    font-size: 1.05rem;
    color: #e2e8f0;
    /* Branco um pouco mais suave */
    margin-bottom: 40px;
    line-height: 1.6;
    max-width: 600px;
}

/* Botão Branco Customizado */
.btn-branco-cta {
    display: inline-block;
    background-color: #ffffff;
    color: #000000;
    padding: 12px 24px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.2s ease;
    margin-bottom: 60px;
    /* Empurra a parte da comunidade para baixo */
}

.btn-branco-cta:hover {
    background-color: #f1f1f1;
    transform: translateY(-2px);
}

/* Área de Comunidade e Logos */
.banner-cursos-comunidade p {
    font-size: 0.85rem;
    color: #a0aec0;
    /* Cinza claro da imagem */
    margin-bottom: 20px;
    font-weight: 500;
}

.logos-comunidade {
    display: flex;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
}

.logos-comunidade img {
    height: 22px;
    /* Controla o tamanho das logos para ficarem uniformes */
    object-fit: contain;

    /* MÁGICA DO CSS: Se as suas logos originais forem coloridas, 
       este filtro vai transformá-las em branco com opacidade! */
    filter: brightness(0) invert(1) opacity(0.6);
    transition: opacity 0.3s ease;
}

.logos-comunidade img:hover {
    opacity: 1;
    /* Fica 100% branco ao passar o mouse */
}

/* Responsividade para Celulares */
@media (max-width: 768px) {
    .banner-cursos-cta {
        padding: 60px 0;
    }

    .banner-cursos-cta h2 {
        font-size: 2rem;
    }

    .logos-comunidade {
        gap: 25px;
    }

    .logos-comunidade img {
        height: 18px;
    }
}

/* =========================================
   SEÇÃO: CARD DE IMPACTO / ESTATÍSTICA
   ========================================= */

.destaque-impacto-section {
    /* Fundo ciano super claro inspirado na sua imagem */
    background-color: #f2f9f9;
    padding: 80px 20px;
}

.destaque-impacto-card {
    background-color: var(--white);
    border-radius: 16px;
    padding: 40px 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
    /* Sombra bem sutil e elegante para destacar do fundo */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.02);
}

.impacto-texto {
    max-width: 65%;
}

.impacto-texto h3 {
    font-size: 1.5rem;
    color: #001212;
    /* Tom bem escuro, quase preto */
    font-weight: 700;
    margin-bottom: 10px;
}

.impacto-texto p {
    font-size: 1rem;
    color: #5b6f74;
    /* Cinza esverdeado para leitura agradável */
    line-height: 1.6;
}

.impacto-numero {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.numero-destaque {
    font-size: 3.5rem;
    font-weight: 700;
    color: #00c4cc;
    /* Tom de ciano vibrante igual ao da imagem */
    line-height: 1;
    margin-bottom: 8px;
    letter-spacing: -1px;
}

.numero-legenda {
    font-size: 0.9rem;
    color: #666;
    font-weight: 500;
}

/* Responsividade para Tablets e Celulares */
@media (max-width: 768px) {
    .destaque-impacto-section {
        padding: 50px 20px;
    }

    .destaque-impacto-card {
        flex-direction: column;
        text-align: center;
        padding: 40px 30px;
        gap: 40px;
        /* Espaço entre o texto e o número quando empilhados */
    }

    .impacto-texto {
        max-width: 100%;
    }

    .impacto-texto p br {
        display: none;
        /* Remove a quebra de linha forçada no celular para o texto fluir melhor */
    }

    .numero-destaque {
        font-size: 3rem;
    }
}

/* =========================================
   SEÇÃO: CAPACITAÇÃO / TRANSIÇÃO ENERGÉTICA
   ========================================= */

.capacitacao-transicao-section {
    /* Gradiente radial combinando um azul-petróleo central esfumaçando para o escuro */
    background: radial-gradient(circle at center, #004b5a 0%, #001212 80%);
    padding: 100px 0;
    /* Padding vertical, o horizontal fica a cargo do .container */
    overflow: hidden;
    /* Garante que elementos maiores não quebrem o layout */
}

.capacitacao-transicao-layout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

/* --- Lado do Texto --- */
.capacitacao-texto {
    flex: 1;
    /* Ocupa metade do espaço */
    max-width: 500px;
}

.capacitacao-texto h2 {
    font-size: 2.4rem;
    font-weight: 400;
    /* Peso normal/fino para a primeira parte */
    line-height: 1.3;
    color: var(--white);
    margin-bottom: 25px;
    text-transform: uppercase;
}

.capacitacao-texto h2 strong {
    font-weight: 700;
    /* Negrito marcante para a parte final */
}

.capacitacao-texto p {
    font-size: 1.05rem;
    color: #e2e8f0;
    /* Um branco levemente acinzentado para leitura agradável */
    line-height: 1.6;
    font-weight: 400;
}

/* --- Lado da Imagem --- */
.capacitacao-imagem {
    flex: 1.2;
    /* Dá um pouco mais de área para a imagem respirar */
    display: flex;
    justify-content: flex-end;
    /* Empurra a imagem para a direita */
}

.capacitacao-imagem img {
    width: 100%;
    max-width: 650px;
    /* Limita o tamanho máximo do notebook */
    height: auto;
    object-fit: contain;
    /* Aplica uma sombra elegante no próprio mockup do notebook */
    filter: drop-shadow(0 25px 35px rgba(0, 0, 0, 0.6));
    transition: transform 0.4s ease;
}

.capacitacao-imagem img:hover {
    transform: scale(1.02);
    /* Leve efeito de zoom ao passar o mouse */
}

/* =========================================
   RESPONSIVIDADE (Tablets e Celulares)
   ========================================= */
@media (max-width: 992px) {
    .capacitacao-transicao-layout {
        flex-direction: column;
        /* Empilha texto e imagem */
        text-align: center;
        gap: 50px;
    }

    .capacitacao-texto {
        max-width: 100%;
        padding: 0 20px;
    }

    .capacitacao-texto h2 {
        font-size: 2rem;
    }

    .capacitacao-texto h2 br {
        display: none;
        /* Remove quebras de linha manuais no mobile */
    }

    .capacitacao-imagem {
        justify-content: center;
        /* Centraliza a imagem no celular */
        padding: 0 20px;
    }
}

/* =========================================
   SEÇÃO: CHAMADA COMUNIDADE DE ALUNOS
   ========================================= */

.chamada-comunidade-section {
    background-color: var(--white);
    /* Fundo branco limpo */
    padding: 100px 20px;
    /* Bastante respiro vertical para focar na mensagem */
    text-align: center;
}

.chamada-comunidade-content {
    max-width: 750px;
    margin: 0 auto;
    /* Centraliza o bloco na tela */
}

.chamada-comunidade-content h2 {
    font-size: 2.2rem;
    color: #001212;
    /* Tom bem escuro e marcante do seu design system */
    font-weight: 700;
    margin-bottom: 12px;
    letter-spacing: -0.5px;
    /* Deixa as letras sutilmente mais juntas (moderno) */
}

.chamada-comunidade-content p {
    font-size: 1.15rem;
    color: #5b6f74;
    /* Cinza esverdeado/azulado que você já usa no layout */
    line-height: 1.6;
    font-weight: 400;
}

/* =========================================
   RESPONSIVIDADE (Tablets e Celulares)
   ========================================= */
@media (max-width: 768px) {
    .chamada-comunidade-section {
        padding: 70px 20px;
    }

    .chamada-comunidade-content h2 {
        font-size: 1.8rem;
    }

    .chamada-comunidade-content p {
        font-size: 1.05rem;
    }
}

/* =========================================
   SEÇÃO: CONHECIMENTO E ESTRATÉGIA
   ========================================= */

.conhecimento-estrategia-section {
    /* Gradiente radial combinando um azul-petróleo central esfumaçando para o escuro */
    background: radial-gradient(circle at center, #004b5a 0%, #001212 80%);
    padding: 100px 0;
    color: var(--white);
    overflow: hidden;
}

.conhecimento-estrategia-layout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

/* --- Lado Esquerdo (Texto e Lista) --- */
.conhecimento-texto {
    flex: 1;
    max-width: 550px;
}

.conhecimento-texto h2 {
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 20px;
    color: var(--white);
}

.conhecimento-texto p {
    font-size: 1.05rem;
    color: #e2e8f0;
    margin-bottom: 30px;
    line-height: 1.6;
}

/* Customização da Lista */
.conhecimento-lista {
    list-style: none;
    /* Remove as bolinhas padrão */
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
    /* Espaço generoso entre os itens */
}

.conhecimento-lista li {
    display: flex;
    align-items: center;
    gap: 15px;
    /* Espaço entre o ícone e o texto */
    font-size: 1.05rem;
    color: #e2e8f0;
    font-weight: 500;
}

/* Box do Ícone de Check */
.icone-check {
    width: 26px;
    height: 26px;
    background-color: #004b5a;
    /* Tom de petróleo da identidade Greener */
    border-radius: 6px;
    /* Quadrado com cantos arredondados */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    /* Impede o ícone de amassar em telas menores */
    color: var(--white);
    /* Pinta o traço do SVG de branco */
    border: 1px solid rgba(255, 255, 255, 0.1);
    /* Um detalhe sutil na borda do ícone */
}

/* --- Lado Direito (Imagem) --- */
.conhecimento-imagem {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.conhecimento-imagem img {
    width: 100%;
    max-width: 600px;
    height: auto;
    object-fit: contain;
    /* Adiciona uma sombra projetada para destacar a imagem PNG do fundo */
    filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.5));
    transition: transform 0.4s ease;
}

.conhecimento-imagem img:hover {
    transform: scale(1.02);
    /* Efeito de elevação sutil ao passar o mouse */
}

/* =========================================
   RESPONSIVIDADE (Tablets e Celulares)
   ========================================= */
@media (max-width: 992px) {
    .conhecimento-estrategia-layout {
        flex-direction: column;
        /* Empilha o texto em cima e a imagem embaixo */
        gap: 50px;
    }

    .conhecimento-texto {
        max-width: 100%;
        padding: 0 20px;
    }

    .conhecimento-texto h2 br {
        display: none;
        /* Deixa o texto fluir naturalmente no celular */
    }

    .conhecimento-imagem {
        justify-content: center;
        /* Centraliza a imagem no celular */
        padding: 0 20px;
    }
}

/* =========================================
   SEÇÃO: MASTERCLASS CTA (BANNER) - COM CARD FLUTUANTE
   ========================================= */

.container-masterclass {
    max-width: 1200px;
    margin: 1.5rem 20%;
    padding: 0 20px;
}

.masterclass-cta-section {
    position: relative;
    /* FUNDAMENTAL para ancorar o card e a seta */
    /* Substitua a URL abaixo pelo caminho real da sua imagem de fundo */
    background: linear-gradient(rgba(10, 25, 25, 0.7), rgba(10, 25, 25, 0.7)), url('/img/educacao/MASTERCLASS_STORAGE.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 120px 0;
    overflow: visible;
    /* Mudamos para VISIBLE para que o card possa "escapar" sutilmente, se necessário */
    display: flex;
    align-items: center;
}

/* --- NOVO: Imagem do Card Flutuante (Quina Inferior Direita) --- */
.card-flutuante-quina {
    position: absolute;
    bottom: -30%;
    /* Joga um pouco para baixo da borda da seção para dar profundidade */
    right: 0;
    /* Afasta um pouco da borda lateral */
    width: 280px;
    /* Largura fixa para manter o aspecto de card */
    height: auto;
    z-index: 5;
    /* Fica à frente de TUDO na seção */
    filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.6));
    /* Sombra realista no formato da imagem */
    transition: transform 0.3s ease-in-out;
}

.masterclass-cta-content h2 {
    font-size: 2.2rem;
    color: var(--white);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 15px;
    letter-spacing: 0.5px;
}

.masterclass-cta-content h2 span {
    color: var(--primary-color);
    /* A cor verde-limão do seu sistema */
    font-size: 1.8rem;
    /* A segunda linha é um pouco maior */
}

/* --- Conteúdo Principal (Texto e Botão) --- */
.masterclass-cta-content {
    position: relative;
    z-index: 2;
    /* Garante que o texto fique acima do fundo e da seta, mas atrás do card flutuante se houver overlap */
    max-width: 650px;
}

.masterclass-cta-content p {
    font-size: 1.05rem;
    color: #e2e8f0;
    margin-bottom: 35px;
}

.btn-masterclass {
    display: inline-block;
    background-color: var(--primary-color-2);
    color: #001212;
    /* Texto escuro para dar contraste no botão */
    padding: 14px 32px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    transition: transform 0.2s ease, background-color 0.3s ease;
}

.btn-masterclass:hover {
    transform: translateY(-3px);
    background-color: #b8c633;
    /* Tom levemente mais escuro para o hover */
}

/* =========================================
   RESPONSIVIDADE (Tablets e Celulares)
   ========================================= */
@media (max-width: 992px) {

    /* No tablet, o card pode atrapalhar o conteúdo principal */
    .card-flutuante-quina {
        width: 200px;
        /* Reduz o tamanho */
        right: 15px;
        bottom: 10px;
        /* Ajusta a posição */
    }
}

@media (max-width: 768px) {
    .masterclass-cta-section {
        padding: 80px 20px 120px 20px;
        /* Aumenta o padding inferior para dar espaço para o card flutuante não sobrepor o botão */
        justify-content: center;
        text-align: center;
    }

    .masterclass-cta-content {
        margin: 0 auto;
    }

    /* No celular, o card flutuante pode ser um problema se muito grande */
    .card-flutuante-quina {
        position: relative;
        /* Muda para RELATIVE para que ele entre no fluxo do conteúdo */
        width: 100%;
        max-width: 300px;
        margin: 40px auto 0 auto;
        /* Centraliza embaixo do conteúdo principal */
        bottom: 0;
        right: 0;
        display: block;
    }
}


/* =========================================
   REFINAMENTO: SEÇÃO ACESSAR
   ========================================= */

.container-acessar {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 20px;
}

.o-que-acessar-section {
    padding: 80px 0;
    background-color: #ffffff;
    /* Utiliza sua variável de fonte Inter */
}

.acessar-header {
    text-align: center;
    max-width: 1000px;
    margin: 0 auto 50px;
}

.acessar-header h2 {
    font-size: 2.25rem;
    font-weight: 700;
    color: #001212;
    margin-bottom: 25px;
}

.acessar-header p {
    font-size: 1rem;
    color: #4b5563;
    line-height: 1.5;
    padding: 0 15px;
}

/* Grid com 3 colunas perfeitamente alinhadas */
.acessar-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}

.acessar-card {
    background-color: #f0f9fb;
    /* Azul-gelo da imagem */
    border-radius: 12px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    border: 1px solid #e2f2f5;
}

.acessar-icon-wrapper {
    margin-bottom: 20px;
    color: #3182ce;
    /* Azul dos ícones */
}

.acessar-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #001212;
    margin-bottom: 12px;
    line-height: 1.3;
}

.acessar-card p {
    font-size: 0.9rem;
    color: #5b6f74;
    line-height: 1.6;
    margin: 0;
}

.acessar-footer {
    display: flex;
    justify-content: center;
}

/* Botão Verde Oliva customizado */
.btn-acessar-vaga {
    background-color: #a0b82d;
    /* Verde oliva da imagem */
    color: #001212;
    padding: 14px 45px;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.btn-acessar-vaga:hover {
    background-color: #8fa326;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(160, 184, 45, 0.3);
}

/* Responsividade Mobile */
@media (max-width: 992px) {
    .acessar-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

    .acessar-header h2 {
        font-size: 1.75rem;
    }

    .acessar-card {
        padding: 25px;
    }
}

/* =========================================
   SEÇÃO: BANNER CURSO TÉCNICO
   ========================================= */

.banner-curso-tecnico-section {
    /* Gradiente radial combinando com as seções anteriores */
    background: radial-gradient(circle at center, #002b33 0%, #001212 90%);
    padding: 80px 20px;
    text-align: center;
    color: var(--white);
}

.banner-curso-tecnico-content {
    max-width: 900px;
    margin: 0 auto;
}

.banner-curso-tecnico-content h2 {
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.banner-curso-tecnico-content h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 25px;
    color: var(--white);
}

.banner-curso-tecnico-content p {
    font-size: 1.05rem;
    color: #bde8f7;
    line-height: 1.5;
    margin-bottom: 40px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* Botão "Ver mais" - Verde Oliva */
.btn-ver-mais {
    display: inline-block;
    background-color: #a0b82d;
    /* Verde oliva da imagem anterior */
    color: #001212;
    padding: 12px 35px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-ver-mais:hover {
    background-color: #8fa326;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Responsividade */
@media (max-width: 768px) {
    .banner-curso-tecnico-content h2 {
        font-size: 1.4rem;
    }

    .banner-curso-tecnico-content h3 {
        font-size: 1.2rem;
    }
}

/* =========================================
   SECTION HERO GREENER
   ========================================= */

.hero-greener {
    position: relative;
    background-color: #051313;
    /* Fundo escuro profundo conforme sua paleta */
    background-image: url('../img/sobre-nos/HEADER.jpg');
    /* A imagem da biblioteca ao fundo */
    background-size: cover;
    background-position: center;
    min-height: 450px;
    padding: 100px 0;
    display: flex;
    align-items: center;
    overflow: hidden;
    /* Garante que o grafismo da direita não saia da section */
}

/* Overlay escuro para dar leitura ao texto */
.hero-greener::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(5, 19, 19, 0.95) 0%, rgba(5, 19, 19, 0.7) 100%);
    z-index: 1;
}

.hero-layout {
    position: relative;
    z-index: 3;
    /* Acima do overlay e do grafismo */
}

.hero-content {
    max-width: 700px;
}

.hero-logo-main img {
    height: 60px;
    margin-bottom: 30px;
}

.hero-greener h1 {
    font-size: 1.75rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--white);
    margin-bottom: 40px;
    text-align: left;
    /* Sobrescrevendo o text-align:center do seu .hero genérico */
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.btn-hero-journey {
    background-color: var(--primary-green);
    color: var(--dark-blue);
    padding: 12px 25px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    transition: transform 0.2s ease;
}

.btn-hero-journey:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
}

.hero-social {
    display: flex;
    gap: 10px;
}

.hero-social a {
    width: 35px;
    height: 35px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    text-decoration: none;
    transition: background 0.3s;
}

.hero-social a:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Grafismo da Direita (A imagem que deve estar contida) */
.hero-graphic-overlay {
    position: absolute;
    top: 0;
    right: 0;
    /* Levemente para fora para cortar como na imagem */
    width: 50%;
    height: 140%;
    background-image: url('../img/sobre-nos/DUNNO.png');
    /* O símbolo em marca d'água */
    background-repeat: no-repeat;
    background-position: center right;
    background-size: contain;
    opacity: 0.4;
    z-index: 2;
    pointer-events: none;
    /* Não interfere nos cliques */
}

/* Responsividade */
@media (max-width: 768px) {
    .hero-greener h1 {
        font-size: 1.4rem;
    }

    .hero-actions {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* =========================================
   SECTION NOSSAS CONQUISTAS
   ========================================= */

.conquistas-section {
    background-color: #011114;
    /* Tom muito escuro para contraste */
    padding: 80px 0;
    text-align: center;
}

.conquistas-title {
    color: var(--white);
    font-size: 1rem;
    letter-spacing: 2px;
    font-weight: 600;
    margin-bottom: 50px;
    text-transform: uppercase;
}

.conquistas-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.conquista-card {
    background-color: #051d22;
    /* Tom azul petróleo escuro para os cards */
    padding: 40px 25px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 150px;
    transition: transform 0.3s ease;
}

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

.conquista-number {
    color: var(--white);
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 15px;
    display: block;
    line-height: 1;
}

.conquista-desc {
    color: #79bfcc;
    /* Cinza azulado para leitura suave */
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
}

/* Responsividade */
@media (max-width: 1100px) {
    .conquistas-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

    .conquista-card {
        min-height: auto;
    }
}

/* =========================================
   SECTION NOSSA HISTÓRIA
   ========================================= */

.history-section {
    background-color: #f0f9fb;
    /* Fundo azul-gelo claro conforme a imagem */
    padding: 100px 0;
}

.history-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Duas colunas iguais */
    gap: 60px;
    align-items: center;
    /* Centraliza verticalmente o texto com a imagem */
}

.history-text h2 {
    font-size: 2.2rem;
    font-weight: 700;
    color: #001212;
    /* Tom escuro do seu design system */
    margin-bottom: 25px;
}

.history-text p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #00414c;
    /* Teal escuro que você usa em subtítulos */
    max-width: 100%;
}

.history-image img {
    width: 100%;
    height: auto;
    border-radius: 15px;
    /* Arredondamento conforme o print */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    /* Sombra sutil */
    display: block;
}

/* Responsividade */
@media (max-width: 992px) {
    .history-grid {
        grid-template-columns: 1fr;
        /* Empilha no mobile */
        text-align: center;
        gap: 40px;
    }

    .history-text p {
        margin: 0 auto;
    }
}

/* =========================================
   SECTION NOSSA TRAJETÓRIA (TIMELINE HISTÓRIA)
   ========================================= */

/* Container Principal */
.history-timeline-section {
    background-color: #eaf8fb;
    /* Fundo ciano claro das imagens */
    padding: 80px 0;
    overflow: hidden;
}

/* Título */
.history-timeline-section .timeline-main-title {
    text-align: center;
    color: #001212;
    font-size: 1.2rem;
    letter-spacing: 2px;
    font-weight: 700;
    margin-bottom: 20px;
    text-transform: uppercase;
}

/* Área com scroll horizontal */
.history-timeline-section .history-timeline-slider {
    position: relative;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    /* Padding enorme em cima e embaixo (180px) para caber os cards flutuantes sem cortar */
    padding: 180px 40px;
    scrollbar-width: thin;
}

/* Esconde scrollbar em navegadores Webkit (Chrome/Safari) */
.history-timeline-section .history-timeline-slider::-webkit-scrollbar {
    height: 6px;
}

.history-timeline-section .history-timeline-slider::-webkit-scrollbar-thumb {
    background-color: #2b5c61;
    border-radius: 10px;
}

/* A Linha escura central */
.history-timeline-section .timeline-line {
    position: absolute;
    top: 50%;
    left: 0;
    /* Largura gigante para garantir que a linha vá até o final do scroll horizontal */
    min-width: 3850px;
    height: 3px;
    background-color: #2b5c61;
    /* Cor da linha */
    transform: translateY(-50%);
    z-index: 1;
}

/* Container que segura os itens lado a lado */
.history-timeline-section .timeline-container {
    display: flex;
    align-items: center;
    /* Trava todos os círculos perfeitamente no meio */
    width: max-content;
    /* Cresce conforme a quantidade de itens */
    position: relative;
    z-index: 2;
}

/* O "Nó" individual que contém o Círculo e o Card */
.history-timeline-section .history-node {
    position: relative;
    width: 340px;
    /* Distância horizontal entre um ano e outro */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

/* Círculo do Ano */
.history-timeline-section .timeline-dot {
    width: 60px;
    height: 60px;
    background-color: #2b5c61;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.95rem;
    /* Borda grossa com a cor de fundo recria o efeito da linha cortada */
    border: 6px solid #eaf8fb;
    position: relative;
    z-index: 2;
}

/* Card de Conteúdo */
.history-timeline-section .history-card {
    /* Position absolute é o segredo para a altura do texto não quebrar o alinhamento da linha */
    position: absolute;
    width: 300px;
    background-color: #daf2f6;
    /* Fundo do card */
    padding: 25px;
    border-radius: 12px;
    z-index: 3;
    text-align: left;
}

.history-timeline-section .history-card h3 {
    font-size: 1.05rem;
    color: #133036;
    margin-top: 0;
    margin-bottom: 12px;
    font-weight: 700;
    line-height: 1.3;
}

.history-timeline-section .history-card p {
    font-size: 0.9rem;
    color: #446368;
    margin: 0;
    line-height: 1.5;
}

/* --- A Mágica da Alternância --- */

/* Posiciona os cards da classe UP para CIMA da linha */
.history-timeline-section .history-node.up .history-card {
    bottom: 90px;
    /* Distância a partir do centro (Círculo) */
}

/* Posiciona os cards da classe DOWN para BAIXO da linha */
.history-timeline-section .history-node.down .history-card {
    top: 60px;
    /* Distância a partir do centro (Círculo) */
}

/* =========================================
   SECTION MISSÃO E VISÃO
   ========================================= */

.missao-visao-section {
    display: flex;
    width: 100%;
    height: 500px;
}

/* Estrutura base para ambas as metades */
.mv-box {
    flex: 1;
    /* Faz com que cada caixa ocupe 50% da largura */
    padding: 120px 8%;
    /* Espaçamento generoso interno */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Container que limita a largura do texto para não esticar muito */
.mv-content {
    max-width: 480px;
    width: 100%;
}

.mv-content h3 {
    display: flex;
    align-items: center;
    gap: 15px;
    /* Espaço entre o ícone e o texto */
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 25px;
}

/* Configuração base dos ícones SVG */
.mv-content h3 svg {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mv-content p {
    font-size: 1.1rem;
    line-height: 1.6;
    margin: 0;
    font-weight: 400;
}

/* --- Lado Esquerdo (Missão) --- */
.missao-box {
    background-color: #071e24;
    /* Azul petróleo escuro */
}

.missao-box h3 {
    color: #ffffff;
}

.missao-box h3 svg {
    stroke: #ffffff;
    /* Pinta o ícone de branco */
}

.missao-box p {
    color: #84a9b4;
    /* Azul claro acinzentado */
}

/* --- Lado Direito (Visão) --- */
.visao-box {
    background-color: #1c2111;
    /* Verde oliva muito escuro */
}

.visao-box h3 {
    color: #eaf184;
    /* Amarelo/Verde claro para o título */
}

.visao-box h3 svg {
    stroke: #eaf184;
    /* Pinta o ícone da mesma cor do título */
}

.visao-box p {
    color: #c7d560;
    /* Verde oliva mais suave para o texto */
}

/* =========================================
   RESPONSIVIDADE (Tablets e Celulares)
   ========================================= */
@media (max-width: 900px) {
    .missao-visao-section {
        flex-direction: column;
        /* Empilha os blocos um sobre o outro */
    }

    .mv-box {
        padding: 80px 20px;
        /* Reduz o padding vertical no mobile */
    }
}

/* =========================================
   SECTION NOSSOS VALORES
   ========================================= */

.valores-section {
    background-color: #f2f9f9;
    /* Fundo ciano muito claro */
    padding: 100px 0;
}

.valores-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 50px auto;
}

.valores-header h2 {
    font-size: 2.2rem;
    font-weight: 700;
    color: #001212;
    margin-bottom: 15px;
}

.valores-header p {
    font-size: 1.05rem;
    color: #5b6f74;
    /* Cinza esverdeado da sua paleta */
    line-height: 1.5;
}

/* Container do Grid/Flex */
.valores-grid {
    display: flex;
    flex-wrap: wrap;
    /* Permite a quebra de linha */
    justify-content: center;
    /* Centraliza os itens na linha */
    gap: 20px;
    /* Espaço entre os cards */
    max-width: 1000px;
    margin: 0 auto;
}

/* O Card (Ilustração) */
.valor-card {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 35px 20px;
    /* Flex-basis garante que cabem exatos 4 na primeira linha (25% - espaço do gap) */
    flex: 0 1 calc(25% - 15px);
    min-width: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    /* Sombra bem suave */
    border: 1px solid rgba(0, 0, 0, 0.015);
}

/* O Círculo do Ícone */
.valor-icon {
    width: 65px;
    height: 65px;
    background-color: #bcecf2;
    /* Fundo ciano do ícone */
    color: #00414c;
    /* Cor da linha do SVG (Teal escuro) */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.valor-icon svg {
    width: 30px;
    height: 30px;
}

.valor-card h4 {
    font-size: 1.1rem;
    color: #001212;
    font-weight: 700;
    margin: 0;
}

/* Responsividade */
@media (max-width: 900px) {
    .valores-grid {
        /* No tablet, 3 ou 2 por linha */
        gap: 15px;
    }

    .valor-card {
        flex: 0 1 calc(33.333% - 15px);
    }
}

@media (max-width: 600px) {
    .valores-grid {
        /* No celular, 2 ou 1 por linha */
        gap: 15px;
    }

    .valor-card {
        flex: 0 1 calc(50% - 15px);
        padding: 30px 15px;
    }

    .valores-header h2 {
        font-size: 1.8rem;
    }
}

/* =========================================
   SECTION CONECTE-SE (FORMULÁRIO)
   ========================================= */

.conecte-se-section {
    /* Gradiente radial combinando com o fundo da imagem */
    background: radial-gradient(circle at center, #004b5a 0%, #001212 80%);
    padding: 100px 0;
    color: #ffffff;
}

.conecte-se-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    max-width: 1100px;
    margin: 0 auto;
}

/* --- Textos (Lado Esquerdo) --- */
.conecte-se-text {
    flex: 1;
    max-width: 500px;
}

.conecte-se-text h2 {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: #ffffff;
}

.conecte-se-text p {
    font-size: 1.05rem;
    line-height: 1.6;
    color: #d1d5db;
    /* Branco levemente acinzentado */
}

/* --- Formulário (Lado Direito) --- */
.conecte-se-form-wrapper {
    flex: 1;
    background-color: #040e0e;
    /* Fundo do card super escuro */
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    /* Sombra pesada para destacar do fundo */
    max-width: 480px;
    width: 100%;
}

.conecte-se-form .form-group {
    margin-bottom: 18px;
}

.conecte-se-form label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 8px;
}

.conecte-se-form input,
.conecte-se-form select {
    width: 100%;
    background-color: #020707;
    /* Fundo dos inputs ainda mais escuro */
    border: 1px solid #1f2937;
    color: #ffffff;
    padding: 12px 15px;
    border-radius: 6px;
    outline: none;
    font-size: 0.9rem;
    transition: border-color 0.3s ease;
}

/* Foco nos inputs (Borda verde limão) */
.conecte-se-form input:focus,
.conecte-se-form select:focus,
.telefone-input-group:focus-within {
    border-color: #cddc39;
    /* Verde limão (var(--primary-color)) */
}

/* Seta customizada para o Select */
.conecte-se-form select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 16px;
}

/* Grupo de Input de Telefone (com a bandeira) */
.telefone-input-group {
    display: flex;
    background-color: #020707;
    border: 1px solid #1f2937;
    border-radius: 6px;
    overflow: hidden;
    transition: border-color 0.3s ease;
}

.telefone-input-group .country-code {
    display: flex;
    align-items: center;
    padding: 0 12px;
    background-color: #040e0e;
    border-right: 1px solid #1f2937;
    font-size: 1rem;
}

.telefone-input-group input {
    border: none;
    /* Remove a borda padrão pois o container já tem borda */
    border-radius: 0;
}

/* Checkbox */
.form-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 25px 0;
}

.form-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #cddc39;
    /* Cor verde no checkbox marcado */
    margin-top: 2px;
    cursor: pointer;
}

.form-checkbox label {
    font-size: 0.85rem;
    color: #a0aec0;
    cursor: pointer;
    line-height: 1.4;
    font-weight: 400;
}

.form-checkbox label a {
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Botão Enviar */
.btn-submit-lead {
    width: 100%;
    background-color: #cddc39;
    /* Verde limão */
    color: #001212;
    padding: 14px;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-submit-lead:hover {
    background-color: #b8c633;
    transform: translateY(-2px);
}

.btn-submit-lead:disabled {
    background-color: #6a7518;
    cursor: not-allowed;
    transform: none;
}

/* --- Mensagem de Sucesso --- */
.mensagem-sucesso {
    text-align: center;
    padding: 40px 20px;
    animation: fadeIn 0.5s ease forwards;
}

.mensagem-sucesso .success-icon {
    width: 60px;
    height: 60px;
    background-color: rgba(205, 220, 57, 0.1);
    /* Fundo translúcido */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.mensagem-sucesso .success-icon svg {
    width: 30px;
    height: 30px;
    color: #cddc39;
}

.mensagem-sucesso h3 {
    color: #cddc39;
    font-size: 1.5rem;
    margin-bottom: 15px;
}

.mensagem-sucesso p {
    color: #a0aec0;
    margin-bottom: 30px;
    line-height: 1.5;
}

/* Botão para resetar formulário */
.btn-voltar-form {
    background: transparent;
    border: 1px solid #cddc39;
    color: #cddc39;
    padding: 10px 24px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-voltar-form:hover {
    background: #cddc39;
    color: #001212;
}

/* --- Responsividade --- */
@media (max-width: 900px) {
    .conecte-se-container {
        flex-direction: column;
        text-align: center;
    }

    .conecte-se-text {
        max-width: 100%;
        padding: 0 20px;
    }

    .conecte-se-form-wrapper {
        max-width: 100%;
        padding: 30px 20px;
    }

    .form-checkbox {
        text-align: left;
        /* Mantém o checkbox alinhado à esquerda no mobile */
    }
}

/* =========================================
   SEÇÃO: INTELIGÊNCIA GREENER (HERO COM GRÁFICO)
   ========================================= */

.hero-inteligencia {
    position: relative;
    /* Substitua a URL abaixo pela sua imagem de background escura.
       O linear-gradient aplica um escurecimento para dar contraste ao texto. */
    background: linear-gradient(rgba(5, 19, 19, 0.85), rgba(5, 19, 19, 0.90)),
        url('../img/inteligencia/HEADER.jpg') center/cover no-repeat;
    padding: 80px 0;
    min-height: 60vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    /* Evita que o gráfico da direita quebre a rolagem horizontal */
}

.hero-inteligencia-container {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

/* --- CONTEÚDO DE TEXTO --- */
.hero-inteligencia-content {
    max-width: 650px;
    position: relative;
    z-index: 3;
    /* Garante que o texto fique sempre acima do gráfico */
}

.hero-inteligencia-content .tagline {
    display: block;
    color: #79bfcc;
    /* Tom de azul claro inspirado na imagem */
    font-size: 1.1rem;
    font-weight: 400;
    margin-bottom: 20px;
}

.hero-inteligencia-content h1 {
    font-size: 2.1rem;
    color: var(--white);
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 25px;
}

.hero-inteligencia-content .description {
    font-size: 1.05rem;
    color: #e2e8f0;
    line-height: 1.6;
    margin-bottom: 40px;
    max-width: 580px;
}

/* --- BOTÕES --- */
.hero-inteligencia-actions {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
}

.btn-primary-custom {
    background-color: var(--primary-color-2);
    /* Puxa o seu verde limão #cddc39 */
    color: #001212;
    padding: 12px 28px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    transition: transform 0.2s ease, background-color 0.3s ease;
}

.btn-primary-custom:hover {
    transform: translateY(-2px);
    background-color: #b8c633;
}

.btn-secondary-custom {
    background-color: rgba(0, 0, 0, 0.4);
    color: var(--white);
    padding: 12px 30px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: all 0.3s ease;
}

.btn-secondary-custom:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

.hero-inteligencia-content .footer-note {
    font-size: 0.85rem;
    color: #79bfcc;
    margin-top: 15px;
}

/* --- IMAGEM DO GRÁFICO (FLUTUANTE À DIREITA) --- */
.hero-inteligencia-graphic {
    position: absolute;
    right: -19%;
    /* Joga um pouquinho pra fora da tela propositalmente */
    bottom: -60px;
    /* Gruda a imagem na parte de baixo da section */
    width: 60%;
    max-width: 800px;
    z-index: 1;
    pointer-events: none;
    /* Impede que a imagem roube cliques dos botões */
}

.hero-inteligencia-graphic img {
    width: 100%;
    height: auto;
    display: block;
}

/* =========================================
   RESPONSIVIDADE (Tablets e Celulares)
   ========================================= */
@media (max-width: 1100px) {
    .hero-inteligencia-content h1 {
        font-size: 2.2rem;
    }

    .hero-inteligencia-graphic {
        width: 70%;
        bottom: -40px;
        right: -10%;
        opacity: 0.4;
        /* Deixa o gráfico mais transparente para não brigar com o texto */
    }
}

@media (max-width: 768px) {
    .hero-inteligencia {
        padding: 80px 0;
    }

    .hero-inteligencia-content h1 {
        font-size: 1.8rem;
    }

    .hero-inteligencia-actions {
        flex-direction: column;
        gap: 15px;
    }

    .btn-primary-custom,
    .btn-secondary-custom {
        text-align: center;
        width: 100%;
    }

    .hero-inteligencia-graphic {
        /* No celular, o gráfico pode ser empurrado para o fundo com muita transparência,
           ou você pode escondê-lo usando display: none; */
        opacity: 0.2;
        right: -20%;
        bottom: 0;
    }
}

/* =========================================
   SEÇÃO: ESTUDOS ESTRATÉGICOS (LAYOUT COM 3 IMAGENS)
   ========================================= */

.estudos-estrategicos-section {
    background-color: #f2f9f9;
    /* Fundo ciano muito claro inspirado na sua paleta */
    padding: 100px 0;
}

.ee-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    max-width: 1300px;
}

/* --- CONTEÚDO (ESQUERDA) --- */
.ee-content {
    flex: 1;
    max-width: 600px;
}

.ee-content h2 {
    font-size: 2.2rem;
    font-weight: 600;
    color: #001212;
    margin-bottom: 5px;
    letter-spacing: -0.5px;
}

.ee-subtitle {
    font-size: 1.15rem;
    color: #00414c;
    /* Teal escuro */
    font-weight: 600;
    margin-bottom: 25px;
}

.ee-content p {
    font-size: 1.05rem;
    color: #4b6873;
    /* Cinza esverdeado/azulado para leitura */
    line-height: 1.6;
    margin-bottom: 35px;
}

/* Lista de Benefícios */
.ee-benefits-title {
    font-size: 1rem;
    font-weight: 700;
    color: #001212;
    margin-bottom: 20px;
}

.ee-benefits-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 40px;
}

.ee-benefits-list li {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 1rem;
    font-weight: 600;
    color: #00414c;
}

.ee-icon {
    width: 34px;
    height: 34px;
    background-color: #d1eff5;
    /* Azul claro do box do ícone */
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ee-icon svg {
    width: 18px;
    height: 18px;
    color: #00414c;
}

/* Botão */
.btn-ee {
    display: inline-block;
    background-color: var(--primary-color-2);
    /* Usa o #cddc39 do seu :root */
    color: #001212;
    padding: 14px 28px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    transition: transform 0.2s ease, background-color 0.3s ease;
}

.btn-ee:hover {
    transform: translateY(-2px);
    background-color: #b8c633;
}

/* --- IMAGENS (DIREITA) --- */
.ee-images-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    /* Espaço vertical entre as duas linhas de imagens */
    align-items: center;
}

.ee-row-top {
    display: flex;
    justify-content: center;
    gap: 20px;
    /* Espaço horizontal entre as duas imagens de cima */
    width: 100%;
}

.ee-row-bottom {
    display: flex;
    justify-content: center;
    width: 100%;
}

.ee-capa {
    width: 100%;
    max-width: 270px;
    /* Controla o tamanho dos cards */
    height: auto;
    object-fit: cover;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    /* Dá o aspecto de documento/card flutuando */
    border: 1px solid rgba(0, 0, 0, 0.03);
    border-radius: 4px;
    /* Leve arredondamento, ajuste conforme suas imagens */
    transition: transform 0.3s ease;
}

.ee-capa:hover {
    transform: translateY(-5px);
    /* Efeito de elevação sutil nas capas ao passar o mouse */
}

/* =========================================
   RESPONSIVIDADE (Tablets e Celulares)
   ========================================= */
@media (max-width: 1024px) {
    .ee-container {
        flex-direction: column;
        gap: 60px;
    }

    .ee-content {
        max-width: 100%;
        text-align: center;
    }

    .ee-benefits-list li {
        justify-content: center;
        /* Centraliza a lista no tablet/mobile */
    }

    .ee-images-wrapper {
        width: 100%;
    }
}

@media (max-width: 600px) {
    .ee-row-top {
        flex-direction: column;
        align-items: center;
    }

    .ee-capa {
        max-width: 300px;
        /* Deixa a imagem um pouco maior no mobile quando empilhada */
    }
}

/* =========================================
   SEÇÃO: GUIAS & BOLETINS (DARK THEME)
   ========================================= */

.guias-boletins-section {
    background-color: #041215;
    /* Tom escuro azul-petróleo (quase preto) */
    padding: 100px 0;
}

.gb-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    max-width: 1300px;
}

/* --- IMAGEM (ESQUERDA) --- */
.gb-image-wrapper {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.gb-mockup {
    width: 100%;
    max-width: 480px;
    /* Limita o tamanho do mockup da revista */
    height: auto;
    object-fit: contain;
    /* Adiciona uma sombra sutil caso a sua imagem PNG original não tenha */
    filter: drop-shadow(0 25px 35px rgba(0, 0, 0, 0.4));
    transition: transform 0.4s ease;
}

.gb-mockup:hover {
    transform: scale(1.02) translateY(-5px);
    /* Efeito flutuante ao passar o mouse */
}

/* --- CONTEÚDO (DIREITA) --- */
.gb-content {
    flex: 1;
    max-width: 600px;
}

.gb-content h2 {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 5px;
    letter-spacing: -0.5px;
}

.gb-subtitle {
    font-size: 1.15rem;
    color: #79bfcc;
    /* Azul claro / teal presente na imagem */
    font-weight: 600;
    margin-bottom: 25px;
}

.gb-content p {
    font-size: 1.05rem;
    color: #a0aec0;
    /* Cinza claro azulado para boa leitura no fundo escuro */
    line-height: 1.6;
    margin-bottom: 35px;
}

/* --- Lista de Benefícios --- */
.gb-benefits-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 20px;
}

.gb-benefits-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 40px;
}

.gb-benefits-list li {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 1rem;
    font-weight: 600;
    color: #79bfcc;
    /* Mesmo tom do subtítulo */
}

.gb-icon {
    width: 34px;
    height: 34px;
    background-color: #072a30;
    /* Fundo do ícone (teal escuro) */
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gb-icon svg {
    width: 18px;
    height: 18px;
    color: #79bfcc;
    /* Cor do traço do ícone */
}

/* --- Botão --- */
.btn-gb {
    display: inline-block;
    background-color: var(--primary-color-2);
    /* #cddc39 - o Verde Limão */
    color: #001212;
    padding: 14px 28px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    transition: transform 0.2s ease, background-color 0.3s ease;
}

.btn-gb:hover {
    transform: translateY(-2px);
    background-color: #b8c633;
    /* Fica levemente mais escuro no hover */
}

/* =========================================
   RESPONSIVIDADE (Tablets e Celulares)
   ========================================= */
@media (max-width: 992px) {
    .gb-container {
        flex-direction: column;
        /* Empilha: Imagem em cima, Texto embaixo */
        text-align: center;
        gap: 50px;
    }

    .gb-image-wrapper {
        order: -1;
        /* Força a imagem a ficar acima do texto no celular */
    }

    .gb-content {
        max-width: 100%;
    }

    .gb-benefits-list li {
        justify-content: center;
        /* Centraliza as linhas da lista no mobile */
    }
}

/* =========================================
   SEÇÃO: DASHBOARDS ESTRATÉGICOS (LIGHT THEME)
   ========================================= */

.dashboards-section {
    background-color: #f2f9f9;
    /* Fundo ciano muito claro */
    padding: 100px 0;
}

.dash-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    max-width: 1300px;
}

/* --- CONTEÚDO (ESQUERDA) --- */
.dash-content {
    flex: 1;
    max-width: 600px;
}

.dash-content h2 {
    font-size: 2.2rem;
    font-weight: 700;
    color: #001212;
    /* Tom bem escuro */
    margin-bottom: 5px;
    letter-spacing: -0.5px;
}

.dash-subtitle {
    font-size: 1.15rem;
    color: #00414c;
    /* Teal escuro */
    font-weight: 600;
    margin-bottom: 25px;
}

.dash-content p {
    font-size: 1.05rem;
    color: #4b6873;
    /* Cinza esverdeado para leitura */
    line-height: 1.6;
    margin-bottom: 35px;
}

/* Lista de Benefícios */
.dash-benefits-title {
    font-size: 1rem;
    font-weight: 700;
    color: #001212;
    margin-bottom: 20px;
}

.dash-benefits-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 40px;
}

.dash-benefits-list li {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 1rem;
    font-weight: 600;
    color: #00414c;
}

/* Quadrado do Ícone */
.dash-icon {
    width: 34px;
    height: 34px;
    background-color: #d1eff5;
    /* Azul claro de fundo do ícone */
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dash-icon svg {
    width: 18px;
    height: 18px;
    color: #00414c;
    /* Cor do traço do ícone */
}

/* Botão */
.btn-dash {
    display: inline-block;
    background-color: var(--primary-color-2);
    /* #cddc39 - Verde Limão */
    color: #001212;
    padding: 14px 28px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    transition: transform 0.2s ease, background-color 0.3s ease;
}

.btn-dash:hover {
    transform: translateY(-2px);
    background-color: #b8c633;
}

/* --- IMAGEM (DIREITA) --- */
.dash-image-wrapper {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dash-mockup {
    width: 100%;
    max-width: 550px;
    /* Limita o tamanho do mockup para não ficar gigante */
    height: auto;
    object-fit: contain;
    transition: transform 0.4s ease;
}

.dash-mockup:hover {
    transform: scale(1.02);
    /* Leve zoom ao passar o mouse */
}

/* =========================================
   RESPONSIVIDADE (Tablets e Celulares)
   ========================================= */
@media (max-width: 992px) {
    .dash-container {
        flex-direction: column;
        /* Empilha: Texto em cima, Imagem embaixo */
        text-align: center;
        gap: 50px;
    }

    .dash-content {
        max-width: 100%;
    }

    .dash-benefits-list li {
        justify-content: center;
        /* Centraliza a lista no mobile */
    }
}

/* =========================================
   SEÇÃO: SOLUÇÕES TECNOLÓGICAS (CENTRALIZADA / DARK)
   ========================================= */

.solucoes-tech-section {
    background-color: #041215;
    /* Mesmo tom escuro azul-petróleo */
    padding: 100px 0;
}

.st-container {
    display: flex;
    justify-content: center;
    /* Centraliza o conteúdo horizontalmente */
    text-align: center;
    /* Centraliza os textos */
}

/* --- CONTEÚDO --- */
.st-content {
    max-width: 850px;
    /* Um pouco mais largo por não ter imagem ao lado */
    width: 100%;
}

.st-content h2 {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 5px;
    letter-spacing: -0.5px;
}

.st-subtitle {
    font-size: 1.15rem;
    color: #79bfcc;
    /* Teal claro */
    font-weight: 600;
    margin-bottom: 25px;
}

.st-content p {
    font-size: 1.05rem;
    color: #a0aec0;
    /* Cinza claro azulado */
    line-height: 1.6;
    margin-bottom: 40px;
}

/* --- Lista de Benefícios --- */
.st-benefits-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 20px;
}

.st-benefits-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Centraliza o bloco da lista na tela */
    gap: 15px;
    margin-bottom: 45px;
}

.st-benefits-list li {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 1rem;
    font-weight: 600;
    color: #79bfcc;
    /* Teal claro */
    text-align: left;
    /* Mantém o texto alinhado à esquerda em relação ao ícone */
    width: 100%;
    max-width: 280px;
    /* Define uma largura para que os itens fiquem perfeitamente alinhados uns abaixo dos outros */
}

.st-icon {
    width: 34px;
    height: 34px;
    background-color: #072a30;
    /* Fundo do ícone (teal escuro) */
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.st-icon svg {
    width: 18px;
    height: 18px;
    color: #79bfcc;
}

/* --- Botão --- */
.btn-st {
    display: inline-block;
    background-color: var(--primary-color-2);
    /* #cddc39 */
    color: #001212;
    padding: 14px 32px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    transition: transform 0.2s ease, background-color 0.3s ease;
}

.btn-st:hover {
    transform: translateY(-2px);
    background-color: #b8c633;
}

/* =========================================
   RESPONSIVIDADE (Tablets e Celulares)
   ========================================= */
@media (max-width: 768px) {
    .solucoes-tech-section {
        padding: 80px 20px;
    }

    .st-content h2 {
        font-size: 1.8rem;
    }

    .st-benefits-list li {
        max-width: 100%;
        justify-content: center;
        /* Centraliza totalmente no celular */
        text-align: center;
    }
}

/* =========================================
   SEÇÃO: CONTATO / ACELERAR CRESCIMENTO
   ========================================= */

.contato-crescimento-section {
    background-color: #f2f9f9;
    /* Fundo ciano super claro inspirado na imagem */
    padding: 100px 0;
}

.cc-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 80px;
    max-width: 1200px;
    margin: 0 auto;
}

/* --- LADO ESQUERDO (TEXTO) --- */
.cc-text {
    flex: 1;
    text-align: center;
    /* O texto na sua imagem está centralizado em relação ao próprio bloco */
    padding: 0 20px;
}

.cc-text h2 {
    font-size: 2.2rem;
    font-weight: 600;
    color: #001212;
    /* Tom bem escuro quase preto */
    margin-bottom: 20px;
    line-height: 1.3;
    letter-spacing: -0.5px;
}

.cc-text p {
    font-size: 1.1rem;
    color: #00414c;
    /* Teal escuro usado na paleta Greener */
    line-height: 1.6;
    max-width: 480px;
    margin: 0 auto;
    /* Mantém o parágrafo centralizado no bloco */
}

/* --- LADO DIREITO (CARD DO FORMULÁRIO) --- */
.cc-form-wrapper {
    flex: 1;
    background-color: #ffffff;
    border-radius: 12px;
    /* Bordas arredondadas do card */
    padding: 40px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06);
    /* Sombra suave para o efeito flutuante */
    max-width: 500px;
    width: 100%;
}

.cc-form-group {
    margin-bottom: 20px;
}

.cc-form-group label {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    color: #001212;
    margin-bottom: 8px;
}

/* Estilo dos campos (Inputs e Textarea) */
.cc-form-group input,
.cc-form-group textarea {
    width: 100%;
    background-color: #ffffff;
    border: 1px solid #a9d3d9;
    /* Cor azul/ciano clara da borda */
    border-radius: 6px;
    padding: 12px 15px;
    font-size: 0.95rem;
    color: #333;
    outline: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.cc-form-group input::placeholder,
.cc-form-group textarea::placeholder {
    color: #a0aec0;
    /* Cinza claro para o placeholder */
}

/* Efeito de Focus (Ao clicar no campo) */
.cc-form-group input:focus,
.cc-form-group textarea:focus {
    border-color: #0e7685;
    /* Teal escuro no foco */
    box-shadow: 0 0 0 3px rgba(14, 118, 133, 0.1);
    /* Brilho suave por fora */
}

.cc-form-group textarea {
    resize: vertical;
    /* Permite redimensionar só para baixo */
}

/* --- BOTÃO ENVIAR --- */
.btn-enviar-cc {
    width: 100%;
    background-color: #0e7685;
    /* Azul petróleo / Teal escuro da imagem */
    color: #ffffff;
    padding: 14px;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    margin-top: 10px;
}

.btn-enviar-cc:hover {
    background-color: #0b5e6a;
    /* Tom mais escuro no hover */
    transform: translateY(-2px);
}

/* =========================================
   RESPONSIVIDADE (Tablets e Celulares)
   ========================================= */
@media (max-width: 900px) {
    .cc-container {
        flex-direction: column;
        /* Empilha texto em cima e form embaixo */
        gap: 50px;
    }

    .cc-text {
        max-width: 100%;
    }

    .cc-form-wrapper {
        padding: 30px;
    }
}

/* --- BANNERS DE COOKIES --- */

.cookie-banner {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: #041519;
    color: white;
    padding: 20px;
    border-radius: 12px;
    z-index: 9999;
    width: 90%;
    max-width: 600px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.btn-cookie-accept {
    background: #74CFE2;
    color: #041519;
    border: none;
    padding: 10px 25px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
}

/* ============================
========= Estudos =============
============================ */

.estudos-bg {
    background-color: white;
}

.container-estudos {
    max-width: 1400px;
    margin: 0 auto;
    padding-top: 100px;
    padding-left: 20px;
    /* ADICIONADO: Respiro esquerdo */
    padding-right: 20px;
    /* ADICIONADO: Respiro direito */
}

/* Section Filtros */
.filters-section {
    background: linear-gradient(rgba(5, 19, 19, 0.85), rgba(5, 19, 19, 0.90)), url('../img/biblioteca/HEADER.png') center/cover no-repeat;
    color: white;
    padding: 20px 0;
}

.filter-bar {
    display: flex;
    gap: 20px;
    margin-top: 30px;
    flex-wrap: wrap;
}

.filter-group {
    display: flex;
    flex-direction: column;
    /* flex: 1; */
    min-width: 200px;
}

.filter-group select {
    padding: 12px;
    border-radius: 8px;
    border: none;
    margin-top: 8px;
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.width-1 {
    width: 50% !important;
}

.width-2 {
    width: 20% !important;
}

.width-3 {
    width: 20% !important;
}

.filter-group input {
    padding: 12px;
    border-radius: 8px;
    border: none;
    margin-top: 8px;
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

/* Cards Grid */
.cards-grid {
    display: grid;
    /* ALTERADO: De 400px para 280px para não estourar a tela do celular */
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 40px;
    padding-bottom: 100px;
}

.card-estudos {
    text-decoration: none;
    color: inherit;
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s;
    display: flex;
    flex-direction: column;
    /* height: 100%; */
}

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

.card-estudos img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 0 0 12px 12px;
}

.card-estudos-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.main-tag {
    background: var(--accent);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
}

.card-estudos-title {
    margin: 15px 0 10px;
    font-size: 1.1rem;
}

.card-estudos-text {
    font-size: 0.9rem;
    color: #666;
    height: 50px;
    overflow: hidden;
}

.card-footer {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.badge-estudos {
    background: #f0f7f9;
    color: #111;
    font-size: 0.75rem;
    padding: 5px 10px;
    border-radius: 20px;
    font-weight: 500;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s ease;
    user-select: none;
}

.featured-grid {
    margin-bottom: 60px;
}

.section-label {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 25px;
    color: var(--dark-blue);
}

.featured-layout {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    /* Esquerda maior */
    gap: 30px;
}

/* Card Grande (Esquerda) */
.card-featured-big {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}

.card-featured-big img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    border-radius: 12px;
}

/* Coluna da Direita (2 menores) */
.featured-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.card-featured-small {
    display: flex;
    gap: 20px;
    text-decoration: none;
    color: inherit;
    align-items: flex-start;
}

.card-featured-small img {
    width: 220px;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}

.featured-info h3 {
    font-size: 1.2rem;
    color: var(--dark-blue);
    margin: 8px 0;
}

.featured-info p {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

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

    .card-featured-small {
        flex-direction: column;
    }

    .card-featured-small img {
        width: 100%;
        height: auto;
        /* Evita distorção da imagem */
        aspect-ratio: 16 / 9;
        /* Mantém a proporção horizontal */
    }
}

/* ==========================================
   CUSTOM DROPDOWN (Estilo idêntico ao Print)
   ========================================= */

/* Esconde o select original, mas o mantém na página para o filtro funcionar */
.select-hidden {
    display: none !important;
}

/* O container geral do novo select */
.custom-select-wrapper {
    position: relative;
    user-select: none;
    width: 100%;
    /* margin-top: 8px; */
}

/* A "Caixa" que fica visível (o botão) */
.custom-select-trigger {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 12px 15px;
    color: white;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

/* A setinha para baixo do botão */
.custom-select-trigger::after {
    content: '';
    width: 10px;
    height: 6px;
    background-color: white;
    clip-path: polygon(100% 0%, 0 0%, 50% 100%);
    /* Cria um triângulo */
    transition: transform 0.3s ease;
}

/* Quando o menu está aberto, vira a setinha */
.custom-select-wrapper.open .custom-select-trigger::after {
    transform: rotate(180deg);
}

/* O Menu suspenso (A lista flutuante escurecida) */
.custom-select-options {
    position: absolute;
    top: 110%;
    /* Fica um pouquinho abaixo do botão */
    left: 0;
    right: 0;
    background-color: #050a0a;
    /* Fundo super escuro igual ao seu print */
    border-radius: 12px;
    /* Arredondamento do painel */
    padding: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
}

/* Mostra o menu */
.custom-select-wrapper.open .custom-select-options {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Cada item da lista */
.custom-option {
    padding: 12px 15px;
    color: white;
    cursor: pointer;
    border-radius: 8px;
    font-size: 0.95rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.2s;
}

/* Efeito Hover nos itens */
.custom-option:hover {
    background-color: #1a2223;
    /* Cinza escuro ao passar o mouse */
}

/* Estilo do item selecionado (Fundo mais cinza e ícone de check) */
.custom-option.selected {
    background-color: #2a3132;
    /* Fundo selecionado do seu print */
}

/* Ícone de Checkmark (SVG embutido) apenas no item selecionado */
.custom-option.selected::after {
    content: url('data:image/svg+xml;utf8,<svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 5L5 9L13 1" stroke="%23a0aec0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    display: inline-block;
    margin-left: 10px;
}

/* Container de paginação - Centraliza e dá espaço do grid */
.ma-pagination {
    margin-top: 50px;
    display: flex;
    justify-content: center;
    width: 100%;
}

.ma-pagination-nav {
    display: flex;
    gap: 30px;
    /* Espaçamento entre os números idêntico à imagem */
    align-items: center;
}

/* Estilo limpo dos números (sem fundo ou borda) */
.ma-page-btn {
    background: transparent;
    border: none;
    color: #00414c;
    /* Azul/Teal escuro */
    font-size: 1.1rem;
    font-weight: 500;
    cursor: pointer;
    padding: 5px;
    transition: color 0.2s ease;
    font-family: inherit;
}

.ma-page-btn:hover {
    color: #001212;
    /* Fica um pouco mais escuro no hover */
}

/* O Segredo: Estilo da página ativa com sublinhado */
.ma-page-btn.active {
    color: #00414c;
    text-decoration: underline;
    text-underline-offset: 6px;
    /* Afasta a linha do número */
    text-decoration-thickness: 2px;
    /* Deixa a linha com uma espessura legal */
    font-weight: 600;
}

/* ==========================================================================
   PÁGINA: ESTUDO ESTRATÉGICO SED 
   ========================================================================== */

.sed-page-wrapper {
    font-family: var(--inter, sans-serif);
    background-color: var(--white, #fff);
    color: var(--text-color, #333);
}

/* --- HERO SECTION --- */
.sed-hero-section {
    /* Substitua a URL pela imagem real do painel solar */
    background: linear-gradient(to right, rgba(11, 25, 36, 0.95) 0%, rgba(11, 25, 36, 0.7) 100%), url('https://images.unsplash.com/photo-1509391366360-2e959784a276?auto=format&fit=crop&q=80&w=2000') center/cover no-repeat;
    padding: 120px 0;
    color: #ffffff;
}

.sed-breadcrumb {
    font-size: 0.85rem;
    color: #9ca3af;
    margin-bottom: 40px;
}

.sed-hero-layout {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
}

.sed-hero-content {
    flex: 1;
    display: flex;
    gap: 35px;
}

.sed-hero-cover {
    width: 220px;
    border-radius: 6px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    object-fit: cover;
}

.sed-label {
    display: block;
    font-size: 1rem;
    color: #e2e8f0;
    margin-bottom: 8px;
}

.sed-hero-text h1 {
    font-size: 2.2rem;
    line-height: 1.2;
    color: #ffffff;
    font-weight: 700;
    margin-bottom: 20px;
}

.sed-hero-text p {
    font-size: 1rem;
    color: #cbd5e1;
    line-height: 1.6;
    max-width: 650px;
}

/* Card de Download Escuro */
.sed-download-card {
    background-color: #071215;
    /* Tom escuro baseado na imagem */
    padding: 30px;
    border-radius: 12px;
    width: 340px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
}

.sed-btn-light {
    display: block;
    background-color: #e2f5ec;
    color: #115e3b;
    text-align: center;
    padding: 12px;
    border-radius: 30px;
    font-weight: 600;
    margin-bottom: 15px;
    text-decoration: none;
    font-size: 0.95rem;
}

.sed-btn-download {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: var(--primary-green, #B2D235);
    /* Usando sua variável nativa! */
    color: #001212;
    padding: 12px;
    border-radius: 30px;
    font-weight: 700;
    /* margin-bottom: 20px; */
    text-decoration: none;
    transition: transform 0.2s;
    font-size: 0.95rem;
}

.sed-btn-download:hover {
    transform: translateY(-2px);
}

.sed-card-actions {
    display: flex;
    gap: 15px;
}

.sed-action-btn {
    flex: 1;
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: white;
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background 0.3s;
}

.sed-action-btn:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/* --- MAIN CONTENT SECTION --- */
.sed-main-section {
    padding: 80px 0;
}

.sed-main-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 60px;
}

.sed-content-left h2 {
    font-size: 1.8rem;
    color: #001212;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.3;
}

.sed-content-left p {
    color: #4b5563;
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 20px;
}

.sed-mt-50 {
    margin-top: 50px;
}

/* Banner Preto */
.sed-record-banner {
    background-color: #051313;
    color: white;
    border-radius: 12px;
    padding: 15px 25px;
    display: flex;
    align-items: center;
    margin: 35px 0;
}

.sed-record-badge {
    background-color: #c4f1f9;
    color: #004b5a;
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 700;
    margin-right: 25px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
}

.sed-record-text {
    font-size: 1.1rem;
    color: #cbd5e1;
}

.sed-record-text strong {
    font-size: 1.5rem;
    color: #ffffff;
}

/* Grid de Estatísticas */
.sed-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.sed-stat-card {
    background-color: #e0f2fe;
    /* Azul claro do print */
    padding: 30px;
    border-radius: 12px;
}

.sed-bg-gray {
    background-color: #f1f5f9;
}

.sed-stat-card h3 {
    font-size: 2.2rem;
    color: #001212;
    margin-bottom: 8px;
    line-height: 1;
    font-weight: 700;
}

.sed-stat-card p {
    margin-bottom: 0;
    font-size: 0.95rem;
    color: #334155;
    line-height: 1.5;
}

/* --- SIDEBAR --- */
.sed-sidebar-widget {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 30px;
    margin-bottom: 30px;
    background-color: var(--white);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
}

.sed-sidebar-widget h3 {
    font-size: 1.1rem;
    color: #001212;
    margin-bottom: 20px;
    font-weight: 700;
}

.sed-tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.sed-tag {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    color: #475569;
    font-weight: 500;
}

.sed-related-item {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
    align-items: flex-start;
    text-decoration: none;
    transition: transform 0.2s;
}

.sed-related-item:hover {
    transform: translateX(5px);
}

.sed-related-item:last-child {
    margin-bottom: 0;
}

.sed-related-img {
    width: 90px;
    height: 95px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}

.sed-tag-small {
    display: inline-block;
    background-color: #f1f5f9;
    color: #475569;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.sed-related-info h4 {
    font-size: 0.9rem;
    line-height: 1.4;
    color: #0f172a;
    font-weight: 600;
    margin: 0;
}

/* --- RESPONSIVIDADE --- */
@media (max-width: 1024px) {

    .sed-hero-layout,
    .sed-main-grid {
        flex-direction: column;
        grid-template-columns: 1fr;
    }

    .sed-hero-content {
        flex-direction: column;
    }

    .sed-download-card {
        width: 100%;
        margin-top: 30px;
    }

    .sed-record-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
}

@media (max-width: 600px) {
    .sed-stats-grid {
        grid-template-columns: 1fr;
    }

    .sed-hero-text h1 {
        font-size: 1.8rem;
    }
}

.sed-ranking-section {
    padding: 60px 0 100px 0;
    background-color: #ffffff;
}

.sed-ranking-header {
    max-width: 800px;
    margin-bottom: 50px;
}

.sed-ranking-header h2 {
    font-size: 1.8rem;
    color: #1e293b;
    font-weight: 400;
    margin-bottom: 15px;
}

.sed-ranking-header h2 strong {
    font-weight: 700;
    color: #0f172a;
}

.sed-ranking-header p {
    font-size: 0.95rem;
    color: #475569;
    line-height: 1.6;
}

/* --- CARD TOP 20 --- */
.sed-top20-container img {
    max-width: 480px;
    margin-bottom: 40px;
}

.sed-top20-badge {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #e0f8fb;
    /* Ciano claro */
    color: #004b5a;
    font-weight: 800;
    font-size: 1.1rem;
    padding: 10px 40px;
    border-radius: 30px;
    z-index: 10;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.sed-top20-card {
    border: 1px solid #cffafe;
    /* Borda ciano clara */
    border-radius: 12px;
    padding: 50px 30px 30px 30px;
    background-color: #f8fafc;
    position: relative;
    overflow: hidden;
}

.sed-top20-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px 30px;
}

.sed-top20-list li {
    font-size: 0.95rem;
    font-weight: 600;
    color: #0f172a;
    position: relative;
    z-index: 2;
}

/* O Segredo do efeito de "Papel embaçado recortado" */
.sed-blur-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Recorta no formato de um L invertido para revelar o canto inferior direito */
    clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 70%, 50% 100%, 0 100%);
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 5;
    /* Adiciona a sombra suave da borda do recorte */
    box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.1);
}

/* Embaça de verdade o texto que fica por baixo da máscara */
.sed-blurred-item {
    filter: blur(3px);
    opacity: 0.4;
    user-select: none;
}

/* --- BOTÕES DE AÇÃO --- */
.sed-ranking-actions {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 80px;
    flex-wrap: wrap;
}

/* Reaproveita o botão da primeira sessão, mas ajusta a largura */
.sed-btn-ranking {
    margin-bottom: 0;
    padding: 12px 30px;
    display: inline-flex;
}

.sed-btn-english {
    border: 1px dashed #cbd5e1;
    color: #64748b;
    padding: 10px 20px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    background: transparent;
}

/* --- PATROCINADORES --- */
.sed-sponsors-wrapper h3 {
    font-size: 1.2rem;
    color: #0f172a;
    margin-bottom: 30px;
    font-weight: 700;
}

.sed-sponsors-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    align-items: center;
    max-width: 900px;
}

.sed-sponsor-logo {
    display: flex;
    justify-content: flex-start;
}

.sed-sponsor-logo img {
    max-width: 160px;
    height: auto;
    max-height: 50px;
    object-fit: contain;
    /* Remove as cores das logos caso queira padronizar (opcional) */
    /* filter: grayscale(100%); */
    transition: transform 0.2s;
}

.sed-sponsor-logo img:hover {
    transform: scale(1.05);
}

/* --- RESPONSIVIDADE --- */
@media (max-width: 768px) {
    .sed-top20-container {
        width: 100%;
    }

    .sed-sponsors-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    .sed-ranking-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .sed-btn-ranking {
        justify-content: center;
    }

    .sed-btn-english {
        text-align: center;
    }
}

@media (max-width: 480px) {
    .sed-sponsors-grid {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .sed-sponsor-logo {
        justify-content: center;
    }
}

.sed-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 18, 18, 0.8);
    /* Fundo escuro levemente esverdeado */
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Classe que o JavaScript vai adicionar para abrir o modal */
.sed-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.sed-modal-content {
    background-color: #ffffff;
    padding: 40px 20px 20px 20px;
    /* Espaço extra no topo pro botão de fechar */
    border-radius: 12px;
    width: 90%;
    max-width: 450px;
    /* Largura ideal para formulários do RD */
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.sed-modal-overlay.active .sed-modal-content {
    transform: translateY(0);
}

.sed-modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    background: transparent;
    border: none;
    font-size: 2rem;
    line-height: 1;
    color: #4b5563;
    cursor: pointer;
    transition: color 0.2s;
}

.sed-modal-close:hover {
    color: #000000;
}

/* ==========================================================================
   PÁGINA: ESTUDO ESTRATÉGICO SED - GRÁFICOS E DADOS
   ========================================================================== */

.sed-data-section {
    padding: 60px 0;
    background-color: #ffffff;
}

/* ================= ELEMENTO 1: GRÁFICO DE BARRAS ================= */
.sed-chart-card {
    background-color: #050a0e;
    /* Fundo escuro */
    border-radius: 16px;
    padding: 40px 50px;
    margin-bottom: 60px;
    color: #ffffff;
    position: relative;
}

.sed-chart-title {
    font-size: 1.2rem;
    color: #74cfe2;
    /* Tom azul claro/ciano do título */
    font-weight: 400;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.sed-chart-subtitle {
    font-size: 1rem;
    color: #9ca3af;
    margin-bottom: 40px;
}

.sed-chart-container {
    position: relative;
    z-index: 1;
}

/* Gridlines verticais */
.sed-gridlines {
    position: absolute;
    top: 0;
    left: 100px;
    /* Compensa a largura da label */
    right: 50px;
    /* Compensa a largura do valor final */
    height: calc(100% - 30px);
    /* Tira o espaço do eixo X */
    display: flex;
    justify-content: space-between;
    z-index: -1;
    pointer-events: none;
}

.sed-line {
    width: 1px;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.05);
    /* Linhas bem sutis */
}

/* Linhas das Barras */
.sed-bar-row {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.sed-bar-label {
    width: 100px;
    text-align: right;
    padding-right: 20px;
    font-size: 0.85rem;
    color: #cbd5e1;
}

.sed-bar-track-area {
    flex: 1;
    position: relative;
}

.sed-bar-fill {
    height: 28px;
    border-radius: 6px;
    /* Transição suave caso seja animado depois */
    transition: width 1s ease-in-out;
}

.sed-bar-value {
    width: 50px;
    padding-left: 15px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #ffffff;
}

/* Eixo X (Números base) */
.sed-xaxis {
    display: flex;
    margin-top: 10px;
}

.sed-xaxis>span:first-child {
    width: 100px;
}

/* Spacer esquerdo */
.sed-xaxis>span:last-child {
    width: 50px;
}

/* Spacer direito */

.sed-xaxis-numbers {
    flex: 1;
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: #64748b;
    /* Ajuste fino para os números alinharem com as linhas verticais */
    transform: translateX(-5px);
}

/* Gradiente de Cores das Barras (Branco descendo para Azul Petróleo) */
.sed-color-1 {
    background-color: #ffffff;
}

.sed-color-2 {
    background-color: #f0f9fb;
}

.sed-color-3 {
    background-color: #e2f4f7;
}

.sed-color-4 {
    background-color: #d1f1f7;
}

.sed-color-5 {
    background-color: #aae0eb;
}

.sed-color-6 {
    background-color: #8ed5e3;
}

.sed-color-7 {
    background-color: #74cade;
}

.sed-color-8 {
    background-color: #55b7cc;
}

.sed-color-9 {
    background-color: #3b9bb0;
}

.sed-color-10 {
    background-color: #246777;
}

/* Box Flutuante / Tooltip */
.sed-chart-tooltip {
    position: absolute;
    bottom: 25%;
    left: 20%;
    background: linear-gradient(135deg, rgba(30, 40, 20, 0.95), rgba(10, 15, 10, 0.95));
    border: 1px solid #cddc39;
    /* Verde limão */
    border-radius: 8px;
    padding: 15px 20px;
    color: #eaf184;
    /* Amarelado do texto */
    font-size: 0.9rem;
    line-height: 1.4;
    font-weight: 500;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    z-index: 10;
}


/* ================= ELEMENTO 2: SPLIT GRID ESTATÍSTICAS ================= */
.sed-split-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

/* Card Escuro (Ranking Inversores) */
.sed-dark-ranking-card {
    background-color: #050a0e;
    border-radius: 16px;
    padding: 40px;
}

.sed-dark-ranking-card h3 {
    font-size: 1.3rem;
    color: #e2e8f0;
    font-weight: 400;
    margin-bottom: 5px;
}

.sed-dark-ranking-card p {
    font-size: 0.9rem;
    color: #64748b;
    margin-bottom: 30px;
}

.sed-dark-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sed-rk-item {
    background-color: #013e4a;
    /* Teal escuro */
    border-radius: 8px;
    height: 45px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 500;
}

/* Efeito borrado para os itens superiores */
.sed-blur-heavy {
    filter: blur(5px);
    opacity: 0.4;
    /* Impede seleção de texto nos itens borrados */
    user-select: none;
}

/* Lado Direito: Cards Claros */
.sed-light-stats-col {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.sed-light-stat-card {
    background-color: #dcf6fa;
    /* Ciano claro (idêntico à imagem) */
    border-radius: 16px;
    padding: 40px;
    flex: 1;
    /* Faz os dois cards dividirem a altura por igual */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sed-light-stat-card h4 {
    font-size: 2.2rem;
    color: #001212;
    font-weight: 700;
    margin-bottom: 20px;
}

.sed-light-stat-card p {
    font-size: 1.05rem;
    color: #0f172a;
    line-height: 1.6;
    margin: 0;
}

/* ================= RESPONSIVIDADE ================= */
@media (max-width: 992px) {
    .sed-split-stats-grid {
        grid-template-columns: 1fr;
    }

    .sed-chart-tooltip {
        left: 30%;
        /* Ajusta o tooltip em telas médias */
    }
}

@media (max-width: 768px) {
    .sed-chart-card {
        padding: 30px 15px;
    }

    .sed-bar-label {
        width: 70px;
        padding-right: 10px;
        font-size: 0.75rem;
    }

    .sed-bar-value {
        width: 40px;
        padding-left: 10px;
        font-size: 0.8rem;
    }

    .sed-gridlines {
        left: 70px;
        right: 40px;
    }

    .sed-xaxis>span:first-child {
        width: 70px;
    }

    .sed-xaxis>span:last-child {
        width: 40px;
    }

    .sed-chart-tooltip {
        position: relative;
        /* Remove o absolute no celular para não quebrar o layout */
        bottom: 0;
        left: 0;
        margin-top: 30px;
        text-align: center;
    }

    .sed-light-stat-card h4 {
        font-size: 1.8rem;
    }
}

/* ==========================================================================
   PÁGINA: Guia Bess - DESTAQUES, GUIA E CONFIGURAÇÕES
   ========================================================================== */

.sed-guide-section {
    padding: 60px 0 100px 0;
    background-color: #ffffff;
}

.sed-section-main-title {
    font-size: 2.2rem;
    color: #0f172a;
    font-weight: 700;
    margin-bottom: 30px;
}

/* --- CARDS DE DESTAQUE --- */
.sed-highlights-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 40px;
}

.sed-highlight-box {
    border-radius: 12px;
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sed-bg-cyan-light {
    background-color: #d2f4f9;
}

/* Azul ciano vivo */
.sed-bg-cyan-muted {
    background-color: #e6f6f9;
}

/* Azul ciano mais apagado */

.sed-hl-number {
    font-size: 2.8rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.1;
    margin-bottom: 10px;
}

.sed-hl-text {
    font-size: 1.1rem;
    color: #0f172a;
}

/* --- TEXTOS --- */
.sed-guide-text {
    font-size: 1.1rem;
    color: #334155;
    line-height: 1.6;
    margin-bottom: 40px;
}

.sed-mb-60 {
    margin-bottom: 60px;
}

.sed-guide-intro {
    margin-bottom: 30px;
}

.sed-guide-intro h2 {
    font-size: 1.8rem;
    color: #0f172a;
    font-weight: 700;
    margin-bottom: 5px;
}

.sed-guide-intro p {
    font-size: 1.2rem;
    color: #0f172a;
}

/* --- TABELA ESCURA (ESPECIFICAÇÕES) --- */
.sed-spec-table {
    background-color: #050a0e;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 80px;
    overflow: hidden;
}

.sed-spec-row {
    display: grid;
    grid-template-columns: 280px 1fr;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

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

.sed-spec-col-title {
    padding: 25px 30px;
    color: #ffffff;
    font-weight: 700;
    font-size: 1.05rem;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.sed-spec-col-desc {
    padding: 25px 30px;
    color: #cbd5e1;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* --- SEÇÃO: CÉLULAS --- */
.sed-cells-header h2 {
    font-size: 2rem;
    color: #0f172a;
    font-weight: 400;
    margin-bottom: 5px;
}

.sed-cells-header p {
    font-size: 1.5rem;
    color: #0f172a;
    font-weight: 400;
    margin-bottom: 30px;
}

.sed-dark-feature-card {
    background-color: #051313;
    /* Fundo muito escuro do print */
    border-radius: 16px;
    padding: 40px;
    margin-bottom: 30px;
}

.sed-dfc-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
}

.sed-dfc-header svg {
    background-color: #ffffff;
    color: #051313;
    padding: 5px;
    border-radius: 6px;
    width: 35px;
    height: 35px;
}

.sed-dfc-header h3 {
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 0.5px;
}

.sed-dark-feature-card p {
    color: #e2e8f0;
    font-size: 1.05rem;
    line-height: 1.6;
}

/* --- CONFIGURAÇÕES: RESIDENCIAL (ACORDEÃO) --- */
.sed-config-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: flex-start;
    margin-bottom: 80px;
}

.sed-config-title h2 {
    font-size: 2rem;
    color: #0f172a;
    font-weight: 400;
    line-height: 1.2;
}

/* Lista Acordeão (HTML Details/Summary nativo) */
.sed-accordion-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.sed-accordion-item {
    background-color: #dcf5fa;
    /* Azul claro */
    border-radius: 6px;
    overflow: hidden;
}

/* Esconde a setinha padrão do navegador */
.sed-accordion-item summary::-webkit-details-marker {
    display: none;
}

.sed-accordion-item summary {
    list-style: none;
    /* Para Firefox */
    padding: 18px 25px;
    font-size: 1.05rem;
    font-weight: 700;
    color: #001212;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
    transition: background-color 0.2s;
}

.sed-accordion-item summary:hover {
    background-color: #c7ebf2;
}

.sed-accordion-item summary svg {
    transition: transform 0.3s ease;
}

/* Gira a setinha quando o acordeão abre */
.sed-accordion-item[open] summary svg {
    transform: rotate(180deg);
}

.sed-accordion-content {
    padding: 0 25px 20px 25px;
    color: #334155;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* --- CONFIGURAÇÕES: C&I E UTILITY (CARDS COM ABAS) --- */
.sed-config-header {
    margin-bottom: 40px;
}

.sed-config-header h2 {
    font-size: 2rem;
    color: #0f172a;
    font-weight: 400;
}

.sed-system-card {
    margin-bottom: 40px;
}

.sed-system-tab {
    display: inline-block;
    background-color: #dcf5fa;
    /* Azul claro (Aba) */
    color: #001212;
    font-weight: 800;
    font-size: 1.05rem;
    padding: 15px 30px;
    border-radius: 6px 6px 0 0;
    text-transform: uppercase;
}

.sed-system-body {
    background-color: #051313;
    /* Fundo escuro */
    color: #e2e8f0;
    padding: 35px 40px;
    font-size: 1.05rem;
    line-height: 1.6;
    border-radius: 0 8px 8px 8px;
    /* Arredonda tudo, menos o topo esquerdo */
}

/* --- BOTÕES FINAIS --- */
.sed-final-actions {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 60px;
    flex-wrap: wrap;
}

.sed-btn-buy {
    background-color: #b2d235;
    /* Verde oliva da imagem / --primary-green */
    color: #001212;
    padding: 14px 35px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1.05rem;
    text-decoration: none;
    transition: transform 0.2s ease, background-color 0.2s;
}

.sed-btn-buy:hover {
    transform: translateY(-2px);
    background-color: #a0c025;
}

/* O botão "English Version" já existe do código anterior, 
   mas caso queira alinhar com o design novo: */
.sed-btn-english {
    border: 1px dashed #9ca3af;
    color: #0f172a;
    padding: 14px 30px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    background-color: transparent;
    transition: background-color 0.2s;
}

.sed-btn-english:hover {
    background-color: #f8fafc;
}

/* ================= RESPONSIVIDADE ================= */
@media (max-width: 992px) {
    .sed-config-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

@media (max-width: 768px) {
    .sed-highlights-grid {
        grid-template-columns: 1fr;
    }

    .sed-spec-row {
        grid-template-columns: 1fr;
        /* Tabela vira 1 coluna */
    }

    .sed-spec-col-title {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        padding: 20px 20px 10px 20px;
    }

    .sed-spec-col-desc {
        padding: 10px 20px 20px 20px;
    }

    .sed-system-body {
        padding: 25px 20px;
    }

    .sed-final-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .sed-btn-buy,
    .sed-btn-english {
        text-align: center;
    }
}

/* ==========================================================================
   NOVO CARD DE PREÇO (PRICING CARD)
   ========================================================================== */

/* Centraliza os elementos dentro do card que já tínhamos */
.sed-pricing-card {
    text-align: center;
    padding: 35px 30px;
    background-color: #051315;
    /* Tom escuro levemente esverdeado da imagem */
    border: none;
    /* Remove a borda se houver para ficar idêntico ao print */
}

/* Preço antigo riscado */
.sed-price-old {
    font-size: 1.15rem;
    color: #64748b;
    /* Cinza claro */
    text-decoration: line-through;
    text-decoration-color: #475569;
    /* Cor do risco um pouco mais escura */
    margin-bottom: 5px;
}

/* Preço atual em destaque */
.sed-price-current {
    font-size: 3rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1;
    margin-bottom: 12px;
}

/* Badge de desconto (Pílula verde) */
.sed-price-discount {
    display: inline-block;
    background-color: rgba(101, 184, 73, 0.15);
    /* Fundo verde super escuro/transparente */
    color: #65b849;
    /* Verde texto */
    padding: 6px 20px;
    border-radius: 30px;
    font-size: 1.05rem;
    font-weight: 500;
    margin-bottom: 30px;
}

/* Novo botão de compra (Ocupa 100% da largura) */
.sed-btn-purchase {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    background-color: var(--primary-green, #cddc39);
    /* Usa sua variável global */
    color: #001212;
    padding: 14px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1.05rem;
    text-decoration: none;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.sed-btn-purchase:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
    /* Fica levemente mais claro no hover */
}

/* ==========================================================================
   CARDS VERTICAIS DE ESTATÍSTICAS (M&A / TRANSAÇÕES)
   ========================================================================== */

/* Container principal para empilhar os cards com espaçamento */
.sed-vertical-stats-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    /* Adicione um max-width aqui se quiser limitar a largura deles na página */
    /* max-width: 450px; */
}

/* Estrutura base de cada card */
.sed-v-stat-card {
    padding: 35px 30px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
    transition: transform 0.2s ease;
}

.sed-v-stat-card:hover {
    transform: translateY(-3px);
}

/* --- Cores de Fundo --- */
.sed-bg-light-blue {
    background-color: #dcf6fa;
    /* Ciano claro da imagem */
    color: #001212;
}

.sed-bg-light-gray {
    background-color: #f1f5f9;
    /* Cinza bem clarinho */
    color: #001212;
}

.sed-bg-dark {
    background-color: #050a0e;
    /* Escuro padrão do design system */
    color: #ffffff;
}

/* --- Textos e Tipografia --- */
.sed-v-stat-card h3 {
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1;
    margin: 0;
    color: inherit;
    /* Herda a cor definida no card (preto ou branco) */
}

.sed-v-stat-card p {
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 0;
    color: inherit;
    /* Reduz levemente a opacidade do texto em relação ao título para hierarquia */
    opacity: 0.9;
}

/* --- Ícones --- */
.sed-v-stat-icon {
    width: 45px;
    height: 45px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sed-icon-teal {
    background-color: #61b1c2;
    /* Fundo teal da balança */
    color: #ffffff;
}

.sed-icon-white {
    background-color: #f8fafc;
    /* Fundo claro do chip */
    color: #050a0e;
}

.sed-v-stat-icon svg {
    width: 22px;
    height: 22px;
}

/* =========================================
   SEÇÃO: MÓDULOS DO CURSO
   ========================================= */

.modulos-cursos {
    padding: 100px 20px;
    background-color: #ffffff;
    text-align: center;
}

.modulos-header h2 {
    font-size: 2rem;
    color: #001212;
    font-weight: 700;
    margin-bottom: 10px;
}

.modulos-header p {
    font-size: 1rem;
    color: var(--dark-blue);
    font-style: italic;
    margin-bottom: 60px;
}

/* Transformamos o grid em flex column para os cards empilharem em tela inteira */
.modulos-grid {
    display: flex;
    flex-direction: column;
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto;
}

/* Estrutura principal do Card Horizontal */
.modulo-card {
    /* Gradiente ajustado para ficar fiel ao mockup da imagem */
    background: linear-gradient(135deg, #112a2e 0%, #051313 100%);
    border-radius: 20px;
    padding: 40px;
    text-align: left;
    color: #ffffff;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    gap: 50px;
}

.modulo-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

/* O segredo para alternar sem sujar o HTML! Inverte a ordem nos cards 2 e 4 */
.modulo-card:nth-child(even) {
    flex-direction: row-reverse;
}

.modulo-card-visual {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.modulo-card-visual img {
    max-width: 100%;
    height: auto;
    max-height: 280px;
    /* Mantém as ilustrações com um tamanho padronizado */
    object-fit: contain;
}

.modulo-card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.modulo-icon-title {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
}

/* Ícone atualizado para a cor verde limão presente na imagem */
.icon-box {
    width: 45px;
    height: 45px;
    background-color: #a0b82d;
    color: #001212;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.modulo-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
}

.modulo-desc {
    font-size: 0.95rem;
    color: #b0bfc3;
    line-height: 1.5;
    margin-bottom: 25px;
}

.modulo-list {
    list-style: none;
    padding: 0;
}

.modulo-list li {
    font-size: 0.9rem;
    position: relative;
    padding-left: 20px;
    margin-bottom: 12px;
    color: #ffffff;
    line-height: 1.4;
}

.modulo-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #ffffff;
    font-weight: bold;
}

/* Responsividade para não quebrar no celular */
@media (max-width: 900px) {

    .modulo-card,
    .modulo-card:nth-child(even) {
        flex-direction: column;
        /* Empilha no mobile ignorando o reverse */
        padding: 30px;
        gap: 30px;
    }
}

/* =========================================
   SEÇÃO: HERO ATUALIZAÇÃO DE ESTUDO
   ========================================= */

.hero-update-section {
    background-color: var(--white, #ffffff);
    padding: 100px 0;
    overflow: hidden;
    /* Evita que animações quebrem a rolagem horizontal */
}

/* Container flex para dividir em 2 colunas */
.hero-update-layout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

/* --- Lado Esquerdo (Textos) --- */
.hero-update-text {
    flex: 1;
    max-width: 600px;
}

.hero-update-text h2 {
    font-size: 2.2rem;
    font-weight: 800;
    /* Bem robusto, idêntico ao print */
    line-height: 1.2;
    margin-bottom: 25px;
    text-transform: uppercase;
}

/* Puxando as variáveis do seu :root global! */
.hero-update-text .text-lime {
    color: var(--primary-green);
}

.hero-update-text .text-dark-blue {
    color: var(--dark-blue);
}

.hero-update-text p {
    font-size: 1.05rem;
    color: #4b5563;
    /* Cinza médio, ideal para leitura em fundo claro */
    line-height: 1.6;
    margin-bottom: 35px;
    max-width: 550px;
}

/* --- Botão --- */
.btn-hero-update {
    display: inline-block;
    background-color: var(--primary-green);
    color: var(--dark-blue);
    padding: 14px 32px;
    border-radius: 50px;
    /* Bordas bem arredondadas, formato pílula */
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    transition: transform 0.2s ease, filter 0.3s ease;
}

.btn-hero-update:hover {
    transform: translateY(-2px);
    filter: brightness(0.95);
    /* Leve escurecida elegante no hover */
}

/* --- Lado Direito (Imagem) --- */
.hero-update-image {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.hero-update-image img {
    width: 100%;
    max-width: 650px;
    height: auto;
    object-fit: contain;
    /* DICA: Se o seu PNG do notebook vier sem aquela sombra do chão, ative a propriedade abaixo: */
    /* filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.15)); */

    /* Adicionei a animação de flutuar que já testamos antes */
    animation: float-laptop-update 6s ease-in-out infinite;
}

/* Keyframe exclusivo para evitar conflito com outras animações do seu arquivo */
@keyframes float-laptop-update {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-15px);
    }

    100% {
        transform: translateY(0px);
    }
}

/* --- Responsividade (Tablets e Mobile) --- */
@media (max-width: 992px) {
    .hero-update-layout {
        flex-direction: column;
        text-align: center;
        gap: 50px;
    }

    .hero-update-text {
        max-width: 100%;
        padding: 0 20px;
    }

    .hero-update-text p {
        margin: 0 auto 35px auto;
        /* Centraliza o parágrafo */
    }

    .hero-update-image {
        justify-content: center;
        padding: 0 20px;
    }
}

@media (max-width: 768px) {
    .hero-update-text h2 {
        font-size: 1.8rem;
    }
}

.audience-section {
    /* O 'linear-gradient' aplica uma camada escura transparente em cima da imagem 
       para garantir a leitura e replicar o visual do seu print. 
       Substitua 'sua-imagem-de-fundo.jpg' pelo caminho correto da sua imagem! 
    */
    background: linear-gradient(rgba(10, 25, 30, 0.85), rgba(10, 25, 30, 0.85)),
        url('/img/armazenamento/WHO_IS_THIS_FOR.jpg') center/cover no-repeat;
    padding: 100px 0;
}

.audience-title {
    text-align: center;
    color: var(--primary-green);
    /* Puxando sua variável global */
    font-size: 1.8rem;
    font-weight: 800;
    margin-bottom: 50px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Grid com 3 colunas */
.audience-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* Estilo base dos Cards */
.audience-card {
    border-radius: 8px;
    padding: 35px 30px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Efeito de hover (elevação) */
.audience-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
}

.audience-card h3 {
    font-size: 1.1rem;
    color: var(--dark-blue);
    font-weight: 800;
    margin-bottom: 15px;
    text-transform: uppercase;
    line-height: 1.3;
}

.audience-card p {
    font-size: 0.95rem;
    color: #00414c;
    /* Um azul/teal bem escuro (usado no seu layout) para o texto */
    line-height: 1.5;
    margin: 0;
    font-weight: 500;
}

/* --- Variação de Cores dos Cards (O padrão xadrez) --- */

/* Card Cinza Claro */
.card-light {
    background-color: #eef2f3;
    /* Tom de cinza bem clarinho (quase gelo) */
}

/* Card Verde Limão */
.card-lime {
    background-color: var(--primary-green);
    /* Usando a cor base do seu projeto */
}

/* Ajuste de contraste: Escurece um pouco o texto no card verde para facilitar a leitura */
.card-lime h3,
.card-lime p {
    color: #001212;
}


/* --- Responsividade (Tablets e Celulares) --- */

/* Tablet: Transforma em 2 colunas */
@media (max-width: 1024px) {
    .audience-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Celular: Transforma em 1 coluna */
@media (max-width: 768px) {
    .audience-section {
        padding: 80px 0;
    }

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

    .audience-title {
        font-size: 1.6rem;
    }
}

.highlights-section {
    background-color: var(--white, #ffffff);
    padding: 80px 0;
}

.highlights-title {
    font-size: 1.6rem;
    color: var(--dark-blue);
    /* Azul escuro do seu design system */
    font-weight: 800;
    margin-bottom: 30px;
    text-transform: uppercase;
}

/* Grid de 4 colunas */
.highlights-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* Base dos Cards */
.highlight-item {
    border-radius: 8px;
    padding: 30px 25px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    /* Espaço padronizado entre o título e o parágrafo */
    transition: transform 0.3s ease;
}

/* Pequeno efeito de flutuar ao passar o mouse */
.highlight-item:hover {
    transform: translateY(-5px);
}

.highlight-item h3 {
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.4;
    margin: 0;
}

.highlight-item p {
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
    font-weight: 500;
}

/* --- Variação: Card Escuro (Primeiro) --- */
.highlight-item.card-dark {
    /* Usei um Teal escuro idêntico ao da imagem */
    background-color: #003d4a;
}

.highlight-item.card-dark h3 {
    color: var(--primary-green);
    /* Verde limão */
}

.highlight-item.card-dark p {
    color: var(--white, #ffffff);
}

/* --- Variação: Cards Claros --- */
.highlight-item.card-light {
    /* Fundo cinza com leve tom azulado/ciano */
    background-color: #eef3f4;
}

.highlight-item.card-light h3 {
    color: var(--dark-blue);
}

.highlight-item.card-light p {
    /* Azul um pouco mais suave que o título para criar hierarquia visual */
    color: #1a4f5c;
}


/* --- Responsividade --- */

/* Tablet: Muda para 2 colunas */
@media (max-width: 1024px) {
    .highlights-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile: Muda para 1 coluna */
@media (max-width: 768px) {
    .highlights-section {
        padding: 60px 0;
    }

    .highlights-title {
        font-size: 1.4rem;
        text-align: center;
    }

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

.transform-data-section {
    background-color: #072329;
    /* Fundo escuro azul-petróleo fiel à imagem */
    padding: 70px 0;
    color: var(--white, #ffffff);
}

/* --- Cabeçalho --- */
.transform-data-header {
    text-align: center;
    max-width: 850px;
    margin: 0 auto 30px auto;
}

.transform-data-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 25px;
    text-transform: uppercase;
    color: var(--white, #ffffff);
    letter-spacing: 0.5px;
}

.transform-data-header p {
    font-size: 0.875rem;
    line-height: 1.2;
    color: #e2e8f0;
    /* Branco levemente acinzentado para não cansar a leitura */
    margin-bottom: 20px;
}

/* --- Grid de Cards --- */
.transform-data-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 60px;
}

/* --- Estilo Individual do Card --- */
.transform-data-card {
    border: 1px solid var(--primary-green, #B2D235);
    /* Borda verde limão */
    border-radius: 8px;
    padding: 20px 18px;
    background-color: transparent;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Efeito sutil ao passar o mouse */
.transform-data-card:hover {
    transform: translateY(-5px);
    /* Fundo ganha uma levíssima transparência verde no hover */
    background-color: rgba(178, 210, 53, 0.03);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* --- Ícone --- */
.td-icon {
    background-color: var(--primary-green, #B2D235);
    width: 38px;
    height: 38px;
    border-radius: 6px;
    /* Quadrado com cantos levemente arredondados */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    color: #051b1f;
    /* A cor do ícone SVG fica igual ao fundo da seção */
}

.td-icon svg {
    width: 20px;
    height: 20px;
}

/* --- Textos do Card --- */
.transform-data-card h3 {
    color: var(--primary-green, #B2D235);
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 5px;
    line-height: 1.4;
}

.transform-data-card p {
    font-size: 0.875rem;
    color: var(--white, #ffffff);
    line-height: 1.6;
    margin: 0;
}

/* --- Botão CTA --- */
.transform-data-cta {
    text-align: center;
}

.btn-transform-buy {
    display: inline-block;
    background-color: var(--primary-green, #B2D235);
    color: #001212;
    /* Texto bem escuro para contraste no botão */
    padding: 12px 40px;
    border-radius: 40px;
    /* Formato pílula */
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    text-transform: uppercase;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.btn-transform-buy:hover {
    transform: translateY(-3px);
    filter: brightness(1.1);
    /* Botão fica levemente mais aceso no hover */
}

/* =========================================
   RESPONSIVIDADE
   ========================================= */

/* Tablet: Quebra para 2 colunas */
@media (max-width: 1024px) {
    .transform-data-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile: Quebra para 1 coluna */
@media (max-width: 768px) {
    .transform-data-section {
        padding: 80px 0;
    }

    .transform-data-header h2 {
        font-size: 1.8rem;
    }

    .transform-data-grid {
        grid-template-columns: 1fr;
    }
}

.invest-card-section {
    background-color: var(--white, #ffffff);
    padding: 80px 0;
}

.invest-card-wrapper {
    display: flex;
    max-width: 1400px;
    /* Largura ideal para esse tipo de card */
    margin: 0 auto;
    border-radius: 1rem;
    overflow: hidden;
    /* Garante que o fundo não vaze das bordas arredondadas */
    border: 3px solid #003d4a;
    /* Borda grossa na cor exata do fundo direito */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
    /* Sombra elegante */
}

/* --- LADO ESQUERDO (BRANCO) --- */
.invest-card-left {
    flex: 1;
    background-color: var(--white, #ffffff);
    padding: 60px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.invest-card-left h2 {
    font-size: 2.4rem;
    color: #003d4a;
    /* Tom escuro azul/petróleo */
    font-weight: 800;
    margin-bottom: 40px;
    letter-spacing: -0.5px;
}

.invest-benefits-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.invest-benefits-list li {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 1.05rem;
    color: #003d4a;
    font-weight: 500;
}

.invest-benefits-list svg {
    width: 22px;
    height: 22px;
    color: var(--primary-green, #B2D235);
    /* Verde limão do check */
    flex-shrink: 0;
    /* Impede que o ícone amasse caso o texto tenha 2 linhas */
}

/* --- LADO DIREITO (ESCURO) --- */
.invest-card-right {
    flex: 1.1;
    /* Levemente mais largo que o lado esquerdo */
    background-color: #003d4a;
    /* Fundo petróleo idêntico à borda */
    padding: 50px 40px;
    border-radius: 1rem 0 0 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: var(--white, #ffffff);
}

.invest-logo {
    height: 38px;
    margin-bottom: 25px;
    object-fit: contain;
}

.invest-offer-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.4;
}

.invest-old-price {
    font-size: 1rem;
    color: #cbd5e1;
    /* Cinza clarinho */
    margin-bottom: 15px;
}

/* Estrutura do preço com as linhas verde limão */
.invest-price-box {
    width: 100%;
    max-width: 320px;
    margin: 0 auto 30px auto;
}

.invest-divider {
    height: 4px;
    background-color: var(--primary-green, #B2D235);
    width: 100%;
    border-radius: 2px;
}

.invest-current-price {
    font-size: 3.2rem;
    font-weight: 800;
    padding: 15px 0;
    line-height: 1;
    letter-spacing: -1px;
}

/* --- BOTÃO DE COMPRA --- */
.invest-btn-buy {
    display: inline-block;
    background-color: var(--primary-green, #B2D235);
    color: #001212;
    font-weight: 800;
    font-size: 0.95rem;
    padding: 14px 35px;
    border-radius: 40px;
    /* Formato pílula */
    text-decoration: none;
    transition: transform 0.2s ease, filter 0.3s ease;
}

.invest-btn-buy:hover {
    transform: translateY(-3px);
    filter: brightness(1.05);
    /* Efeito de brilho ao passar o mouse */
}

/* =========================================
   RESPONSIVIDADE
   ========================================= */

@media (max-width: 900px) {
    .invest-card-wrapper {
        flex-direction: column;
        /* Empilha os blocos no celular/tablet em pé */
        max-width: 600px;
    }

    .invest-card-left {
        padding: 50px 30px;
    }

    .invest-card-right {
        padding: 50px 30px;
    }
}

@media (max-width: 600px) {
    .invest-card-left h2 {
        font-size: 2rem;
        text-align: center;
    }

    .invest-current-price {
        font-size: 2.8rem;
    }

    .invest-benefits-list li {
        font-size: 0.95rem;
    }
}

.study-chapters-section {
    background-color: var(--white, #ffffff);
    padding: 40px 0;
}

.study-chapters-layout {
    display: flex;
    align-items: flex-start;
    /* Alinha os itens pelo topo */
    gap: 60px;
}

/* --- Lado Esquerdo (Imagem) --- */
.study-chapters-img-wrapper {
    flex: 1;
    display: flex;
    justify-content: center;
    position: sticky;
    top: 100px;
    /* Faz a imagem acompanhar a rolagem enquanto os textos abrem */
}

.study-chapters-img-wrapper img {
    width: 100%;
    max-width: 500px;
    height: auto;
    object-fit: contain;
}

/* --- Lado Direito (Acordeão) --- */
.study-chapters-accordion {
    flex: 1.2;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.study-chapter-item {
    width: 100%;
}

/* Botão Fechado */
.study-chapter-title {
    background-color: #e5f0f2;
    /* Cinza azulado claro da imagem 1 */
    color: #003d4a;
    /* Teal escuro */
    padding: 16px 25px;
    border-radius: 30px;
    /* Bordas super arredondadas (pílula) */
    font-weight: 700;
    font-size: 1.05rem;
    cursor: pointer;
    list-style: none;
    /* Remove a setinha padrão do details */
    transition: background-color 0.3s ease, color 0.3s ease;
    user-select: none;
    /* Evita que o texto seja selecionado ao clicar duplo */
}

/* Esconde a setinha no Safari/Chrome antigo */
.study-chapter-title::-webkit-details-marker {
    display: none;
}

/* Efeito ao passar o mouse */
.study-chapter-title:hover {
    background-color: #d1e4e8;
}

/* --- ESTADO: BOTÃO ABERTO --- */
/* Quando o details recebe a tag [open], mudamos a cor do título */
.study-chapter-item[open] .study-chapter-title {
    background-color: transparent;
    /* Remove o fundo igual a imagem 2 */
    color: var(--primary-green, #a0b82d);
    /* Fica verde */
    padding-bottom: 10px;
    /* Ajusta o padding para colar mais no texto */
}

/* --- Conteúdo Expandido (Lista) --- */
.study-chapter-content {
    padding: 10px 20px 20px 25px;
    animation: fadeInDown 0.4s ease;
    /* Animação suave ao abrir */
}

.study-chapter-content ul {
    list-style-type: disc;
    /* Bolinhas padrão */
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
}

.study-chapter-content li {
    font-size: 0.95rem;
    color: #4b5563;
    /* Cinza para o texto corrido */
    line-height: 1.5;
    font-weight: 500;
}

/* Animação para o conteúdo não aparecer secamente */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

/* =========================================
   RESPONSIVIDADE
   ========================================= */

@media (max-width: 992px) {
    .study-chapters-layout {
        flex-direction: column;
        /* Empilha a imagem e os capítulos */
        align-items: center;
        gap: 50px;
    }

    .study-chapters-img-wrapper {
        position: static;
        /* Remove o comportamento "sticky" no mobile */
    }

    .study-chapters-accordion {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .study-chapters-section {
        padding: 60px 0;
    }

    .study-chapter-title {
        font-size: 1rem;
        padding: 14px 20px;
    }
}

.feedback-section {
    background-color: var(--white, #ffffff);
    padding: 40px 0;
    overflow-x: hidden;
    /* Evita rolagem horizontal indesejada por causa dos avatares vazando */
}

/* O grid principal com 2 colunas */
.feedback-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 60px;
    /* 40px vertical, 60px horizontal */
    /* Padding na esquerda para garantir que o avatar do card da esquerda não seja cortado */
    padding-left: 60px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Card Base */
.feedback-card {
    background-color: #eef3f4;
    /* Fundo cinza/azulado clarinho da imagem */
    border-radius: 12px;
    position: relative;
    /* FUNDAMENTAL para ancorar o avatar flutuante */
    padding: 35px 35px 35px 70px;
    /* Padding extra na esquerda para dar espaço ao avatar */
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Leve elevação ao passar o mouse */
.feedback-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

/* O Avatar flutuante (meio dentro, meio fora) */
.feedback-avatar {
    position: absolute;
    left: -50px;
    /* Puxa a imagem para fora do card */
    top: 50%;
    transform: translateY(-50%);
    /* Centraliza verticalmente com exatidão */
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    /* Borda sutil para definir melhor o recorte contra o fundo claro */
    border: 3px solid var(--white, #ffffff);
}

/* Tipografia do Card */
.feedback-quote {
    font-size: 0.95rem;
    color: #4b5563;
    /* Cinza médio */
    line-height: 1.6;
    margin-bottom: 20px;
}

.feedback-name {
    font-size: 1rem;
    font-weight: 700;
    color: #004b5a;
    /* Teal/Azul Escuro do seu projeto */
    margin-bottom: 4px;
}

.feedback-role {
    font-size: 0.9rem;
    font-style: italic;
    /* Cargo em itálico como no print */
    color: #004b5a;
}

/* =========================================
   RESPONSIVIDADE (Tablets e Celulares)
   ========================================= */

@media (max-width: 1024px) {
    .feedback-grid {
        gap: 40px;
        padding-left: 50px;
    }
}

@media (max-width: 768px) {
    .feedback-section {
        padding: 60px 0;
    }

    .feedback-grid {
        grid-template-columns: 1fr;
        /* Muda para 1 coluna */
        padding-left: 0;
        /* Remove o padding do grid container */
        padding: 0 20px;
        /* Adiciona respiro lateral */
    }

    /* Esconde a div vazia no celular, pois não precisa fazer o efeito escada */
    .feedback-empty {
        display: none;
    }

    .feedback-card {
        /* Adiciona margem na esquerda do próprio card para o avatar não grudar na tela */
        margin-left: 30px;
        padding: 30px 25px 30px 50px;
        /* Ajusta o espaçamento interno */
    }

    .feedback-avatar {
        width: 80px;
        height: 80px;
        left: -40px;
        /* Ajusta o avatar para o tamanho menor no mobile */
    }
}

.faq-split-section {
    background-color: var(--white, #ffffff);
    padding: 100px 0;
}

.faq-split-layout {
    display: flex;
    align-items: flex-start;
    gap: 80px;
    /* Espaço generoso entre as duas colunas */
}

/* --- Lado Esquerdo (Textos) --- */
.faq-split-left {
    flex: 1;
    max-width: 400px;
}

.faq-split-tag {
    display: block;
    font-size: 0.95rem;
    letter-spacing: 4px;
    /* Espaçamento idêntico ao do print F . A . Q */
    color: #333333;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.faq-split-title {
    font-size: 3rem;
    font-weight: 800;
    color: var(--primary-green, #B2D235);
    /* O seu verde-limão */
    line-height: 1.1;
    margin-bottom: 35px;
}

.faq-split-desc {
    font-size: 1.05rem;
    color: #4b5563;
    /* Cinza médio */
    line-height: 1.6;
    margin-bottom: 20px;
}

.faq-split-email {
    color: var(--primary-green, #B2D235);
    font-weight: 700;
    text-decoration: none;
    font-size: 1.05rem;
    transition: filter 0.3s ease;
}

.faq-split-email:hover {
    filter: brightness(0.9);
    /* Leve escurecida ao passar o mouse */
    text-decoration: underline;
}

/* --- Lado Direito (Acordeão) --- */
.faq-split-right {
    flex: 1.5;
    /* Ocupa um pouco mais de espaço que a coluna da esquerda */
    display: flex;
    flex-direction: column;
    gap: 15px;
    /* Distância entre as perguntas */
}

.faq-split-item {
    width: 100%;
}

/* Botão da Pergunta */
.faq-split-question {
    background-color: #e5edf0;
    /* Cinza/azulado claro inspirado no print */
    color: #003d4a;
    /* Teal escuro */
    font-weight: 700;
    font-size: 1.05rem;
    padding: 18px 30px;
    border-radius: 40px;
    /* Formato pílula bem arredondado */
    cursor: pointer;
    list-style: none;
    /* Remove a setinha padrão do details */
    transition: background-color 0.3s ease, color 0.3s ease;
    user-select: none;
}

/* Remove a setinha no Safari/Chrome antigo */
.faq-split-question::-webkit-details-marker {
    display: none;
}

.faq-split-question:hover {
    background-color: #d8e5e8;
    /* Fica levemente mais escuro no hover */
}

/* Quando a pergunta está aberta, mudamos levemente a cor da barra para destacar */
.faq-split-item[open] .faq-split-question {
    background-color: var(--primary-green, #B2D235);
    color: #001212;
}

/* Resposta */
.faq-split-answer {
    padding: 20px 30px 10px 30px;
    color: #4b5563;
    line-height: 1.6;
    font-size: 0.95rem;
    font-weight: 500;
    animation: faqFadeInDown 0.35s ease-out;
    /* Animação suave ao abrir */
}

@keyframes faqFadeInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

/* =========================================
   RESPONSIVIDADE
   ========================================= */

@media (max-width: 992px) {
    .faq-split-layout {
        flex-direction: column;
        /* Empilha as colunas no tablet/mobile */
        gap: 50px;
    }

    .faq-split-left {
        max-width: 100%;
        text-align: center;
        /* Centraliza os textos */
    }

    .faq-split-title {
        font-size: 2.5rem;
    }
}

@media (max-width: 768px) {
    .faq-split-section {
        padding: 60px 0;
    }

    .faq-split-question {
        font-size: 0.95rem;
        padding: 15px 20px;
    }

    .faq-split-answer {
        padding: 15px 20px 10px 20px;
    }
}

/* =========================================
   SEÇÃO: CTA - COMPARTILHAR TRANSAÇÃO
   ========================================= */

.share-transaction-section {
    /* Gradiente escuro simulando a luz teal vindo da direita, idêntico à imagem */
    background: linear-gradient(90deg, #051214 0%, #0a1f23 50%, #1e4b53 100%);
    padding: 100px 0;
    text-align: center;
}

.share-transaction-content {
    max-width: 800px;
    /* Limita a largura para o texto não esticar demais em telas grandes */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.share-transaction-content h2 {
    font-size: 2.2rem;
    color: var(--white, #ffffff);
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.3;
}

.share-transaction-content p {
    font-size: 1.05rem;
    /* Usei um tom de azul claro (ciano) que você já usa no projeto para bom contraste no fundo escuro */
    color: #74cfe2;
    margin-bottom: 35px;
    font-weight: 400;
}

/* Botão de Ação */
.btn-share-transaction {
    display: inline-block;
    background-color: var(--primary-green, #B2D235);
    /* Verde limão do seu Design System */
    color: #001212;
    /* Texto bem escuro para contraste */
    padding: 12px 35px;
    border-radius: 6px;
    /* Bordas levemente arredondadas */
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    transition: transform 0.2s ease, filter 0.3s ease;
}

.btn-share-transaction:hover {
    transform: translateY(-3px);
    /* Efeito de elevação */
    filter: brightness(1.05);
    /* Deixa o botão levemente mais aceso no hover */
}

/* =========================================
   RESPONSIVIDADE (Tablets e Celulares)
   ========================================= */

@media (max-width: 768px) {
    .share-transaction-section {
        padding: 70px 20px;
        /* No mobile, o gradiente pode ser vertical para se adaptar melhor à tela estreita */
        background: linear-gradient(180deg, #051214 0%, #0a1f23 50%, #1a3d44 100%);
    }

    .share-transaction-content h2 {
        font-size: 1.8rem;
    }

    .share-transaction-content p {
        font-size: 1rem;
        line-height: 1.5;
    }
}

/* =========================================
   SEÇÃO: GUIAS & BOLETINS (LIGHT THEME)
   ========================================= */

.gb-light-section {
    background-color: #f2f9f9;
    /* Fundo ciano/azul super claro do print */
    padding: 100px 0;
}

.gb-light-layout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

/* --- LADO ESQUERDO (IMAGEM) --- */
.gb-light-image {
    flex: 1;
    display: flex;
    justify-content: center;
}

.gb-light-image img {
    width: 100%;
    max-width: 480px;
    /* Limita a largura da capa para não ficar desproporcional */
    height: auto;
    object-fit: contain;
    /* Adiciona uma sombra e elevação caso o seu PNG seja "chapado" */
    filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.15));
    transition: transform 0.4s ease;
}

.gb-light-image img:hover {
    transform: translateY(-5px) scale(1.02);
    /* Leve interação ao passar o mouse */
}

/* --- LADO DIREITO (TEXTOS) --- */
.gb-light-content {
    flex: 1.2;
    /* Dá um pouco mais de área para o texto */
    max-width: 650px;
}

.gb-light-content h2 {
    font-size: 2.2rem;
    font-weight: 700;
    color: #001212;
    /* Tom bem escuro quase preto */
    margin-bottom: 5px;
    letter-spacing: -0.5px;
}

.gb-light-subtitle {
    font-size: 1.15rem;
    color: #00414c;
    /* Teal escuro */
    font-weight: 600;
    margin-bottom: 25px;
}

.gb-light-content p {
    font-size: 1.05rem;
    color: #4b6873;
    /* Cinza esverdeado/azulado para leitura */
    line-height: 1.6;
    margin-bottom: 35px;
}

/* --- LISTA DE BENEFÍCIOS --- */
.gb-light-benefits-title {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: #001212;
    margin-bottom: 20px;
}

.gb-light-benefits ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 40px;
}

.gb-light-benefits li {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 1.05rem;
    font-weight: 600;
    color: #00414c;
}

.gb-light-icon {
    width: 40px;
    height: 40px;
    background-color: #d1eff5;
    /* Fundo azul ciano claro do ícone */
    border-radius: 8px;
    /* Cantos arredondados */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #00414c;
    /* Cor do traçado do ícone */
}

.gb-light-icon svg {
    width: 20px;
    height: 20px;
    stroke-width: 2.5;
    /* Deixa o ícone um pouco mais grosso e visível */
}

/* --- BOTÃO DE AÇÃO --- */
.btn-gb-light {
    display: inline-block;
    background-color: var(--primary-green, #B2D235);
    /* Puxa sua variável de Verde Limão */
    color: #001212;
    padding: 14px 32px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.btn-gb-light:hover {
    transform: translateY(-2px);
    filter: brightness(0.95);
    /* Dá uma leve escurecida no hover */
}

/* =========================================
   RESPONSIVIDADE (Tablets e Celulares)
   ========================================= */
@media (max-width: 992px) {
    .gb-light-layout {
        flex-direction: column;
        /* Empilha no mobile: Imagem em cima, texto embaixo */
        text-align: center;
        gap: 50px;
    }

    .gb-light-content {
        max-width: 100%;
        padding: 0 15px;
    }

    .gb-light-benefits ul li {
        justify-content: center;
        /* Centraliza a lista no mobile */
    }
}

@media (max-width: 768px) {
    .gb-light-section {
        padding: 70px 0;
    }

    .gb-light-content h2 {
        font-size: 1.8rem;
    }
}

/* ==========================================================================
   SEÇÃO: EVENTO LRCAP (BESS)
   ========================================================================== */

.event-lrcap-hero {
    position: relative;
    /* Substitua a URL abaixo pelo caminho da foto dos painéis solares/container */
    background-image: url('/img/hero/Outlook\ LRCAP.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Min-height para garantir que a foto apareça bem, como no design */
    min-height: 550px;
    padding: 120px 0 80px 0;
    display: flex;
    align-items: center;
    color: var(--white, #ffffff);
    overflow: hidden;
}

/* Overlay escuro esverdeado por cima da imagem para dar leitura ao texto */
.event-lrcap-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    /* Um gradiente escuro inspirado no tom da sua imagem */
    background: linear-gradient(rgba(19, 32, 28, 0.75), rgba(19, 32, 28, 0.85));
    z-index: 1;
}

/* Garante que o conteúdo fique por cima do overlay escuro */
.event-lrcap-hero .container {
    position: relative;
    z-index: 2;
    width: 100%;
}

/* Texto "EVENTOS" isolado no topo central */
.event-lrcap-top-label {
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 6px;
    color: var(--white, #ffffff);
    text-transform: uppercase;
}

/* Container do texto da esquerda */
.event-lrcap-content {
    max-width: 800px;
    /* Limita a largura para o texto não vazar muito pra direita */
}

.event-lrcap-tagline {
    display: block;
    font-size: 1.4rem;
    font-weight: 400;
    margin-bottom: 5px;
}

.event-lrcap-title {
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 25px;
    color: var(--white, #ffffff);
}

.event-lrcap-description {
    font-size: 1.05rem;
    color: #e2e8f0;
    /* Branco levemente acinzentado */
    line-height: 1.6;
    margin-bottom: 25px;
    max-width: 650px;
}

/* Barra vertical de informações (Data e YouTube) */
.event-lrcap-info {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--white, #ffffff);
    /* A barrinha branca à esquerda idêntica ao layout */
    border-left: 2px solid var(--white, #ffffff);
    padding-left: 15px;
    margin-bottom: 35px;
}

/* Botão Verde Limão */
.btn-event-lrcap {
    display: inline-block;
    /* Puxa a variável do verde limão do seu :root */
    background-color: var(--primary-green, #B2D235);
    color: #001212;
    /* Texto bem escuro para alto contraste */
    padding: 12px 30px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.btn-event-lrcap:hover {
    transform: translateY(-2px);
    filter: brightness(0.95);
}

/* =========================================
   RESPONSIVIDADE (Tablets e Celulares)
   ========================================= */
@media (max-width: 992px) {
    .event-lrcap-title {
        font-size: 2.2rem;
    }
}

@media (max-width: 768px) {
    .event-lrcap-hero {
        padding: 100px 0 60px 0;
        text-align: left;
        /* Mantém alinhado à esquerda no mobile */
    }

    .event-lrcap-top-label {
        top: 25px;
        font-size: 0.85rem;
        letter-spacing: 4px;
    }

    .event-lrcap-tagline {
        font-size: 1.2rem;
    }

    .event-lrcap-title {
        font-size: 1.8rem;
    }

    .event-lrcap-info {
        font-size: 0.9rem;
    }
}

/* ==========================================================================
   SEÇÃO: CTA GREENDEX (DASHBOARDS)
   ========================================================================== */

.greendex-cta-section {
    background-color: var(--white, #ffffff);
    /* Fundo da página, mantenha branco ou ajuste se necessário */
    padding: 120px 0 60px 0;
}

/* O "Card" Verde gigante */
.greendex-cta-wrapper {
    /* Cor verde esmeralda idêntica ao print */
    background-color: #2eb383;
    border-radius: 20px;
    padding: 60px 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
    box-shadow: 0 15px 40px rgba(46, 179, 131, 0.2);
    overflow: hidden;
    /* Garante que nada vaze das bordas arredondadas */
}

/* --- LADO ESQUERDO: TEXTOS E BOTÃO --- */
.greendex-cta-content {
    flex: 1;
    max-width: 500px;
    color: #ffffff;
}

.greendex-cta-content h2 {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 20px;
    color: #ffffff;
    letter-spacing: -0.5px;
}

.greendex-cta-content p {
    font-size: 1.15rem;
    line-height: 1.5;
    margin-bottom: 40px;
    color: #ffffff;
}

.greendex-cta-content p strong {
    font-weight: 800;
}

/* Botão Escuro */
.btn-greendex {
    display: inline-block;
    background-color: #003d4a;
    /* Tom de azul petróleo/teal escuro do print */
    color: #ffffff;
    padding: 12px 35px;
    border-radius: 40px;
    /* Formato pílula */
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-greendex:hover {
    background-color: #002b35;
    /* Fica levemente mais escuro no hover */
    transform: translateY(-2px);
}

/* --- LADO DIREITO: IMAGEM --- */
.greendex-cta-image {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: relative;
}

.greendex-cta-image img {
    width: 100%;
    /* Deixa a imagem ligeiramente maior para simular o efeito de profundidade do print */
    max-width: 600px;
    height: auto;
    object-fit: contain;
    /* Move a imagem levemente para a direita se o PNG tiver bordas transparentes largas */
    transform: translateX(20px);
}

/* =========================================
   RESPONSIVIDADE (Tablets e Celulares)
   ========================================= */

@media (max-width: 1024px) {
    .greendex-cta-wrapper {
        padding: 50px;
        gap: 30px;
    }

    .greendex-cta-content h2 {
        font-size: 2rem;
    }
}

@media (max-width: 850px) {
    .greendex-cta-wrapper {
        flex-direction: column;
        text-align: center;
        padding: 40px 30px;
    }

    .greendex-cta-content {
        max-width: 100%;
        margin-bottom: 20px;
    }

    .greendex-cta-image {
        justify-content: center;
    }

    .greendex-cta-image img {
        transform: translateX(0);
        /* Reseta o deslocamento no mobile */
        max-width: 100%;
    }
}

@media (max-width: 600px) {
    .greendex-cta-content h2 {
        font-size: 1.8rem;
    }

    .greendex-cta-content p {
        font-size: 1.05rem;
    }
}

/* ==========================================================================
   SEÇÃO: ECOSSISTEMA GREENER
   ========================================================================== */

.ecosystem-section-wrapper {
    background-color: #f4f7f8;
    /* Fundo gelo/cinza super claro da imagem */
    padding: 100px 0;
}

.ecosystem-section-layout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    max-width: 1200px;
    margin: 0 auto;
}

/* --- LADO ESQUERDO: TEXTOS --- */
.ecosystem-section-content {
    flex: 1;
    max-width: 580px;
}

.ecosystem-section-content h2 {
    font-size: 2.2rem;
    font-weight: 800;
    color: #003d4a;
    /* Azul petróleo escuro do texto */
    margin-bottom: 25px;
    line-height: 1.2;
    letter-spacing: -0.5px;
}

.ecosystem-section-content p {
    font-size: 1.05rem;
    color: #003d4a;
    /* Mantém a mesma cor escurecida no corpo do texto */
    line-height: 1.6;
    margin-bottom: 20px;
    font-weight: 400;
}

.ecosystem-section-content p:last-child {
    margin-bottom: 0;
}

.ecosystem-section-content strong {
    font-weight: 700;
}

/* --- LADO DIREITO: IMAGEM/GRÁFICO --- */
.ecosystem-section-image {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ecosystem-section-image img {
    width: 100%;
    max-width: 500px;
    /* Limita o tamanho do gráfico circular para não explodir na tela */
    height: auto;
    object-fit: contain;
    /* A propriedade abaixo adiciona uma sombra realista apenas no formato do seu PNG/SVG */
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.08));
    transition: transform 0.4s ease;
}

.ecosystem-section-image img:hover {
    transform: scale(1.02);
    /* Leve interação de zoom ao passar o mouse */
}

/* =========================================
   RESPONSIVIDADE (Tablets e Celulares)
   ========================================= */

@media (max-width: 992px) {
    .ecosystem-section-layout {
        flex-direction: column;
        gap: 50px;
        text-align: center;
        /* Centraliza tudo no tablet/mobile */
    }

    .ecosystem-section-content {
        max-width: 100%;
        padding: 0 20px;
    }

    .ecosystem-section-content h2 {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    .ecosystem-section-wrapper {
        padding: 70px 0;
    }

    .ecosystem-section-content h2 {
        font-size: 1.8rem;
    }

    .ecosystem-section-content p {
        font-size: 1rem;
    }

    .ecosystem-section-image img {
        max-width: 350px;
        /* Reduz o tamanho da roda no celular */
    }
}

/* ==========================================================================
   SEÇÃO: DADOS DE IMPORTAÇÃO (GREENDEX)
   ========================================================================== */

.greendex-data-section {
    background-color: var(--white, #ffffff);
    padding: 80px 0;
}

/* --- CABEÇALHO --- */
.greendex-data-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    margin-bottom: 50px;
}

.greendex-data-title {
    flex: 1;
    font-size: 2.2rem;
    font-weight: 800;
    color: #003d4a;
    /* Azul petróleo escuro */
    line-height: 1.2;
    margin: 0;
    letter-spacing: -0.5px;
}

/* Destaque em tom Verde/Teal no título */
.greendex-data-title span {
    color: #1b9e85;
}

/* Botão Escuro */
.btn-greendex-dark {
    display: inline-block;
    background-color: #003d4a;
    /* Azul petróleo escuro */
    color: #ffffff;
    padding: 14px 35px;
    border-radius: 40px;
    /* Formato pílula */
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    white-space: nowrap;
    /* Impede o botão de quebrar linha */
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-greendex-dark:hover {
    background-color: #002b35;
    /* Fica mais escuro no hover */
    transform: translateY(-2px);
}

/* --- GRID DE CARDS --- */
.greendex-data-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* 2 Colunas */
    gap: 24px;
}

/* --- ESTILO DO CARD --- */
.greendex-data-card {
    background-color: var(--white, #ffffff);
    border: 1px solid #e2e8f0;
    /* Borda cinza bem clara */
    border-radius: 12px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.greendex-data-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.04);
    border-color: #1b9e85;
    /* Borda fica verde no hover (opcional, dá um charme) */
}

.greendex-data-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.greendex-data-card-header h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1b9e85;
    /* Título Verde/Teal */
    margin: 0;
    line-height: 1.4;
}

/* Ícone do Card */
.greendex-data-icon {
    width: 32px;
    height: 32px;
    color: #1b9e85;
    flex-shrink: 0;
    /* Impede o ícone de amassar se o título for longo */
}

.greendex-data-icon svg {
    width: 100%;
    height: 100%;
}

/* Corpo do texto */
.greendex-data-card-body p {
    font-size: 0.95rem;
    color: #4b5563;
    /* Cinza médio para leitura */
    line-height: 1.6;
    margin: 0;
}

.greendex-data-card-body strong {
    font-weight: 700;
    color: #374151;
    /* Destaca o bold um pouquinho mais escuro */
}

/* =========================================
   RESPONSIVIDADE (Tablets e Celulares)
   ========================================= */

@media (max-width: 992px) {
    .greendex-data-header {
        flex-direction: column;
        /* Empilha o título e o botão */
        text-align: center;
        gap: 30px;
    }

    .greendex-data-title {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    .greendex-data-section {
        padding: 60px 0;
    }

    .greendex-data-title {
        font-size: 1.8rem;
    }

    .greendex-data-grid {
        grid-template-columns: 1fr;
        /* Muda para 1 coluna no celular */
    }

    .greendex-data-card {
        padding: 25px 20px;
    }
}

/* ==========================================================================
   SEÇÃO: POR QUE ADQUIRIR (GREENDEX)
   ========================================================================== */

.greendex-why-section {
    background-color: #2eb383;
    /* Fundo Verde Esmeralda */
    padding: 80px 0 100px 0;
}

.greendex-why-title {
    text-align: center;
    color: var(--white, #ffffff);
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 50px;
    letter-spacing: -0.5px;
}

/* --- GRID DE CARDS --- */
.greendex-why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto 50px auto;
}

/* --- ESTILO DO CARD --- */
.greendex-why-card {
    background-color: var(--white, #ffffff);
    border-radius: 8px;
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Centraliza o ícone e o título */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
    /* Sombra suave para dar profundidade */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.greendex-why-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.12);
}

.greendex-why-icon {
    width: 40px;
    height: 40px;
    color: #003d4a;
    /* Azul petróleo escuro */
    margin-bottom: 25px;
}

.greendex-why-icon svg {
    width: 100%;
    height: 100%;
}

.greendex-why-card h3 {
    color: #1b9e85;
    /* Verde/Teal do título */
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    margin-bottom: 20px;
    min-height: 50px;
    /* Alinha os títulos que têm 2 ou 3 linhas */
}

.greendex-why-card p {
    color: #4b5563;
    /* Cinza médio */
    font-size: 0.95rem;
    line-height: 1.6;
    text-align: justify;
    /* Deixa o bloco de texto perfeitamente alinhado nas laterais, como na imagem */
    margin: 0;
}

/* --- BOTÃO INFERIOR --- */
.greendex-why-action {
    text-align: center;
}

.btn-greendex-why {
    display: inline-block;
    background-color: #003d4a;
    /* Azul petróleo escuro */
    color: #ffffff;
    padding: 15px 45px;
    border-radius: 40px;
    /* Formato pílula */
    font-weight: 700;
    font-size: 1.05rem;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-greendex-why:hover {
    background-color: #002b35;
    /* Fica mais escuro no hover */
    transform: translateY(-2px);
}

/* =========================================
   RESPONSIVIDADE (Tablets e Celulares)
   ========================================= */

@media (max-width: 1024px) {
    .greendex-why-grid {
        grid-template-columns: repeat(2, 1fr);
        /* Quebra para 2 colunas */
    }

    .greendex-why-card h3 {
        min-height: auto;
        /* Remove a altura mínima no tablet */
    }
}

@media (max-width: 768px) {
    .greendex-why-section {
        padding: 60px 0;
    }

    .greendex-why-title {
        font-size: 1.8rem;
        margin-bottom: 40px;
    }

    .greendex-why-grid {
        grid-template-columns: 1fr;
        /* Quebra para 1 coluna no celular */
        gap: 25px;
    }

    .greendex-why-card {
        padding: 35px 25px;
    }
}

/* ==========================================================================
   SEÇÃO: COMO FUNCIONA (TIMELINE GREENDEX)
   ========================================================================== */

.greendex-works-section {
    background-color: var(--white, #ffffff);
    padding: 100px 0;
}

/* --- Cabeçalho --- */
.greendex-works-header {
    text-align: center;
    margin-bottom: 80px;
}

.greendex-works-header h2 {
    font-size: 2.2rem;
    font-weight: 800;
    color: #003d4a;
    /* Azul petróleo escuro */
    margin-bottom: 10px;
    letter-spacing: -0.5px;
}

.greendex-works-header span {
    font-size: 0.85rem;
    color: #4b5563;
    /* Cinza médio */
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

/* --- Linha do Tempo Container --- */
.greendex-works-timeline {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
}

/* A Linha Vertical Central */
.greendex-works-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    background-color: #003d4a;
    /* Azul petróleo escuro */
    z-index: 1;
}

/* --- Linha (Row) de cada passo --- */
.greendex-works-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 80px;
    position: relative;
}

.greendex-works-row:last-child {
    margin-bottom: 0;
}

/* A Bolinha do Número */
.greendex-works-node {
    position: absolute;
    left: 50%;
    top: 50%;
    /* Centraliza na vertical da row */
    transform: translate(-50%, -50%);
    width: 45px;
    height: 45px;
    background-color: #003d4a;
    /* Azul petróleo escuro */
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    z-index: 2;
}

/* Colunas (Ocupam quase metade, deixando espaço pro centro) */
.greendex-works-col {
    width: 42%;
}

/* Ajustes de alinhamento para colar no centro */
.greendex-works-col.align-right {
    display: flex;
    justify-content: flex-end;
}

.greendex-works-col.align-left {
    display: flex;
    justify-content: flex-start;
}

/* --- Componente: Card de Texto --- */
.greendex-works-text-card {
    background-color: var(--white, #ffffff);
    border: 1px solid #e2e8f0;
    /* Borda bem sutil */
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    /* Sombra elegante */
    max-width: 380px;
    width: 100%;
}

.greendex-works-text-card h3 {
    font-size: 1.05rem;
    font-weight: 800;
    color: #001212;
    margin-bottom: 15px;
    line-height: 1.4;
}

.greendex-works-text-card p {
    font-size: 0.95rem;
    color: #4b5563;
    line-height: 1.6;
    margin: 0;
}

/* --- Componente: Bloco Verde com Ícone --- */
.greendex-works-icon-block {
    background-color: #2eb383;
    /* Verde Esmeralda da identidade */
    width: 200px;
    height: 200px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 25px rgba(46, 179, 131, 0.2);
}

.greendex-works-icon-block svg {
    width: 65px;
    height: 65px;
    color: #003d4a;
    /* O traçado do ícone usa a cor escura */
}

/* =========================================
   RESPONSIVIDADE (Tablets e Celulares)
   ========================================= */

@media (max-width: 900px) {

    /* No mobile, a linha central vai para a esquerda */
    .greendex-works-line {
        left: 20px;
        transform: none;
    }

    .greendex-works-node {
        left: 20px;
        top: 0;
        /* Gruda a bolinha no topo do card ao invés de no centro */
        transform: translateX(-50%);
        /* Ajusta apenas o eixo X */
    }

    .greendex-works-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        padding-left: 60px;
        /* Abre espaço para a linha e a bolinha */
        margin-bottom: 60px;
    }

    .greendex-works-col {
        width: 100%;
    }

    /* Reseta os alinhamentos */
    .greendex-works-col.align-right,
    .greendex-works-col.align-left {
        justify-content: flex-start;
    }

    .greendex-works-text-card {
        max-width: 100%;
    }

    .greendex-works-icon-block {
        width: 100%;
        max-width: 250px;
        height: auto;
        aspect-ratio: 1 / 1;
        /* Mantém o bloco quadrado no celular */
    }

    /* Inverte a ordem do passo 2 no mobile para que o texto venha antes da imagem */
    .greendex-works-row.reverse-mobile {
        flex-direction: column-reverse;
    }
}

@media (max-width: 600px) {
    .greendex-works-header h2 {
        font-size: 1.8rem;
    }
}

/* ==========================================================================
   SEÇÃO: CONTATO GREENDEX (NOVO LAYOUT COM GLOW)
   ========================================================================== */

.greendex-contact-section {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 100px 20px;
    /* Fundo escuro com o 'glow' (brilho ciano) vindo da esquerda igual à imagem */
    background: radial-gradient(circle at 0% 50%, rgba(20, 100, 110, 0.45) 0%, #003d4a 45%, #030b0e 100%);
}

.greendex-contact-section .container {
    max-width: 1100px;
    width: 100%;
    display: flex;
    gap: 80px;
    align-items: center;
}

/* --- LADO ESQUERDO: TEXTOS --- */
.greendex-contact-left {
    flex: 1;
    text-align: center;
    /* Centraliza o texto no bloco esquerdo */
}

.greendex-contact-left h1 {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--white, #ffffff);
    line-height: 1.3;
    margin-bottom: 30px;
}

.greendex-contact-left p {
    font-size: 1.05rem;
    color: #e2e8f0;
    line-height: 1.6;
}

/* --- LADO DIREITO: FORMULÁRIO --- */
.greendex-contact-right {
    flex: 1;
    background-color: #050a0e;
    /* Fundo do card super escuro */
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.03);
    /* Borda muito sutil */
}

.greendex-form-group {
    margin-bottom: 20px;
}

.greendex-form-group label {
    display: block;
    color: var(--white, #ffffff);
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.greendex-form-group input,
.greendex-form-group select {
    width: 100%;
    background-color: #020508;
    /* Interior do input quase totalmente preto */
    border: 1px solid #1a202c;
    color: var(--white, #ffffff);
    padding: 12px 15px;
    border-radius: 6px;
    outline: none;
    font-size: 0.95rem;
    transition: border-color 0.3s ease;
}

.greendex-form-group input::placeholder {
    color: #718096;
    /* Cinza dos placeholders */
}

/* Efeito ao focar no campo (Borda Verde Limão) */
.greendex-form-group input:focus,
.greendex-form-group select:focus,
.greendex-phone-input:focus-within {
    border-color: var(--primary-green, #B2D235);
}

/* Select com setinha customizada */
.greendex-form-group select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23718096%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 16px;
}

/* Input de Telefone Flexível */
.greendex-phone-input {
    display: flex;
    background-color: #020508;
    border: 1px solid #1a202c;
    border-radius: 6px;
    transition: border-color 0.3s ease;
    overflow: hidden;
}

.greendex-country-code {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 15px;
    background-color: #050a0e;
    border-right: 1px solid #1a202c;
}

.greendex-phone-input input {
    border: none;
    border-radius: 0;
    background: transparent;
}

/* Checkbox de Privacidade */
.greendex-form-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 25px 0;
}

.greendex-form-checkbox input[type="checkbox"] {
    margin-top: 3px;
    width: 18px;
    height: 18px;
    accent-color: var(--primary-green, #B2D235);
    cursor: pointer;
}

.greendex-form-checkbox label {
    font-size: 0.85rem;
    color: #a0aec0;
    line-height: 1.4;
    cursor: pointer;
}

.greendex-form-checkbox label a {
    color: var(--white, #ffffff);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Botão Enviar Verde Limão */
.btn-greendex-submit {
    width: 100%;
    background-color: var(--primary-green, #B2D235);
    color: #001212;
    padding: 14px;
    border: none;
    border-radius: 6px;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s, background-color 0.3s;
}

.btn-greendex-submit:hover {
    background-color: #a0b82d;
    /* Verde um pouquinho mais escuro */
    transform: translateY(-2px);
}

/* =========================================
   RESPONSIVIDADE (Tablets e Celulares)
   ========================================= */

@media (max-width: 900px) {
    .greendex-contact-section .container {
        flex-direction: column;
        gap: 50px;
    }

    .greendex-contact-left {
        padding: 0 15px;
    }

    .greendex-contact-right {
        width: 100%;
        padding: 30px 20px;
    }
}

/* ==========================================================================
   SEÇÃO: FAQ GREENDEX (PERGUNTAS FREQUENTES)
   ========================================================================== */

.greendex-faq-section {
    background-color: var(--white, #ffffff);
    padding: 100px 0;
}

.greendex-faq-layout {
    display: flex;
    align-items: flex-start;
    gap: 60px;
    max-width: 1200px;
    margin: 0 auto;
}

/* --- Lado Esquerdo: Textos --- */
.greendex-faq-left {
    flex: 1;
    max-width: 400px;
    /* Faz o título rolar grudadinho na tela enquanto o usuário desce os acordeões */
    position: sticky;
    top: 120px;
}

.greendex-faq-tag {
    display: block;
    font-size: 0.95rem;
    letter-spacing: 4px;
    color: #1b9e85;
    /* Verde Esmeralda */
    margin-bottom: 15px;
    text-transform: uppercase;
    font-weight: 700;
}

.greendex-faq-title {
    font-size: 2.8rem;
    font-weight: 800;
    color: #003d4a;
    /* Azul Petróleo Escuro */
    line-height: 1.1;
    margin-bottom: 25px;
    letter-spacing: -0.5px;
}

.greendex-faq-desc {
    font-size: 1.05rem;
    color: #4b5563;
    /* Cinza médio para leitura */
    line-height: 1.6;
}

/* --- Lado Direito: Acordeões --- */
.greendex-faq-right {
    flex: 1.5;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.greendex-faq-item {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    background-color: #f8fafc;
    /* Fundo cinza super clarinho */
    border: 1px solid #e2e8f0;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.greendex-faq-item:hover {
    border-color: #cbd5e1;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

/* Estilo da Pergunta (Botão clicável) */
.greendex-faq-question {
    font-weight: 700;
    font-size: 1.05rem;
    color: #003d4a;
    /* Azul Petróleo */
    padding: 22px 25px;
    cursor: pointer;
    list-style: none;
    /* Esconde a setinha nativa padrão do HTML */
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
    transition: background-color 0.3s ease;
}

/* Setinha customizada (Sinal de + e -) */
.greendex-faq-question::after {
    content: '+';
    font-size: 1.5rem;
    font-weight: 400;
    color: #1b9e85;
    /* Verde Esmeralda */
    margin-left: 15px;
    transition: transform 0.3s ease;
}

/* Quando o acordeão está aberto */
.greendex-faq-item[open] .greendex-faq-question::after {
    content: '−';
    /* Muda para sinal de menos */
    transform: rotate(180deg);
}

.greendex-faq-question::-webkit-details-marker {
    display: none;
    /* Esconde seta no Safari */
}

/* Fundo azuladinho claro quando a pergunta está expandida */
.greendex-faq-item[open] .greendex-faq-question {
    background-color: #eafafc;
    border-bottom: 1px solid #d1f1f7;
}

/* Estilo da Resposta */
.greendex-faq-answer {
    padding: 20px 25px 25px 25px;
    background-color: #ffffff;
    animation: greendexFaqFadeIn 0.35s ease-out;
    /* Animação suave ao abrir */
}

.greendex-faq-answer p {
    color: #4b5563;
    /* Cinza de leitura */
    line-height: 1.6;
    font-size: 0.95rem;
    margin: 0;
}

@keyframes greendexFaqFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

/* =========================================
   RESPONSIVIDADE (Tablets e Celulares)
   ========================================= */

@media (max-width: 992px) {
    .greendex-faq-layout {
        flex-direction: column;
        /* Empilha texto em cima, acordeão embaixo */
        gap: 40px;
    }

    .greendex-faq-left {
        max-width: 100%;
        position: static;
        /* Remove o efeito sticky no mobile */
        text-align: center;
        /* Centraliza o título */
    }

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

@media (max-width: 768px) {
    .greendex-faq-section {
        padding: 60px 0;
    }

    .greendex-faq-question {
        font-size: 1rem;
        padding: 18px 20px;
    }

    .greendex-faq-answer {
        padding: 18px 20px 20px 20px;
    }
}

/* ==========================================
   BANNER DE SUCESSO INLINE
========================================== */
.success-banner-inline {
    background-color: #ecfdf5;
    /* Verde bem claro */
    border-left: 4px solid #10b981;
    /* Verde vibrante */
    padding: 24px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    animation: fadeIn 0.4s ease-out;
}

.success-banner-inline .icon-wrapper {
    background-color: #10b981;
    color: #ffffff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.success-banner-inline h3 {
    color: #065f46;
    margin: 0 0 4px 0;
    font-size: 1.25rem;
    font-weight: 700;
}

.success-banner-inline p {
    color: #047857;
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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