: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;

}

.card-tags-bottom {
    margin-top: auto;
    /* O truque! Empurra as tags para o final do espaço disponível */
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    /* Espaço entre as tags */
    padding-top: 16px;
    /* Um respiro entre o resumo e as tags */
}

.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.8rem;
    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: #F9FDFE;
}

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

/* Hero Section (Cabeçalho escuro) */
.artigo-hero {
    position: relative;
    background-size: cover;
    background-position: center;
    background-color: #041519;
    padding: 100px 0 80px 0;
    color: #fff;
}

.artigo-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(11, 30, 45, 0.85), rgba(11, 30, 45, 0.85));
    z-index: 1;
}

.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: 500px;
    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: white;
    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%); */
    background-image: url('/img/midia-kit/Hero.webp');
    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;
    min-height: auto;
    /* Remove os 320px anteriores para a altura não sobrar */
    min-width: 220px;
    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('/img/guia-bess/new-background.webp') center/cover no-repeat;
    padding: 120px 0;
    color: #ffffff;
}

.sed-hero-section-new {
    /* 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('/img/sed/ESTUDOSEDSETEMBRO.png') 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: 700;
    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-sponsors-grid-2 {
    display: grid;
    grid-template-columns: repeat(4, 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: 700;
    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: 700;
    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: 700;
    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: 700px;
}

.hero-update-text h2 {
    font-size: 2.2rem;
    font-weight: 700;
    /* 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;
}

.lrcap-greener-summit-2026 {
    /* 1. REGLA DE CORREÇÃO DA IMAGEM DE FUNDO */
    /* Substitua pelo caminho da sua imagem */
    background-image: url('/img/events/Imagens/Eventos/Q5A2391.webp') !important;

    /* 2. APLICAÇÃO DOS FILTROS (A Mágica Acontece Aqui) */
    background-color: rgba(10, 25, 30, 0.45) !important;
    /* Cor sólida de fallback (Teal escuro) */
    background-blend-mode: overlay !important;
    /* Mistura a imagem com a cor sólida */
    background-size: cover !important;
    /* Estica a imagem para cobrir o fundo */
    background-position: center !important;
    /* Centraliza a imagem */
}

.greener-summit-eventos-2026 {
    background-image: url('/img/events/Imagens/Eventos/Q5A2391.webp') !important;
    background-color: rgba(10, 25, 30, 0.65) !important;
    background-blend-mode: overlay !important;
    background-size: cover !important;
    background-position: center !important;

}

/* 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: 700;
    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: 700;
    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: 700;
    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: 700;
    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: 700;
    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: 700;
    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: 700;
    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: 700;
    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;

    /* _q5a3180 1 */

    background: linear-gradient(360deg, rgba(7, 35, 41, 0.2) -57.74%, rgba(5, 45, 53, 0.2) 45.12%, rgba(226, 241, 245, 0.2) 96.19%), linear-gradient(248.99deg, #E2F1F5 -39.74%, #041519 92.48%);


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

    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: 1000px;
    /* 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.5rem;
    font-weight: 600;
    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);
}

.sed-updated-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: #0A1C1D;
    /* Fundo verde escuro/azulado da imagem */
    color: #E2ECEB;
    /* Texto claro */
    padding: 12px 20px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 500;
    margin-top: 16px;
    /* Espaço entre o parágrafo e o banner */
    width: fit-content;
}

.sed-updated-badge svg {
    flex-shrink: 0;
    /* Impede que o ícone esprema em telas menores */
}

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

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

/* =========================================
   SEÇÃO: PRÓXIMO EVENTO (CONEXÃO BESS)
   ========================================= */
.prox-evento-section {
    background-color: #f2f9f9;
    /* Fundo ciano super claro */
    padding: 100px 0;
}

.prox-evento-layout {
    display: flex;
    align-items: center;
    gap: 80px;
    max-width: 1200px;
    margin: 0 auto;
}

/* --- LADO DIREITO: TEXTOS --- */
.prox-evento-content {
    flex: 1;
}

.prox-evento-tagline {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    color: #004b5a;
    /* Teal escuro da paleta */
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 15px;
}

.prox-evento-title {
    font-size: 2.5rem;
    font-weight: 600;
    color: #001212;
    line-height: 1.2;
    margin-bottom: 25px;
    letter-spacing: -0.5px;
}

.prox-evento-desc {
    font-size: 1.15rem;
    color: #334155;
    line-height: 1.6;
    margin-bottom: 35px;
    max-width: 600px;
}

.prox-evento-meta {
    display: flex;
    gap: 30px;
    margin-bottom: 40px;
}

.prox-evento-meta span {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.05rem;
    color: #004b5a;
    font-weight: 500;
}

.prox-evento-meta svg {
    width: 22px;
    height: 22px;
    stroke: #004b5a;
}

/* Botão Verde Limão */
.btn-prox-evento {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: #b2d235;
    /* O Verde Limão padrão da Greener */
    color: #001212;
    padding: 14px 35px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1.05rem;
    text-decoration: none;
    transition: transform 0.2s ease, filter 0.3s ease;
}

.btn-prox-evento:hover {
    transform: translateY(-2px);
    filter: brightness(0.95);
}

/* --- LADO ESQUERDO: CARD --- */
.prox-evento-card-wrapper {
    flex: 1;
    display: flex;
    justify-content: flex-start;
}

.card-evento-detalhado {
    background-color: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    width: 100%;
    max-width: 450px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06);
    border: 1px solid #e2e8f0;
}

/* Header Escuro do Card */
.card-evento-header {
    background-color: #1a2b30;
    /* Fundo escuro azul-petróleo */
    padding: 30px;
    color: #ffffff;
    position: relative;
}

.card-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
}

.card-header-top img {
    height: 22px;
    object-fit: contain;
}

.card-badge-edu {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #ffffff;
}

.card-header-mid span {
    font-size: 0.85rem;
    color: #a0aec0;
}

.card-header-mid h3 {
    font-size: 1.4rem;
    margin: 5px 0 10px 0;
    font-weight: 700;
}

.card-header-mid p {
    font-size: 0.8rem;
    color: #cbd5e1;
    line-height: 1.4;
    max-width: 200px;
}

.card-header-bottom {
    margin-top: 40px;
    display: flex;
    justify-content: flex-end;
}

.card-date-box {
    text-align: right;
}

.card-date-box .date {
    font-size: 0.75rem;
    color: #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin-bottom: 5px;
    font-weight: 500;
}

.card-date-box strong {
    display: block;
    font-size: 0.9rem;
    color: #ffffff;
    margin-bottom: 2px;
}

.card-date-box span {
    font-size: 0.8rem;
    color: #9ca3af;
}

/* Body Claro do Card */
.card-evento-body {
    padding: 25px 30px;
}

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

.card-tags span {
    background-color: #f0f7f9;
    color: #004b5a;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

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

.card-evento-body p {
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.5;
    margin-bottom: 25px;
    /* Truque do CSS para limitar a 3 linhas com '...' no final */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-authors-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #e2e8f0;
    padding-top: 20px;
}

.author-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.author-item img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
}

.author-info strong {
    display: block;
    font-size: 0.8rem;
    color: #001212;
    line-height: 1.2;
}

.author-info span {
    font-size: 0.75rem;
    color: #64748b;
}

.btn-assistir {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.85rem;
    color: #004b5a;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s ease;
    width: 110px;
}

.btn-assistir:hover {
    color: #001212;
}

/* =========================================
   RESPONSIVIDADE (Tablets e Celulares)
   ========================================= */
@media (max-width: 992px) {
    .prox-evento-layout {
        /* No tablet, o texto fica em cima e o card embaixo */
        flex-direction: column-reverse;
        gap: 50px;
    }

    .prox-evento-content {
        text-align: center;
    }

    .prox-evento-desc {
        margin: 0 auto 35px auto;
    }

    .prox-evento-meta {
        justify-content: center;
    }

    .prox-evento-card-wrapper {
        justify-content: center;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .prox-evento-section {
        padding: 60px 20px;
    }

    .prox-evento-title {
        font-size: 2rem;
    }

    .prox-evento-meta {
        flex-direction: column;
        gap: 15px;
        align-items: center;
    }

    .card-authors-row {
        flex-wrap: wrap;
        gap: 15px;
    }
}

/* =========================================
   SEÇÃO: EVENTO FLAGSHIP (SUMMIT)
   ========================================= */

.flagship-section {
    /* Gradiente radial escuro focado no verde petróleo/floresta */
    background: radial-gradient(circle at top left, #06382c 0%, #020b0e 100%);
    padding: 100px 0;
    color: var(--white, #ffffff);
}

/* --- Cabeçalho (Topo) --- */
.flagship-header {
    max-width: 800px;
    margin-bottom: 50px;
}

.flagship-tag {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--primary-color-2, #cddc39);
    /* Verde limão */
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.flagship-title {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 20px;
    color: var(--white, #ffffff);
}

.flagship-desc {
    font-size: 1.15rem;
    color: #e2e8f0;
    /* Branco acinzentado suave */
    line-height: 1.6;
}

/* --- Layout Dividido --- */
.flagship-layout {
    display: flex;
    align-items: center;
    gap: 60px;
}

/* --- Esquerda: Imagem e Overlay --- */
.flagship-image-wrapper {
    flex: 1;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.flagship-image-wrapper img {
    width: 100%;
    height: 100%;
    min-height: 400px;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.flagship-image-wrapper:hover img {
    transform: scale(1.03);
    /* Efeito de zoom muito subtil ao passar o rato */
}

/* Degrade escuro por cima da imagem (parte inferior) */
.flagship-image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, transparent 100%);
    padding: 40px 30px 30px 30px;
    display: flex;
    flex-direction: column;
}

.overlay-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--white, #ffffff);
    margin-bottom: 5px;
}

.overlay-text {
    font-size: 1rem;
    color: #cbd5e1;
}

/* --- Direita: Textos e Estatísticas --- */
.flagship-content {
    flex: 1.1;
    /* Dá um bocadinho mais de espaço à área de texto */
}

.flagship-subtag {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--primary-color-2, #cddc39);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.flagship-subtitle {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 20px;
    color: var(--white, #ffffff);
}

.flagship-subdesc {
    font-size: 1.05rem;
    color: #cbd5e1;
    line-height: 1.6;
    margin-bottom: 40px;
}

/* --- Grelha de Estatísticas --- */
.flagship-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}

.flagship-stat {
    display: flex;
    flex-direction: column;
}

.flagship-stat strong {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--primary-color-2, #cddc39);
    /* Números em verde limão */
    line-height: 1.1;
    margin-bottom: 8px;
}

.flagship-stat span {
    font-size: 0.85rem;
    color: #e2e8f0;
    font-weight: 500;
}

/* --- Botão CTA --- */
.btn-flagship {
    display: inline-block;
    background-color: var(--primary-color-2, #cddc39);
    color: #001212;
    /* Texto escuro para contraste */
    padding: 14px 32px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    transition: transform 0.2s ease, filter 0.3s ease;
}

.btn-flagship:hover {
    transform: translateY(-3px);
    filter: brightness(0.95);
    /* Escurece ligeiramente no hover */
}

/* =========================================
   RESPONSIVIDADE (Tablets e Telemóveis)
   ========================================= */

@media (max-width: 1024px) {
    .flagship-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 2 colunas de estatísticas no tablet */
        gap: 30px;
    }
}

@media (max-width: 992px) {
    .flagship-layout {
        flex-direction: column;
        /* Coloca a imagem por cima e o texto por baixo */
        gap: 50px;
    }

    .flagship-image-wrapper {
        width: 100%;
    }

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

@media (max-width: 768px) {
    .flagship-section {
        padding: 70px 20px;
    }

    .flagship-title {
        font-size: 1.8rem;
    }

    .flagship-subtitle {
        font-size: 1.6rem;
    }

    .flagship-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .flagship-stat strong {
        font-size: 1.8rem;
    }
}

/* =========================================
   SEÇÃO: MEET & GREENER (FORMATO INTIMISTA)
   ========================================= */

.meet-greener-section {
    background-color: #f2f9f9;
    /* Fundo ciano/gelo super claro */
    padding: 100px 0;
}

/* --- Cabeçalho --- */
.meet-header {
    max-width: 650px;
    /* Limita a largura para o texto quebrar de forma elegante */
    margin-bottom: 50px;
}

.meet-tag {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: #008fa3;
    /* Teal/Azul esverdeado */
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.meet-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #001212;
    line-height: 1.2;
    margin-bottom: 20px;
    letter-spacing: -0.5px;
}

.meet-desc {
    font-size: 1.15rem;
    color: #334155;
    line-height: 1.6;
}

/* --- Grelha de Cards --- */
.meet-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 50px;
}

/* --- Estilo Base do Card --- */
.meet-card {
    border-radius: 12px;
    overflow: hidden;
    min-height: 420px;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.meet-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

/* --- Card Sólido Escuro --- */
.meet-card-dark {
    background-color: #0a2525;
    /* Verde/Teal super escuro */
    padding: 40px 35px;
    justify-content: space-between;
}

.meet-top-tag {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--primary-green, #b2d235);
    /* Verde limão */
    letter-spacing: 1px;
    text-transform: uppercase;
}

.meet-card-content {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.meet-card-dark .meet-card-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.3;
    margin-bottom: 12px;
}

.meet-card-dark .meet-card-subtitle {
    font-size: 0.9rem;
    color: #cbd5e1;
    margin-bottom: 25px;
}

/* Badge com borda (Em Breve) */
.meet-badge-outline {
    display: inline-block;
    border: 1px solid rgba(178, 210, 53, 0.4);
    background-color: rgba(178, 210, 53, 0.1);
    color: var(--primary-green, #b2d235);
    padding: 8px 24px;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 600;
}

/* --- Cards com Imagem --- */
.meet-card-img {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    justify-content: flex-end;
    /* Empurra o overlay para o fundo */
}

/* Degradê escuro sobre a imagem */
.meet-card-overlay {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.5) 60%, transparent 100%);
    padding: 50px 35px 35px 35px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

.meet-card-img .meet-card-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.3;
    margin-bottom: 12px;
}

.meet-card-img .meet-card-subtitle {
    font-size: 0.85rem;
    color: #e2e8f0;
    margin: 0;
}

/* Badge sólida verde oliva */
.meet-badge-solid {
    background-color: #6a7518;
    /* Tom verde oliva escurecido igual ao print */
    color: #ffffff;
    padding: 6px 18px;
    border-radius: 30px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 15px;
}

/* --- Footer (Botão Saiba Mais) --- */
.meet-footer {
    display: flex;
    justify-content: flex-end;
    /* Alinha o botão à direita */
}

.btn-meet-saiba {
    display: inline-block;
    background-color: var(--primary-green, #b2d235);
    color: #001212;
    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-meet-saiba:hover {
    transform: translateY(-2px);
    filter: brightness(0.95);
}

/* =========================================
   RESPONSIVIDADE (Tablets e Telemóveis)
   ========================================= */

@media (max-width: 1024px) {
    .meet-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 2 colunas em tablets */
    }
}

@media (max-width: 768px) {
    .meet-greener-section {
        padding: 70px 20px;
    }

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

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

    .meet-footer {
        justify-content: center;
        /* Centraliza o botão no mobile */
    }
}

/* =========================================
   SEÇÃO: WEBINARES GREENER
   ========================================= */

.webinares-section {
    background-color: #ffffff;
    padding: 100px 0;
}

/* --- Cabeçalho --- */
.webinares-header {
    text-align: center;
    max-width: 750px;
    margin: 0 auto 60px auto;
}

.webinares-tag {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: #008fa3;
    /* Teal/Azul esverdeado */
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.webinares-title {
    font-size: 2.8rem;
    font-weight: 700;
    color: #001212;
    margin-bottom: 20px;
    letter-spacing: -0.5px;
}

.webinares-desc {
    font-size: 1.15rem;
    color: #334155;
    line-height: 1.6;
}

/* --- Grelha de Cartões --- */
.webinares-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-bottom: 50px;
}

/* Estrutura do Cartão */
.webinar-card {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.webinar-card-img {
    width: 100%;
    height: 260px;
    /* Altura fixa para a miniatura do webinar */
}

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

.webinar-card-body {
    padding: 30px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.webinar-tags {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.webinar-tags span {
    background-color: #f0f7f9;
    color: #004b5a;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.webinar-card-title {
    font-size: 1.25rem;
    color: #001212;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 15px;
}

.webinar-card-text {
    font-size: 0.9rem;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 30px;
    flex-grow: 1;
    /* Empurra os autores para o fundo */

    /* Truque Webkit para limitar a 3 linhas */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Área dos Autores */
.webinar-authors {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #e2e8f0;
    padding-top: 25px;
    flex-wrap: wrap;
    gap: 15px;
}

/* Reutilização e reforço das classes de autor */
.webinar-authors .author-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.webinar-authors .author-item img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
}

.webinar-authors .author-info strong {
    display: block;
    font-size: 0.8rem;
    color: #001212;
    line-height: 1.2;
}

.webinar-authors .author-info span {
    font-size: 0.75rem;
    color: #64748b;
}

.webinar-authors .btn-assistir {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.85rem;
    color: #004b5a;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s ease;
    margin-left: auto;
    /* Empurra o botão Assistir totalmente para a direita */
}

.webinar-authors .btn-assistir:hover {
    color: #001212;
}

/* --- Botão Footer (Outline) --- */
.webinares-footer {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.btn-outline-webinar {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: transparent;
    color: #004b5a;
    /* Teal escuro */
    border: 1px solid #004b5a;
    padding: 12px 30px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-outline-webinar:hover {
    background-color: #004b5a;
    color: #ffffff;
    transform: translateY(-2px);
}

/* =========================================
   RESPONSIVIDADE (Tablets e Telemóveis)
   ========================================= */

@media (max-width: 992px) {
    .webinares-grid {
        grid-template-columns: 1fr;
        /* 1 coluna em tablets e ecrãs menores */
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 768px) {
    .webinares-section {
        padding: 70px 20px;
    }

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

    .webinar-card-img {
        height: 200px;
    }

    .webinar-authors {
        flex-direction: column;
        align-items: flex-start;
    }

    .webinar-authors .btn-assistir {
        margin-left: 0;
        margin-top: 10px;
    }
}

/* =========================================
   SEÇÃO: PARCERIAS (LOGOS E PATROCÍNIO)
   ========================================= */

.parcerias-section {
    background-color: #051a1f;
    /* Fundo escuro azul-petróleo inspirado na imagem */
    padding: 100px 0;
}

.parcerias-header {
    text-align: center;
    margin-bottom: 60px;
}

.parcerias-tag {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--white, #ffffff);
    letter-spacing: 2px;
    text-transform: uppercase;
}

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

/* --- Lado Esquerdo: Textos --- */
.parcerias-content {
    flex: 1;
    max-width: 550px;
}

.parcerias-content h2 {
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--white, #ffffff);
    line-height: 1.2;
    margin-bottom: 25px;
    letter-spacing: -0.5px;
}

.parcerias-content p {
    font-size: 1.1rem;
    color: #cbd5e1;
    /* Cinza claro azulado */
    line-height: 1.6;
    margin-bottom: 25px;
}

.parcerias-content p.parcerias-highlight {
    color: #74cfe2;
    /* Tom de ciano/azul claro para o texto de chamada */
    margin-bottom: 40px;
}

.btn-patrocinador {
    display: inline-block;
    background-color: var(--primary-green, #B2D235);
    /* Verde limão da Greener */
    color: #001212;
    /* Texto escuro para contraste */
    padding: 14px 32px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    transition: transform 0.2s ease, filter 0.3s ease;
}

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

/* --- Lado Direito: Card de Logos --- */
.parcerias-logos-wrapper {
    flex: 1.2;
    /* Ocupa um pouco mais de espaço visual */
    display: flex;
    justify-content: flex-end;
}

.parcerias-logos-card {
    background-color: var(--white, #ffffff);
    border-radius: 12px;
    padding: 50px 40px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    width: 100%;

    /* Flexbox configurado para alinhar logos em grelha e centralizar linhas incompletas */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 50px 30px;
    /* 50px vertical, 30px horizontal */
}

.parcerias-logos-card img {
    /* Define o tamanho máximo de cada logo. Cabem 3 por linha confortavelmente. */
    flex: 0 0 calc(33.333% - 30px);
    max-width: 130px;
    max-height: 45px;
    object-fit: contain;
    /* Transição suave caso queira adicionar um efeito hover nas logos depois */
    transition: transform 0.2s ease;
}

.parcerias-logos-card img:hover {
    transform: scale(1.05);
}

/* =========================================
   RESPONSIVIDADE (Tablets e Telemóveis)
   ========================================= */

@media (max-width: 1024px) {
    .parcerias-layout {
        flex-direction: column;
        text-align: center;
        gap: 50px;
    }

    .parcerias-content {
        max-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .parcerias-logos-wrapper {
        justify-content: center;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .parcerias-section {
        padding: 70px 0;
    }

    .parcerias-content h2 {
        font-size: 2.2rem;
    }

    .parcerias-logos-card {
        padding: 40px 20px;
        gap: 40px 20px;
    }

    .parcerias-logos-card img {
        /* No telemóvel, forçamos 2 logos por linha */
        flex: 0 0 calc(50% - 20px);
        max-width: 110px;
        max-height: 35px;
    }
}

/* =========================================
   SEÇÃO: GREENER SUMMIT HERO & STATS
   ========================================= */

.summit-hero-section {
    position: relative;
    /* Substitua URL_DA_IMAGEM.jpg pelo caminho real da sua foto de fundo */
    background-image: url('URL_DA_IMAGEM.jpg');
    background-size: cover;
    background-position: center;
    /* Espaço em cima para o menu e em baixo para a secção seguinte */
    padding: 120px 0 60px 0;
    color: var(--white, #ffffff);
}

.summit-hero-overlay {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    /* Gradiente que vai de um azul petróleo/escuro no topo para um verde escuro na base */
    background-image: linear-gradient(to bottom, rgba(5, 20, 25, 0.85) 0%, rgba(5, 20, 25, 0.7) 60%, rgba(3, 40, 20, 0.95) 100%), url("../img/events/Imagens/Summit/MG_4132\ \(1\).webp");
    z-index: 1;
}

/* Coloca o conteúdo acima do overlay escuro */
.summit-hero-section .relative-z {
    position: relative;
    z-index: 2;
}

/* --- TEXTOS E BOTÕES --- */
.summit-hero-content {
    max-width: 800px;
    margin-bottom: 80px;
    /* Empurra as estatísticas para baixo */
}

.summit-breadcrumb {
    font-size: 0.9rem;
    color: #74cfe2;
    /* Ciano claro */
    margin-bottom: 20px;
    font-weight: 500;
}

.summit-hero-title {
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--white, #ffffff);
    line-height: 1.1;
    margin-bottom: 20px;
    letter-spacing: -1px;
}

.summit-hero-subtitle {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--white, #ffffff);
    line-height: 1.4;
    margin-bottom: 20px;
}

.summit-hero-desc {
    font-size: 1.05rem;
    color: #cbd5e1;
    /* Branco ligeiramente acinzentado */
    line-height: 1.6;
    margin-bottom: 35px;
    max-width: 700px;
}

.summit-hero-actions {
    display: flex;
    gap: 15px;
    align-items: center;
    flex-wrap: wrap;
}

.btn-summit-primary {
    background-color: var(--primary-green, #b2d235);
    color: #001212;
    padding: 14px 32px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    transition: transform 0.2s ease, filter 0.3s ease;
}

.btn-summit-primary:hover {
    transform: translateY(-2px);
    filter: brightness(0.95);
}

.btn-summit-secondary {
    background-color: rgba(20, 20, 20, 0.5);
    /* Fundo escuro translúcido */
    color: var(--white, #ffffff);
    padding: 14px 32px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.btn-summit-secondary:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
}

/* --- ESTATÍSTICAS (GRID) --- */
.summit-stats-row {
    display: grid;
    /* Grelha perfeitamente dividida em 6 colunas para computadores */
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
    /* Uma linha muito subtil a separar as estatísticas do conteúdo superior */
    padding-top: 40px;
}

.summit-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.summit-stat-number {
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--primary-green, #b2d235);
    /* Verde limão em destaque */
    line-height: 1.1;
    margin-bottom: 10px;
}

.summit-stat-label {
    font-size: 0.9rem;
    color: #cbd5e1;
    line-height: 1.4;
    font-weight: 500;
}

/* =========================================
   RESPONSIVIDADE (Tablets e Telemóveis)
   ========================================= */

@media (max-width: 1024px) {
    .summit-stats-row {
        /* No tablet, partimos as estatísticas em 2 linhas de 3 */
        grid-template-columns: repeat(3, 1fr);
        gap: 40px 20px;
    }
}

@media (max-width: 768px) {
    .summit-hero-section {
        padding: 80px 0 50px 0;
    }

    .summit-hero-title {
        font-size: 2.4rem;
    }

    .summit-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-summit-primary,
    .btn-summit-secondary {
        text-align: center;
    }

    .summit-stats-row {
        /* No telemóvel, partimos as estatísticas em 3 linhas de 2 */
        grid-template-columns: repeat(2, 1fr);
    }

    .summit-stat-number {
        font-size: 2.2rem;
    }
}

/* =========================================
   SEÇÃO: SOBRE O EVENTO (FICHA TÉCNICA)
   ========================================= */

.sobre-evento-section {
    background-color: var(--white, #ffffff);
    padding: 100px 0;
}

.sobre-evento-layout {
    display: flex;
    align-items: stretch;
    gap: 80px;
    max-width: 1200px;
    margin: 0 auto;
}

/* --- Lado Esquerdo: Textos --- */
.sobre-evento-text {
    flex: 1.2;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sobre-tag {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--primary-green, #b2d235);
    /* Verde limão da marca */
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 20px;
}

.sobre-evento-text h2 {
    font-size: 2.6rem;
    font-weight: 700;
    color: #001212;
    line-height: 1.2;
    margin-bottom: 35px;
    letter-spacing: -0.5px;
}

.sobre-evento-text p {
    font-size: 1.05rem;
    color: #334155;
    line-height: 1.7;
    margin-bottom: 25px;
}

.sobre-evento-text p:last-child {
    margin-bottom: 0;
}

/* --- Lado Direito: Card Escuro --- */
.sobre-evento-card {
    flex: 0.8;
    background-color: #06151a;
    /* Azul petróleo super escuro (padrão Greener) */
    border-radius: 12px;
    padding: 50px 40px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

.card-info-block {
    display: flex;
    flex-direction: column;
}

.card-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--primary-green, #b2d235);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.card-label-gray {
    font-size: 0.8rem;
    font-weight: 600;
    color: #cbd5e1;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.card-highlight-large {
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--primary-green, #b2d235);
    line-height: 1;
    margin-bottom: 8px;
}

.card-highlight-medium {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--primary-green, #b2d235);
    margin-bottom: 8px;
}

.card-highlight-small {
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--primary-green, #b2d235);
    margin-bottom: 10px;
    line-height: 1.4;
}

.card-subtext {
    font-size: 0.85rem;
    color: #94a3b8;
    /* Cinza claro */
}

.card-divider {
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    /* Linha fina e subtil */
    margin: 25px 0;
}

/* Sub-card do Tema */
.card-theme-box {
    margin-top: 30px;
    background-color: rgba(178, 210, 53, 0.05);
    /* Fundo com 5% de verde limão */
    border: 1px solid rgba(178, 210, 53, 0.2);
    /* Borda com 20% de verde limão */
    border-radius: 8px;
    padding: 25px;
    display: flex;
    flex-direction: column;
}

/* =========================================
   RESPONSIVIDADE (Tablets e Celulares)
   ========================================= */

@media (max-width: 992px) {
    .sobre-evento-layout {
        flex-direction: column;
        /* O texto fica em cima, o card em baixo */
        gap: 50px;
    }

    .sobre-evento-text {
        text-align: center;
    }

    .sobre-tag {
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 768px) {
    .sobre-evento-section {
        padding: 60px 20px;
    }

    .sobre-evento-text h2 {
        font-size: 2.2rem;
    }

    .sobre-evento-card {
        padding: 40px 25px;
        /* Reduz o padding interno do card em ecrãs muito pequenos */
    }
}

/* =========================================
   SEÇÃO: PROGRAMAÇÃO SUMMIT (O QUE ESPERAR)
   ========================================= */

.programacao-summit-section {
    background-color: #061316;
    /* Tom super escuro, quase preto esverdeado (idêntico à imagem) */
    padding: 100px 0;
    color: var(--white, #ffffff);
}

/* --- Cabeçalho --- */
.programacao-header {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 60px auto;
}

.programacao-tag {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--primary-green, #B2D235);
    /* Verde limão da Greener */
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.programacao-header h2 {
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--white, #ffffff);
    margin-bottom: 20px;
    letter-spacing: -0.5px;
}

.programacao-header p {
    font-size: 1.05rem;
    color: #cbd5e1;
    /* Cinza claro */
    line-height: 1.6;
}

/* --- Grelha de Cartões --- */
.programacao-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-bottom: 50px;
}

/* Estilo Base do Cartão */
.programacao-card {
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    /* Borda fina semi-transparente */
    border-radius: 8px;
    padding: 35px 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.programacao-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Badges (Pílulas superiores) */
.prog-badge {
    display: inline-block;
    border: 1px solid #556b2f;
    /* Borda verde oliva escuro */
    background-color: rgba(85, 107, 47, 0.1);
    color: #a0b82d;
    /* Verde oliva amarelado */
    padding: 4px 16px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 30px;
}

/* Indicador de Tempo (Ex: DIA 1 - MANHÃ) */
.prog-time {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #74cfe2;
    /* Azul ciano claro */
    letter-spacing: 1px;
    margin-bottom: 12px;
}

/* Título e Texto do Cartão */
.programacao-card h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--white, #ffffff);
    margin-bottom: 15px;
    line-height: 1.4;
}

.programacao-card p {
    font-size: 0.9rem;
    color: #94a3b8;
    /* Cinza médio/claro */
    line-height: 1.6;
    margin: 0;
}

/* --- Cartão Especial (Sempre Aberto) --- */
.programacao-card.card-special {
    background-color: rgba(178, 210, 53, 0.03);
    /* Fundo com levíssima cor verde */
    border-color: rgba(178, 210, 53, 0.3);
    /* Borda verde limão suave */
}

.programacao-card.card-special:hover {
    border-color: rgba(178, 210, 53, 0.6);
}

.special-badge {
    border-color: #7a8c1f;
    color: var(--primary-green, #B2D235);
}

.special-time {
    color: var(--primary-green, #B2D235);
    /* Verde limão ao invés do ciano */
}

/* --- Botão Footer --- */
.programacao-footer {
    text-align: center;
}

.btn-programacao-integra {
    display: inline-block;
    background-color: var(--primary-green, #B2D235);
    color: #001212;
    padding: 12px 40px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.btn-programacao-integra:hover {
    transform: translateY(-2px);
    filter: brightness(0.95);
}

/* =========================================
   RESPONSIVIDADE (Tablets e Telemóveis)
   ========================================= */

@media (max-width: 1024px) {
    .programacao-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 2 colunas no tablet */
    }
}

@media (max-width: 768px) {
    .programacao-summit-section {
        padding: 70px 20px;
    }

    .programacao-header h2 {
        font-size: 2rem;
    }

    .programacao-grid {
        grid-template-columns: 1fr;
        /* 1 coluna no telemóvel */
        gap: 20px;
    }

    .programacao-card {
        padding: 25px 20px;
    }
}

/* =========================================
   SEÇÃO: EDIÇÃO ANTERIOR (NÚMEROS)
   ========================================= */

.summit-numeros-section {
    background-color: var(--white, #ffffff);
    padding: 100px 0;
}

.summit-numeros-header {
    margin-bottom: 40px;
}

.numeros-tag {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: #4b5563;
    /* Cinza médio puxado pro oliva */
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.numeros-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: #001212;
    letter-spacing: -0.5px;
    margin: 0;
}

/* Layout dos Cards */
.numeros-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.numeros-subgrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* Base do Card */
.numero-card {
    background-color: #072226;
    /* Tom escuro azul petróleo/teal fiel ao print */
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* Texto ancorado na base */
    padding: 35px 30px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

/* .card-large {
    padding: 40px;
    min-height: 380px;
} */

/* MÁGICA DO CSS: Anéis Concêntricos */
.card-rings {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    /* Gradiente radial repetido para criar os anéis do canto superior direito */
    background-image: repeating-radial-gradient(circle at top right,
            transparent 0,
            transparent 15px,
            rgba(178, 210, 53, 0.2) 15px,
            /* Usa o Verde Limão Greener com 20% de opacidade */
            rgba(178, 210, 53, 0.2) 16px);
    pointer-events: none;
    /* A máscara faz o efeito desvanecer suavemente, não ocupando o card inteiro */
    mask-image: radial-gradient(circle at top right, black 20%, transparent 80%);
    -webkit-mask-image: radial-gradient(circle at top right, black 20%, transparent 80%);
}

/* Anéis ligeiramente mais juntos nos cards menores */
.numeros-subgrid .card-rings {
    background-image: repeating-radial-gradient(circle at top right,
            transparent 0,
            transparent 12px,
            rgba(178, 210, 53, 0.2) 12px,
            rgba(178, 210, 53, 0.2) 13px);
    mask-image: radial-gradient(circle at top right, black 10%, transparent 90%);
    -webkit-mask-image: radial-gradient(circle at top right, black 10%, transparent 90%);
}

/* Textos dentro do Card */
/* .card-content {
    position: relative;
    z-index: 2;
} */

.numero-card .highlight-number {
    display: block;
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--primary-green, #b2d235);
    /* Verde Limão */
    line-height: 1.1;
    margin-bottom: 8px;
}

.card-large .highlight-number {
    font-size: 4rem;
    /* Número maior no card principal */
    margin-bottom: 15px;
}

.numero-card p {
    font-size: 0.95rem;
    color: #cbd5e1;
    /* Cinza super claro/azulado */
    margin: 0;
    font-weight: 500;
}

.card-large p {
    font-size: 1.1rem;
}

/* --- Banner Inferior (CTA) --- */
.numeros-banner {
    background-color: #11120f;
    /* Fundo muito escuro (preto amarronzado) */
    border-radius: 12px;
    padding: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
}

.banner-text h4 {
    font-size: 1.05rem;
    color: var(--white, #ffffff);
    font-weight: 700;
    margin: 0 0 8px 0;
}

.banner-text p {
    font-size: 0.9rem;
    color: #9ca3af;
    margin: 0;
    line-height: 1.5;
}

.btn-banner-cta {
    display: inline-flex;
    align-items: center;
    background-color: var(--primary-green, #b2d235);
    color: #001212;
    padding: 12px 25px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    white-space: nowrap;
    /* Não quebra a linha do botão */
    transition: transform 0.2s ease, filter 0.2s ease;
}

.btn-banner-cta:hover {
    transform: translateY(-2px);
    filter: brightness(0.95);
}

/* =========================================
   RESPONSIVIDADE (Tablets e Mobile)
   ========================================= */

@media (max-width: 1024px) {
    .numeros-grid {
        grid-template-columns: 1fr;
        /* Card grande em cima, os outros embaixo */
    }

    .card-large {
        min-height: 300px;
    }
}

@media (max-width: 768px) {

    /* Regras que você já tem e devem ser mantidas */
    .summit-numeros-section {
        padding: 60px 20px;
    }

    .numeros-title {
        font-size: 2rem;
    }

    .numeros-subgrid {
        grid-template-columns: 1fr;
        /* Mantém uma coluna para os cards no mobile */
    }

    /* OPCIONAL: Centralizar o cabeçalho no mobile para acompanhar o layout dos cards */
    .summit-numeros-header {
        text-align: center;
    }

    /* 1 & 2. Ajuste dos Cards: não ficarão pequenos demais e terão o texto centralizado */
    .numero-card {
        justify-content: center;
        /* Centraliza no eixo vertical */
        align-items: center;
        /* Centraliza no eixo horizontal */
        text-align: center;
        /* Centraliza o texto em si */
        padding: 30px 20px;
        /* Respiro interno mais equilibrado */
        min-height: 180px;
        /* Garante um tamanho base para não espremer o conteúdo */
    }

    /* 3. Ajuste do Card Principal: evita que fique gigante sobrescrevendo os 300px do tablet */
    .numero-card.card-large {
        min-height: 220px;
    }

    .numero-card .card-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        /* Centraliza no eixo horizontal */
        justify-content: center;
        /* Centraliza no eixo vertical */
        text-align: center;
        width: 100%;
    }

    /* Garante que o número ocupe o espaço e centralize caso tenha display block */
    .numero-card .highlight-number {
        text-align: center;
        display: block;
        width: 100%;
    }

    .card-large .highlight-number {
        font-size: 3.2rem;
        /* Reduz os 4rem originais apenas no mobile */
        margin-bottom: 10px;
    }

    /* O restante do seu código para o banner (Mantenha igual) */
    .numeros-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        padding: 25px 20px;
    }

    .btn-banner-cta {
        width: 100%;
        justify-content: center;
    }
}

/* =========================================
   SEÇÃO: PATROCINADORES SUMMIT
   ========================================= */

.summit-sponsors-section {
    background-color: #061316;
    /* Fundo escuro azul-petróleo/chumbo da sua identidade */
    padding: 100px 0;
    text-align: center;
    color: var(--white, #ffffff);
}

.sponsors-header {
    max-width: 800px;
    margin: 0 auto 70px auto;
}

.sponsors-header h2 {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--white, #ffffff);
    margin-bottom: 15px;
    letter-spacing: -0.5px;
}

.sponsors-header p {
    font-size: 1.05rem;
    color: #cbd5e1;
    /* Cinza claro azulado para boa leitura */
    line-height: 1.6;
}

/* --- Contentor das Categorias --- */
.sponsors-tiers {
    display: flex;
    flex-direction: column;
    gap: 70px;
    /* Distância vertical entre cada categoria (Black, Silver, etc) */
}

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

.tier-title {
    font-size: 1.1rem;
    font-weight: 500;
    color: #f8fafc;
    margin-bottom: 35px;
    letter-spacing: 0.5px;
}

/* --- Grelha de Logótipos --- */
.tier-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 50px 80px;
    /* 50px de espaço vertical (se quebrar a linha), 80px horizontal */
    width: 100%;
    max-width: 1000px;
}

.tier-logos img {
    /* Define um tamanho limite para nenhum logo ficar gigante em relação aos outros */
    max-height: 45px;
    max-width: 200px;
    object-fit: contain;
    opacity: 0.85;
    /* Dá uma ligeira transparência para não ficar tão "agressivo" ao olho */
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Efeito sutil de destaque ao passar o rato */
.tier-logos img:hover {
    transform: scale(1.05);
    opacity: 1;
}

/* =========================================
   RESPONSIVIDADE (Tablets e Telemóveis)
   ========================================= */

@media (max-width: 768px) {
    .summit-sponsors-section {
        padding: 70px 20px;
    }

    .sponsors-header h2 {
        font-size: 1.8rem;
    }

    .sponsors-tiers {
        gap: 50px;
    }

    .tier-logos {
        gap: 40px;
        /* Reduz a distância entre os logos no mobile */
    }

    .tier-logos img {
        max-height: 35px;
        /* Reduz o tamanho máximo das logos para caberem melhor */
        max-width: 140px;
    }
}

/* =========================================
   SEÇÃO: CTA PATROCÍNIO (BANNER SUMMIT)
   ========================================= */

.summit-cta-patrocinio {
    background-color: #061316;
    /* Mantém o fundo super escuro para dar continuidade à secção anterior */
    padding: 40px 0 100px 0;
}

.cta-patrocinio-card {
    /* O gradiente linear aplica a sobreposição escura/azulada sobre a imagem de fundo */
    background-color: #0c2025;
    /* Cor de fallback */
    background-blend-mode: overlay;
    /* Caso use a imagem via CSS externo, retire a tag style do HTML e coloque o caminho aqui */
    background: linear-gradient(rgba(6, 22, 28, 0.85), rgba(6, 22, 28, 0.85)), center/cover no-repeat;

    border-radius: 16px;
    padding: 60px 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

/* --- Lado Esquerdo: Textos --- */
.cta-patrocinio-content {
    flex: 1;
    max-width: 650px;
}

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

.cta-patrocinio-content p {
    font-size: 1.1rem;
    color: #e2e8f0;
    /* Branco levemente acinzentado */
    line-height: 1.5;
    margin: 0;
}

/* --- Lado Direito: Botão --- */
.cta-patrocinio-action {
    flex-shrink: 0;
    /* Impede o botão de encolher se o texto for longo */
}

.btn-cta-patrocinio {
    display: inline-block;
    background-color: var(--primary-green, #B2D235);
    /* Verde limão característico */
    color: #001212;
    padding: 16px 36px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1.05rem;
    text-decoration: none;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.btn-cta-patrocinio:hover {
    transform: translateY(-3px);
    filter: brightness(0.95);
}

/* =========================================
   RESPONSIVIDADE (Tablets e Telemóveis)
   ========================================= */

@media (max-width: 992px) {
    .cta-patrocinio-card {
        flex-direction: column;
        /* Coloca o texto em cima e o botão em baixo */
        text-align: center;
        padding: 50px 40px;
    }

    .cta-patrocinio-content {
        margin-bottom: 15px;
    }
}

@media (max-width: 768px) {
    .summit-cta-patrocinio {
        padding: 30px 20px 80px 20px;
    }

    .cta-patrocinio-card {
        padding: 40px 25px;
    }

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

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

    .btn-cta-patrocinio {
        width: 100%;
        /* Botão ocupa a largura toda no telemóvel */
        text-align: center;
    }
}

/* =========================================
   SEÇÃO: ECOSSISTEMA DE EVENTOS (OUTROS)
   ========================================= */

.outros-eventos-section {
    padding: 100px 0;
    background-color: var(--white, #ffffff);
}

/* --- Cabeçalho --- */
.outros-eventos-header {
    text-align: center;
    max-width: 750px;
    margin: 0 auto 50px auto;
}

.outros-tag {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: #004b5a;
    /* Teal da Greener */
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.outros-eventos-header h2 {
    font-size: 2.4rem;
    font-weight: 700;
    color: #001212;
    margin-bottom: 20px;
    letter-spacing: -0.5px;
}

.outros-eventos-header p {
    font-size: 1.15rem;
    color: #4b5563;
    /* Cinza médio */
    line-height: 1.6;
}

/* --- Grid de Cartões --- */
.outros-eventos-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* 2 Colunas */
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto;
}

/* --- O Cartão Escuro --- */
.outro-evento-card {
    background-color: #061316;
    /* Fundo super escuro (padrão Greener) */
    border-radius: 12px;
    padding: 40px 35px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Alinha o texto e o botão verticalmente ao centro */
    gap: 30px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.outro-evento-info {
    flex: 1;
    /* Ocupa o espaço disponível à esquerda */
}

/* As Tags coloridas no topo dos cartões */
.evento-tipo-tag {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.text-olive {
    color: #a0b82d;
    /* Verde oliva da Greener */
}

.text-cyan {
    color: #74cfe2;
    /* Ciano claro */
}

.outro-evento-info h3 {
    font-size: 1.3rem;
    color: var(--white, #ffffff);
    font-weight: 700;
    margin-bottom: 12px;
}

.outro-evento-info p {
    font-size: 0.9rem;
    color: #cbd5e1;
    /* Branco ligeiramente acinzentado */
    line-height: 1.6;
    margin: 0;
}

/* --- Botão (Lado Direito) --- */
.outro-evento-action {
    flex-shrink: 0;
    /* Impede o botão de encolher se o texto for longo */
}

.btn-outline-dark {
    display: inline-block;
    background-color: transparent;
    color: #9ca3af;
    /* Cinza médio para o texto do botão */
    border: 1px solid #334155;
    /* Borda cinza escura */
    padding: 10px 24px;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-outline-dark:hover {
    border-color: #cbd5e1;
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.05);
    /* Fundo levíssimo no hover */
}

/* =========================================
   RESPONSIVIDADE (Tablets e Telemóveis)
   ========================================= */

@media (max-width: 992px) {
    .outros-eventos-grid {
        grid-template-columns: 1fr;
        /* Passa para 1 coluna no tablet */
        max-width: 700px;
    }
}

@media (max-width: 768px) {
    .outros-eventos-section {
        padding: 70px 20px;
    }

    .outros-eventos-header h2 {
        font-size: 2rem;
    }

    .outro-evento-card {
        flex-direction: column;
        /* Empilha texto em cima e botão em baixo no telemóvel */
        align-items: flex-start;
        padding: 30px 25px;
        gap: 25px;
    }

    .outro-evento-action {
        width: 100%;
    }

    .btn-outline-dark {
        width: 100%;
        /* Botão ocupa a largura total no telemóvel */
        text-align: center;
        padding: 12px 24px;
    }
}

/* =========================================
   SEÇÃO: HERO MEET & GREENER
   ========================================= */

.meet-hero-main {
    position: relative;
    /* Substitua URL_DA_IMAGEM.jpg pelo caminho real da sua foto de fundo (a da plateia) */
    background-image: url('URL_DA_IMAGEM.jpg');
    background-size: cover;
    background-position: center;
    /* O padding bottom é 0 porque a barra de estatísticas ocupa o fundo */
    padding: 120px 0 0 0;
    color: var(--white, #ffffff);
    display: flex;
    flex-direction: column;
}

/* Overlay escuro/azulado sobre a imagem */
.meet-hero-overlay {
    position: absolute;
    inset: 0;
    /* Um degradê que começa escuro no topo e fica mais azul/petróleo para baixo */
    background: linear-gradient(to bottom, rgba(5, 20, 25, 0.8) 0%, rgba(5, 30, 40, 0.6) 100%);
    z-index: 1;
}

.meet-hero-main .relative-z {
    position: relative;
    z-index: 2;
}

/* --- TEXTOS E BOTÕES --- */
.meet-hero-content {
    max-width: 850px;
    margin-bottom: 60px;
}

.meet-breadcrumb {
    font-size: 0.9rem;
    color: #74cfe2;
    /* Ciano claro */
    margin-bottom: 15px;
    font-weight: 500;
}

.meet-hero-title {
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--white, #ffffff);
    line-height: 1.1;
    margin-bottom: 20px;
    letter-spacing: -1px;
}

.meet-hero-subtitle {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--white, #ffffff);
    line-height: 1.4;
    margin-bottom: 20px;
}

.meet-hero-desc {
    font-size: 1.05rem;
    color: #cbd5e1;
    /* Cinza claro */
    line-height: 1.6;
    margin-bottom: 35px;
    max-width: 750px;
}

.meet-hero-actions {
    display: flex;
    gap: 15px;
    align-items: center;
    flex-wrap: wrap;
}

.btn-meet-primary {
    background-color: var(--primary-green, #b2d235);
    color: #001212;
    padding: 14px 32px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    transition: transform 0.2s ease, filter 0.3s ease;
}

.btn-meet-primary:hover {
    transform: translateY(-2px);
    filter: brightness(0.95);
}

.btn-meet-secondary {
    background-color: rgba(15, 15, 15, 0.7);
    /* Fundo preto semi-transparente */
    color: var(--white, #ffffff);
    padding: 14px 32px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.btn-meet-secondary:hover {
    background-color: rgba(30, 30, 30, 0.9);
}

/* --- BARRA DE ESTATÍSTICAS (RODAPÉ) --- */
.meet-stats-bar {
    /* Gradiente fiel à imagem, que vai do preto/transparente no topo para o teal/ciano na base */
    background: linear-gradient(to bottom, rgba(5, 15, 20, 0.6) 0%, rgba(30, 80, 90, 0.95) 100%);
    padding: 40px 0;
    margin-top: auto;
    /* Empurra a barra para o final da section */
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    /* Linha divisória super sutil */
}

.meet-stats-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

.meet-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
}

.meet-stat-divider {
    width: 1px;
    height: 60px;
    background-color: rgba(255, 255, 255, 0.2);
    /* As linhas finas entre os números */
}

.meet-stat-number {
    font-size: 3rem;
    font-weight: 700;
    color: #eaf8fb;
    /* Ciano super claro/quase branco */
    line-height: 1.1;
    margin-bottom: 8px;
}

.meet-stat-label {
    font-size: 0.9rem;
    color: #a0aec0;
    /* Cinza médio */
    line-height: 1.4;
    font-weight: 500;
}

/* =========================================
   RESPONSIVIDADE (Tablets e Telemóveis)
   ========================================= */

@media (max-width: 1024px) {
    .meet-stats-row {
        flex-wrap: wrap;
        gap: 30px;
        justify-content: center;
    }

    .meet-stat-item {
        flex: 0 0 calc(33.333% - 30px);
    }

    .meet-stat-divider {
        display: none;
        /* Removemos as linhas no tablet para não quebrar o layout */
    }
}

@media (max-width: 768px) {
    .meet-hero-main {
        padding: 100px 0 0 0;
    }

    .meet-hero-title {
        font-size: 2.4rem;
    }

    .meet-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-meet-primary,
    .btn-meet-secondary {
        text-align: center;
    }

    .meet-stats-bar {
        padding: 30px 20px;
    }

    .meet-stat-item {
        flex: 0 0 100%;
        /* No telemóvel, 1 estatística por linha */
        margin-bottom: 20px;
    }

    .meet-stat-item:last-child {
        margin-bottom: 0;
    }

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

/* =========================================
   SEÇÃO: MEET & GREENER (COMO FUNCIONA)
   ========================================= */

.meet-como-funciona-section {
    background-color: #f6fafa;
    /* Fundo super claro (quase branco/ciano) do print */
    padding: 100px 0;
}

.meet-cf-layout {
    display: flex;
    align-items: center;
    /* Alinha o card e o texto ao centro verticalmente */
    justify-content: space-between;
    gap: 60px;
    max-width: 1200px;
    margin: 0 auto;
}

/* --- LADO ESQUERDO: CARD ESCURO --- */
.meet-cf-card-wrapper {
    flex: 1;
}

.meet-cf-card {
    background-color: #061a1f;
    /* Fundo azul petróleo escuro */
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    /* Garante que o header não vaze os cantos arredondados */
}

.meet-cf-card-header {
    padding: 25px 35px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    /* Linha divisória sutil */
    font-size: 0.85rem;
    font-weight: 600;
    color: #cbd5e1;
    /* Branco acinzentado/azulado */
    letter-spacing: 1px;
}

.meet-cf-card-body {
    padding: 35px;
    display: flex;
    flex-direction: column;
    gap: 35px;
    /* Espaço entre os 4 itens da lista */
}

/* Item da Lista (Ícone + Texto) */
.meet-cf-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

/* Caixinha do Ícone */
.meet-cf-icon {
    width: 42px;
    height: 42px;
    border: 1px solid #62a8b8;
    /* Borda ciano clara idêntica ao print */
    background-color: transparent;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #74cfe2;
    /* Cor do ícone (Ciano claro) */
    flex-shrink: 0;
    /* Impede que o ícone esmague se o texto for longo */
}

.meet-cf-icon svg {
    width: 20px;
    height: 20px;
}

.meet-cf-text h4 {
    font-size: 1.05rem;
    font-weight: 500;
    color: #ffffff;
    margin-bottom: 8px;
    line-height: 1.3;
}

.meet-cf-text p {
    font-size: 0.9rem;
    color: #94a3b8;
    /* Cinza médio/claro para boa leitura no escuro */
    line-height: 1.5;
    margin: 0;
}

/* --- LADO DIREITO: TEXTO EXPLICATIVO --- */
.meet-cf-content {
    flex: 1.1;
    /* Dá um leve respiro a mais para o texto */
    max-width: 600px;
}

.meet-cf-tag {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: #178a9c;
    /* Teal vibrante/Ciano escuro */
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.meet-cf-title {
    font-size: 2.6rem;
    font-weight: 700;
    color: #001212;
    /* Preto/Verde muito escuro */
    line-height: 1.2;
    margin-bottom: 30px;
    letter-spacing: -0.5px;
}

.meet-cf-content p {
    font-size: 1.1rem;
    color: #1c3b42;
    /* Azul petróleo acinzentado do print */
    line-height: 1.6;
    margin-bottom: 20px;
}

.meet-cf-content p:last-child {
    margin-bottom: 0;
}

/* =========================================
   RESPONSIVIDADE (Tablets e Celulares)
   ========================================= */

@media (max-width: 1024px) {
    .meet-cf-layout {
        flex-direction: column-reverse;
        /* No tablet/mobile o texto vai pra cima e o card pra baixo */
        gap: 60px;
    }

    .meet-cf-card-wrapper {
        width: 100%;
        max-width: 600px;
        /* Evita que o card fique largo demais na tela */
        margin: 0 auto;
    }

    .meet-cf-content {
        max-width: 100%;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .meet-como-funciona-section {
        padding: 60px 20px;
    }

    .meet-cf-title {
        font-size: 2.1rem;
    }

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

    .meet-cf-card-header {
        padding: 20px 25px;
    }

    .meet-cf-card-body {
        padding: 25px;
        gap: 30px;
    }
}

/* =========================================
   SEÇÃO: HISTÓRICO (EDIÇÕES ANTERIORES)
   ========================================= */

.historico-edicoes-section {
    /* Gradiente radial no topo que desvanece para o escuro profundo */
    background: radial-gradient(circle at top center, #10343a 0%, #051313 60%);
    padding: 100px 0;
    color: var(--white, #ffffff);
}

/* --- Cabeçalho --- */
.historico-header {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 60px auto;
}

.hist-tag {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: #e2e8f0;
    /* Branco acinzentado claro */
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.hist-title {
    font-size: 2.6rem;
    font-weight: 700;
    color: var(--white, #ffffff);
    margin-bottom: 15px;
    letter-spacing: -0.5px;
}

.hist-desc {
    font-size: 1.05rem;
    color: #cbd5e1;
    line-height: 1.6;
}

/* --- Grelha de Cartões --- */
.historico-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

/* --- O Cartão --- */
.hist-card {
    background-color: #061f24;
    /* Azul petróleo muito escuro */
    border: 1px solid #144048;
    /* Borda teal subtil */
    border-radius: 12px;
    padding: 35px 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* Empurra o footer para baixo */
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.hist-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
    border-color: #276974;
    /* Borda acende no hover */
}

.hist-card-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Badge (Pílula superior: 1ª Edição) */
.hist-card-badge {
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid #276974;
    /* Borda ciano/teal */
    color: #74cfe2;
    /* Texto ciano claro */
    padding: 6px 18px;
    border-radius: 30px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 25px;
}

.hist-card-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--white, #ffffff);
    line-height: 1.4;
    margin-bottom: 20px;
}

.hist-card-meta {
    font-size: 0.8rem;
    color: #a0aec0;
    font-weight: 600;
    margin-bottom: 20px;
    display: block;
}

.hist-card-text {
    font-size: 0.9rem;
    color: #94a3b8;
    /* Cinza médio para leitura agradável no escuro */
    line-height: 1.6;
    margin: 0 0 25px 0;
}

/* --- Rodapé do Cartão --- */
.hist-card-footer-wrapper {
    margin-top: auto;
    /* Garante que fica sempre no fundo */
    width: 100%;
}

.hist-card-divider {
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    /* Linha divisória bem fina */
    margin: 0 0 20px 0;
}

.hist-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

/* Badges de Estado (Encerrado / Em Breve) */
.hist-status-badge {
    padding: 6px 16px;
    border-radius: 30px;
    font-size: 0.75rem;
    font-weight: 600;
    background-color: transparent;
}

.status-encerrado {
    border: 1px solid #475569;
    color: #64748b;
    /* Cinza apagado para dar ideia de inativo */
}

.status-embreve {
    border: 1px solid #e2e8f0;
    color: #e2e8f0;
    /* Branco para destacar o ativo */
}

/* Link de Ação (Saiba Mais / Me Avise) */
.hist-action-link {
    font-size: 0.85rem;
    color: #74cfe2;
    /* Ciano claro da Greener */
    font-weight: 600;
    text-decoration: none;
    transition: filter 0.2s ease;
}

.hist-action-link:hover {
    filter: brightness(1.2);
    text-decoration: underline;
}

/* =========================================
   RESPONSIVIDADE (Tablets e Telemóveis)
   ========================================= */

@media (max-width: 1024px) {
    .historico-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 2 colunas em tablets */
        padding: 0 20px;
    }
}

@media (max-width: 768px) {
    .historico-edicoes-section {
        padding: 70px 20px;
    }

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

    .historico-grid {
        grid-template-columns: 1fr;
        /* 1 coluna no telemóvel */
    }

    .hist-card {
        padding: 30px 25px;
        /* Reduz ligeiramente o padding interno */
    }
}

/* =========================================
   SEÇÃO: DEPOIMENTOS (CARROSSEL)
   ========================================= */

.depoimentos-section {
    background-color: #f6fafa;
    /* Fundo ciano super claro idêntico ao do layout */
    padding: 100px 0;
    overflow: hidden;
    /* Importante para o carrossel não estourar a tela horizontalmente */
}

/* --- Cabeçalho --- */
.depoimentos-header {
    text-align: center;
    max-width: 650px;
    margin: 0 auto 50px auto;
}

.dep-tag {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: #004b5a;
    /* Teal escuro */
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.dep-title {
    font-size: 2.6rem;
    font-weight: 700;
    color: #001212;
    line-height: 1.2;
    margin-bottom: 20px;
    letter-spacing: -0.5px;
}

.dep-desc {
    font-size: 1.15rem;
    color: #1c3b42;
    /* Azul petróleo acinzentado */
    line-height: 1.6;
}

/* --- Container do Carrossel --- */
.depoimentos-carousel-wrapper {
    width: 100%;
    margin-bottom: 40px;
}

.depoimentos-track {
    display: flex;
    gap: 30px;
    overflow-x: auto;
    /* Comportamento de "ímã" ao rolar a tela */
    scroll-snap-type: x mandatory;
    /* Esconde a barra de scroll nativa para um visual mais limpo */
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge */

    /* O SEGREDO DO ALINHAMENTO: 
       A largura do card é 800px. Metade é 400px. 
       O padding-left de calc(50% - 400px) garante que o primeiro card fique perfeitamente centralizado! */
    padding: 20px calc(50% - 400px);
    scroll-behavior: smooth;
}

.depoimentos-track::-webkit-scrollbar {
    display: none;
    /* Esconde scrollbar no Chrome/Safari */
}

/* --- O Card de Depoimento --- */
.dep-card {
    flex: 0 0 800px;
    /* Não encolhe, não cresce, tem exatamente 800px de largura */
    scroll-snap-align: center;
    /* Gruda no centro da tela ao deslizar */
    background-color: #053641;
    /* Azul petróleo/teal muito escuro do print */
    border-radius: 12px;
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease;
}

.dep-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 30px;
}

.dep-quote-icon {
    color: #74cfe2;
    /* Ciano claro para a aspa */
    width: 28px;
    height: 28px;
}

.dep-badge {
    border: 1px solid #37656f;
    /* Borda teal clara */
    color: #a0bec5;
    /* Texto da badge */
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.dep-text {
    font-size: 1.15rem;
    color: #ffffff;
    line-height: 1.6;
    margin: 0;
    font-weight: 400;
}

.dep-divider {
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    /* Linha fina e subtil */
    margin: 35px 0;
}

.dep-author {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.dep-author strong {
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffffff;
}

.dep-author span {
    font-size: 0.95rem;
    color: #cbd5e1;
    /* Cinza claro */
}

/* --- Controles (Botões Inferiores) --- */
.depoimentos-controls {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.dep-nav-btn {
    width: 48px;
    height: 48px;
    background-color: #053641;
    /* Mesma cor do card */
    border: none;
    border-radius: 8px;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.dep-nav-btn:hover {
    background-color: #03252d;
    transform: translateY(-2px);
}

/* =========================================
   RESPONSIVIDADE (Tablets e Celulares)
   ========================================= */

@media (max-width: 992px) {
    .dep-card {
        flex: 0 0 600px;
        /* Reduz a largura do card no tablet */
        padding: 40px;
    }

    .depoimentos-track {
        /* Recalcula o centro: metade de 600 é 300 */
        padding: 20px calc(50% - 300px);
    }
}

@media (max-width: 768px) {
    .depoimentos-section {
        padding: 60px 0;
    }

    .dep-title {
        font-size: 2.1rem;
    }

    .dep-card {
        /* No telemóvel o card ocupa 85% da largura da tela */
        flex: 0 0 85vw;
        padding: 30px 25px;
    }

    .depoimentos-track {
        /* Margem pequena para alinhar o primeiro card um pouco para a esquerda */
        padding: 20px 7.5vw;
        gap: 15px;
    }

    .dep-text {
        font-size: 1rem;
    }
}

/* =========================================
   SEÇÃO: DEPOIMENTOS (CARROSSEL LOOP 3D)
   ========================================= */

.depoimentos-section {
    background-color: #f6fafa;
    padding: 100px 0;
    overflow: hidden;
}

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

.dep-tag {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: #004b5a;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.dep-title {
    font-size: 2.6rem;
    font-weight: 700;
    color: #001212;
    line-height: 1.2;
    margin-bottom: 20px;
    letter-spacing: -0.5px;
}

.dep-desc {
    font-size: 1.15rem;
    color: #1c3b42;
    line-height: 1.6;
}

/* --- Container e Track do Carrossel --- */
.depoimentos-carousel-wrapper {
    width: 100%;
    margin-bottom: 40px;
    position: relative;
    padding: 20px 0;
}

.depoimentos-track {
    position: relative;
    height: 440px;
    /* Altura fixa necessária para o position absolute */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/* --- O Card Base --- */
.dep-card {
    position: absolute;
    /* Empilha os cards um sobre o outro */
    width: 100%;
    max-width: 800px;
    height: 340px;
    background-color: #053641;
    border-radius: 12px;
    padding: 40px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);

    /* A MÁGICA: Transição de tamanho e opacidade */
    transition: transform 0.5s ease, opacity 0.5s ease, z-index 0.5s ease;
    opacity: 0;
    z-index: 1;
    transform: translateX(0) scale(0.8);
    pointer-events: none;
    /* Impede clique em cards escondidos */
}

/* ESTADO: ATIVO (Card do Meio - Grande) */
.dep-card.active {
    opacity: 1;
    z-index: 3;
    /* Fica acima de todos */
    transform: translateX(0) scale(1);
    pointer-events: all;
}

/* ESTADO: ANTERIOR (Card da Esquerda - Menor) */
.dep-card.prev {
    opacity: 0.5;
    /* Meio transparente */
    z-index: 2;
    /* Fica atrás do ativo */
    transform: translateX(-100%) scale(0.85);
    /* Encolhe e move pra esquerda */
}

/* ESTADO: PRÓXIMO (Card da Direita - Menor) */
.dep-card.next {
    opacity: 0.5;
    /* Meio transparente */
    z-index: 2;
    /* Fica atrás do ativo */
    transform: translateX(100%) scale(0.85);
    /* Encolhe e move pra direita */
}

/* Textos e Detalhes Internos */
.dep-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 25px;
}

.dep-quote-icon {
    color: #74cfe2;
    width: 28px;
    height: 28px;
}

.dep-badge {
    border: 1px solid #37656f;
    color: #a0bec5;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.dep-text {
    font-size: 1.1rem;
    color: #ffffff;
    line-height: 1.6;
    margin: 0;
}

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

.dep-author {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.dep-author strong {
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
}

.dep-author span {
    font-size: 0.9rem;
    color: #cbd5e1;
}

/* --- Controles Inferiores --- */
.depoimentos-controls {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.dep-nav-btn {
    width: 48px;
    height: 48px;
    background-color: #053641;
    border: none;
    border-radius: 8px;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.dep-nav-btn:hover {
    background-color: #03252d;
    transform: translateY(-2px);
}

/* =========================================
   RESPONSIVIDADE (Tablets e Celulares)
   ========================================= */

@media (max-width: 992px) {
    .dep-card {
        max-width: 600px;
        padding: 40px;
    }

    /* No tablet, ajustamos o translate para não fugir da tela */
    .dep-card.prev {
        transform: translateX(-55%) scale(0.85);
    }

    .dep-card.next {
        transform: translateX(55%) scale(0.85);
    }
}

@media (max-width: 768px) {
    .depoimentos-section {
        padding: 60px 0;
    }

    .dep-title {
        font-size: 2.1rem;
    }

    .depoimentos-track {
        height: 420px;
        /* Aumenta um pouco pra caber o texto caso quebre linha */
    }

    .dep-card {
        max-width: 85vw;
        /* No celular, pega 85% da tela */
        height: 400px;
        padding: 35px 25px;
    }

    /* Esconde quase tudo dos cards laterais no mobile */
    .dep-card.prev {
        transform: translateX(-80%) scale(0.85);
        opacity: 0.2;
    }

    .dep-card.next {
        transform: translateX(80%) scale(0.85);
        opacity: 0.2;
    }

    .dep-text {
        font-size: 1rem;
    }
}

/* =========================================
   SEÇÃO: PATROCINADORES MEET & GREENER
   ========================================= */

.meet-sponsors-section {
    background-color: #061316;
    /* Fundo azul petróleo escuro fiel à marca */
    padding: 100px 0;
    text-align: center;
}

/* --- Cabeçalho --- */
.meet-sponsors-header {
    max-width: 650px;
    margin: 0 auto 60px auto;
}

.meet-sponsors-header h2 {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--white, #ffffff);
    margin-bottom: 15px;
    letter-spacing: -0.5px;
}

.meet-sponsors-header p {
    font-size: 1.05rem;
    color: #a0bec5;
    /* Ciano/Cinza claro inspirado no print */
    line-height: 1.5;
}

/* --- Grid de Logótipos (Flexbox) --- */
.meet-sponsors-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 60px 90px;
    /* 60px de espaço vertical, 90px de espaço horizontal */
    max-width: 940px;
    margin: 0 auto;
}

.meet-sponsors-grid img {
    /* Define limites de tamanho para que as logos fiquem uniformes */
    max-width: 180px;
    max-height: 50px;
    object-fit: contain;
    /* Transição suave caso adicione um efeito de hover */
    transition: transform 0.3s ease, filter 0.3s ease;
}

/* Efeito de elevação sutil ao passar o rato (opcional, mas dá vida à página) */
.meet-sponsors-grid img:hover {
    transform: scale(1.05);
    filter: brightness(1.2);
}

/* =========================================
   RESPONSIVIDADE (Tablets e Telemóveis)
   ========================================= */

@media (max-width: 992px) {
    .meet-sponsors-grid {
        gap: 50px 60px;
    }
}

@media (max-width: 768px) {
    .meet-sponsors-section {
        padding: 70px 20px;
    }

    .meet-sponsors-header h2 {
        font-size: 1.8rem;
    }

    .meet-sponsors-header p {
        font-size: 0.95rem;
    }

    .meet-sponsors-grid {
        gap: 40px;
        /* Reduz bastante a distância no telemóvel */
    }

    .meet-sponsors-grid img {
        max-width: 130px;
        max-height: 40px;
    }
}

/* =========================================
   SEÇÃO: CTA PATROCÍNIO (BANNER MEET & GREENER)
   ========================================= */

.meet-cta-patrocinio {
    background-color: #061316;
    /* Fundo escuro para combinar com as secções em volta */
    padding: 40px 0 100px 0;
}

.meet-cta-card {
    /* O gradiente linear escurece a imagem de fundo para que o texto branco tenha destaque total */
    background-color: #0c2025;
    /* Cor de fallback */
    background-blend-mode: overlay;
    background: linear-gradient(rgba(6, 22, 28, 0.85), rgba(6, 22, 28, 0.85)), center/cover no-repeat;

    border-radius: 16px;
    padding: 60px 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

/* --- Lado Esquerdo: Textos --- */
.meet-cta-content {
    flex: 1;
    max-width: 650px;
}

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

.meet-cta-content p {
    font-size: 1.1rem;
    color: #e2e8f0;
    /* Branco levemente acinzentado */
    line-height: 1.5;
    margin: 0;
}

/* --- Lado Direito: Botão --- */
.meet-cta-action {
    flex-shrink: 0;
    /* Impede que o botão seja esmagado se o texto for longo */
}

.btn-meet-cta {
    display: inline-block;
    background-color: var(--primary-green, #B2D235);
    /* Verde limão característico */
    color: #001212;
    padding: 16px 36px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1.05rem;
    text-decoration: none;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.btn-meet-cta:hover {
    transform: translateY(-3px);
    filter: brightness(0.95);
}

/* =========================================
   RESPONSIVIDADE (Tablets e Telemóveis)
   ========================================= */

@media (max-width: 992px) {
    .meet-cta-card {
        flex-direction: column;
        /* Coloca o texto em cima e o botão em baixo */
        text-align: center;
        padding: 50px 40px;
    }

    .meet-cta-content {
        margin-bottom: 15px;
    }
}

@media (max-width: 768px) {
    .meet-cta-patrocinio {
        padding: 30px 20px 80px 20px;
    }

    .meet-cta-card {
        padding: 40px 25px;
    }

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

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

    .btn-meet-cta {
        width: 100%;
        /* No telemóvel, o botão ocupa toda a largura */
        text-align: center;
    }
}

.grid-biblioteca {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
    padding: 20px 0;
}

.card-biblioteca {
    background: var(--white);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* border: 1px solid var(--border); */
    /* display: flex; */
}

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

.card-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    /* width: 100%; */
}

.card-imagem {
    height: 200px;
    background: var(--dark-blue);
}

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

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

.card-tag {
    color: var(--primary-color);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 10px;
}

/* Estilo visual da tag idêntico ao padrão da imagem */
.tag-pill-sm {
    background-color: #F1FBFD;
    /* Cor do texto (cinza escuro) */
    font-size: 10px;
    /* Tamanho da fonte reduzido para o card */
    padding: 6px 12px;
    /* Borda fina e sutil */
    border-radius: 100px;
    /* Borda totalmente arredondada */
    display: inline-block;
    white-space: nowrap;
    /* Impede que a tag quebre em duas linhas */
    text-transform: uppercase;
    /* Deixa as letras maiúsculas, caso seja o padrão */
    letter-spacing: 0.5px;
    /* Leve espaçamento entre as letras */
    color: #5d5d5d;
}

.card-footer {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #eee;
    padding-top: 15px;
    font-size: 0.85rem;
}

.card-data-texto {
    color: #666;
}

.btn-ler-mais {
    color: var(--primary-color);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Layout da grelha de destaques */
.destaques-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* Cria 3 colunas iguais */
    gap: 30px;
    margin-bottom: 60px;
}

/* Garante que os cards de destaque tenham uma altura consistente */
.card-biblioteca.destaque {
    height: 100%;
    display: flex;
}

.card-biblioteca.destaque .card-link {
    height: 100%;
}

/* Responsividade: em tablets e telemóveis, os cards empilham */
@media (max-width: 992px) {
    .destaques-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

/* Layout da grelha de destaques (Estilo Revista/Bento Box) */
.destaques-grid {
    display: grid;
    /* Divide em duas colunas: a esquerda fica um pouco mais larga (1.2fr) que a direita (1fr) */
    grid-template-columns: 1.2fr 1fr;
    gap: 30px;
    margin-bottom: 60px;
}

/* 1º Artigo: O mais novo, na esquerda */
.card-biblioteca.destaque:nth-child(1) {
    grid-column: 1 / 2;
    /* Ocupa a primeira coluna */
    grid-row: 1 / 3;
    /* Expande verticalmente para ocupar o espaço de duas linhas */
}

/* 2º Artigo: Topo da coluna da direita */
.card-biblioteca.destaque:nth-child(2) {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}

/* 3º Artigo: Base da coluna da direita */
.card-biblioteca.destaque:nth-child(3) {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}

/* Ajuste da imagem do card principal para que acompanhe a altura estendida */
.card-biblioteca.destaque:nth-child(1) .card-imagem {
    height: 380px;
    /* Deixa a foto principal bem maior para dar o destaque correto */
}

/* Responsividade: Tablet */
@media (max-width: 992px) {
    .destaques-grid {
        /* Em tablets, volta a ter espaço igual para todos, mas ainda lado a lado se couber */
        grid-template-columns: repeat(2, 1fr);
    }

    .card-biblioteca.destaque:nth-child(1) {
        grid-column: 1 / -1;
        /* O principal passa a ocupar a linha toda no topo */
        grid-row: auto;
    }

    .card-biblioteca.destaque:nth-child(2),
    .card-biblioteca.destaque:nth-child(3) {
        grid-column: auto;
        grid-row: auto;
    }

    .card-biblioteca.destaque:nth-child(1) .card-imagem {
        height: 250px;
        /* Reduz a altura da imagem no tablet */
    }
}

/* Responsividade: Mobile */
@media (max-width: 600px) {
    .destaques-grid {
        grid-template-columns: 1fr;
        /* Tudo numa coluna só */
    }
}

/* Layout da grelha de destaques */
.destaques-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 20px;
    /* Reduzimos o espaçamento para ficar mais compacto */
    margin-bottom: 50px;
}

/* 1º Artigo: O mais novo, na esquerda */
.card-biblioteca.destaque:nth-child(1) {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    display: flex;
    flex-direction: column;
}

.card-biblioteca.destaque:nth-child(1) .card-link {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* A mágica do card principal: a imagem cresce para preencher o espaço que sobrar */
.card-biblioteca.destaque:nth-child(1) .card-imagem {
    height: auto;
    flex-grow: 1;
    /* Preenche o espaço vertical restante */
    min-height: 250px;
    /* Garante que não fique pequena demais */
}

/* 2º e 3º Artigos: Coluna da direita */
.card-biblioteca.destaque:nth-child(2) {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}

.card-biblioteca.destaque:nth-child(3) {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}

/* Reduz a altura das imagens dos cards secundários para encurtar a coluna da direita */
.card-biblioteca.destaque:nth-child(2) .card-imagem,
.card-biblioteca.destaque:nth-child(3) .card-imagem {
    height: 140px;
}

/* Deixa o texto dos cards secundários um pouco mais compacto */
.card-biblioteca.destaque:nth-child(2) .card-info,
.card-biblioteca.destaque:nth-child(3) .card-info {
    padding: 15px 20px;
}

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

    .card-biblioteca.destaque:nth-child(1) {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    .card-biblioteca.destaque:nth-child(2),
    .card-biblioteca.destaque:nth-child(3) {
        grid-column: auto;
        grid-row: auto;
    }

    /* Restaura o tamanho padrão no tablet */
    .card-biblioteca.destaque:nth-child(1) .card-imagem,
    .card-biblioteca.destaque:nth-child(2) .card-imagem,
    .card-biblioteca.destaque:nth-child(3) .card-imagem {
        height: 200px;
        flex-grow: 0;
    }
}

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

/* --- Layout da Página de Artigo --- */
.artigo-layout {
    background-color: #fff;
    padding-bottom: 80px;
}

.artigo-header {
    background-color: var(--dark-blue);
    padding: 60px 0;
    color: #fff;
    text-align: center;
}

/* .breadcrumbs {
    font-size: 0.9rem;
    color: var(--primary-green);
    margin-bottom: 20px;
    text-transform: uppercase;
    font-weight: 600;
} */

.breadcrumbs a {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s;
}

.breadcrumbs a:hover {
    color: var(--primary-green);
}

.artigo-titulo-principal {
    font-size: 2.5rem;
    line-height: 1.2;
    max-width: 900px;
    margin: 0 auto 20px;
}

.artigo-meta-detalhes {
    font-size: 1rem;
    color: #a5c0cc;
}

/* --- Corpo do Artigo --- */
.artigo-corpo {
    max-width: 850px;
    /* Largura ideal para leitura */
    margin: -40px auto 0;
    /* Sobe um pouco para sobrepor o header azul */
    background: #fff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    position: relative;
    z-index: 2;
}

.artigo-capa-wrapper {
    width: 100%;
    margin-bottom: 40px;
    border-radius: 8px;
    overflow: hidden;
}

.artigo-imagem-capa {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    max-height: 450px;
}

.artigo-texto-conteudo {
    font-size: 1.15rem;
    line-height: 1.8;
    color: #334155;
}

.artigo-texto-conteudo h2,
.artigo-texto-conteudo h3 {
    color: var(--dark-blue);
    margin: 40px 0 20px;
}

.artigo-texto-conteudo p {
    margin-bottom: 25px;
}

/* Responsividade */
@media (max-width: 768px) {
    .artigo-titulo-principal {
        font-size: 1.8rem;
    }

    .artigo-corpo {
        margin-top: 0;
        padding: 20px;
        box-shadow: none;
    }
}

/* =========================================
   TEMPLATE PÁGINA DE ARTIGO 
   ========================================= */

.hero-title.artigos {
    color: #E2F1F5;
}

.hero-text-artigos {
    color: #DCF7FE;
}

.card-meta-top {
    font-size: 0.85rem;
    color: #00414C;
    /* Tom de teal idêntico à imagem */
    font-weight: 400;
    margin-top: 0;
    margin-bottom: 12px;
}

.card-title-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 12px;
}

.card-titulo-texto {
    font-size: 0.9rem;
    color: #00414C;
    /* Azul petróleo escuro */
    margin: 0;
    line-height: 1.4;
    font-weight: 600;

    /* Mágica para truncar o título em 2 linhas com "..." */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-arrow-icon {
    color: #64748b;
    /* Cinza médio */
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    margin-top: 2px;
    transition: transform 0.2s ease, color 0.2s ease;
}

.card-resumo {
    font-size: 0.7rem;
    color: #64748b;
    /* Cinza de leitura */
    line-height: 1.6;
    margin: 0;
    font-weight: 400;

    /* Trunca o resumo em 2 linhas com "..." */
    max-height: 75px;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-biblioteca:hover .card-arrow-icon {
    color: var(--primary-green, #B2D235);
    transform: translate(2px, -2px);
}

.artigo-page {
    background-color: #F9FDFE;
}

.artigo-hero .container-artigo {
    position: relative;
    z-index: 2;
    /* Garante que o texto fique acima do fundo escuro */
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Breadcrumb */
.artigo-breadcrumb {
    font-size: 0.85rem;
    color: #94a3b8;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.artigo-breadcrumb a {
    color: #a5c0cc;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: color 0.3s;
}

.artigo-breadcrumb a {
    color: #94a3b8;
    text-decoration: none;
    transition: color 0.2s;
}

.artigo-breadcrumb a:hover {
    color: #fff;
}

.artigo-breadcrumb .separator {
    width: 14px;
    height: 14px;
}

.artigo-breadcrumb .lucide {
    width: 16px;
    height: 16px;
}

/* Tag Artigo */
.artigo-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: rgba(255, 255, 255, 0.1);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.artigo-tag .dot {
    width: 8px;
    height: 8px;
    background-color: var(--primary-green);
    border-radius: 50%;
}

/* Título Principal */
.artigo-title {
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 30px;
    line-height: 1.2;
    max-width: 900px;
}

.artigo-meta-top {
    display: flex;
    align-items: center;
    gap: 25px;
    font-size: 0.95rem;
    color: #e2e8f0;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

.meta-item i {
    width: 18px;
    height: 18px;
}

.meta-pill {
    background: #fff;
    color: var(--dark-blue);
    padding: 6px 18px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.85rem;
}

/* Meta Info e Botões de Share */
.artigo-meta-share {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 25px;
}

.artigo-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.95rem;
    color: #e1edf2;
}

.artigo-meta .meta-dot {
    color: #a5c0cc;
}

.artigo-share {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.95rem;
    color: #e1edf2;
}

.share-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--white);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
}

.share-btn:hover {
    background: var(--primary-green);
    border-color: var(--primary-green);
    color: var(--dark-blue);
}

/* --- CORPO E GRID (2 COLUNAS) --- */
.artigo-content-section {
    padding: 60px 0;
}

.artigo-content-section .container-artigo {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

.artigo-main-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    /* Proporção das colunas (Conteúdo vs Sidebar) */
    gap: 60px;
}

/* Efeito da Imagem Sobreposta */
.artigo-cover-wrapper {
    margin-top: -90px;
    /* Faz a foto subir 90px para cima do fundo azul */
    position: relative;
    z-index: 10;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 51, 72, 0.1);
    margin-bottom: 50px;
}

.artigo-cover-img {
    width: 100%;
    height: auto;
    max-height: 500px;
    object-fit: cover;
    display: block;
}

/* Tempo de leitura no topo esquerdo */
.artigo-read-time {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    color: #176b74;
    /* Teal idêntico à imagem */
    font-weight: 500;
    margin-bottom: 40px;
}

.artigo-read-time i {
    width: 20px;
    height: 20px;
}

/* Formatação do Texto do Artigo */
.artigo-body {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #334155;
    margin-bottom: 60px;
}

artigo-body p {
    margin-bottom: 20px;
}

.artigo-body h2,
.artigo-body h3 {
    color: var(--dark-blue);
    margin: 40px 0 20px;
}

.artigo-body ul {
    margin-bottom: 25px;
    padding-left: 20px;
}

.artigo-body li {
    margin-bottom: 10px;
}

.artigo-author-box {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 50px;
}

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

.author-details {
    font-size: 0.95rem;
    color: #176b74;
}

.author-details strong {
    font-weight: 700;
    color: #003d4a;
}

/* Botões de Navegação */
/* Botões de Navegação do Artigo */
.artigo-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #e2e8f0;
    padding-top: 30px;
    margin-top: 40px;
    width: 100%;
}

/* Nova classe exclusiva para evitar conflito com o carrossel */
.artigo-nav-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #334155;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: color 0.2s ease, transform 0.2s ease;
    /* Resetando propriedades que possam vir de outros lugares */
    background: transparent;
    width: auto;
    height: auto;
    position: relative;
}

.artigo-nav-btn:hover {
    color: #176b74;
}

.artigo-nav-btn:first-child:hover {
    transform: translateX(-4px);
}

.artigo-nav-btn:last-child:hover {
    transform: translateX(4px);
}

.artigo-nav-btn svg {
    width: 18px;
    height: 18px;
    stroke-width: 2px;
}

/* --- SIDEBAR DIREITA --- */
.sidebar-widget {
    background: #fff;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    margin-bottom: 30px;
    border: 1px solid #f1f5f9;
}

.sidebar-widget h3 {
    font-size: 1.1rem;
    color: #001212;
    margin-bottom: 20px;
    font-weight: 700;
}

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

.tag-pill {
    background: #f0f7f9;
    color: #334155;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
}

.related-card {
    display: flex;
    gap: 15px;
    text-decoration: none;
    color: inherit;
    align-items: center;
    margin-bottom: 12px;
    transition: transform 0.2s;
}

.related-img {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    object-fit: cover;
}

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

.related-badge {
    align-self: flex-start;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-size: 0.75rem;
    padding: 2px 10px;
    border-radius: 12px;
    font-weight: 500;
}

.related-info h4 {
    font-size: 0.9rem;
    font-weight: 700;
    color: #001212;
    margin: 0;
    line-height: 1.3;
}

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

/* Responsividade Mobile */
@media (max-width: 768px) {
    .artigo-title {
        font-size: 2rem;
    }

    .artigo-meta-top {
        flex-wrap: wrap;
    }

    .artigo-navigation {
        flex-direction: column;
        gap: 20px;
        align-items: flex-start;
    }

    .artigo-nav-btn:last-child {
        align-self: flex-start;
        flex-direction: row-reverse;
    }

    .artigo-meta-share {
        flex-direction: column;
        align-items: flex-start;
    }

    .artigo-cover-wrapper {
        margin-top: -50px;
        /* Ajusta a sobreposição no celular */
    }
}

/* =========================================
   ATUALIZAÇÃO: TEXTOS PRÉ-INSCRIÇÃO (ESQUERDA)
   ========================================= */

.pre-inscricao-left {
    max-width: 500px;
}

.pre-inscricao-tag {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: #94a3b8;
    /* Cinza claro azulado */
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.pre-inscricao-left h2 {
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--white, #ffffff);
    line-height: 1.2;
    margin-bottom: 20px;
    /* Remove a margem padrão caso o antigo H1 tivesse */
    margin-top: 0;
}

.pre-inscricao-desc {
    font-size: 1.05rem;
    color: #cbd5e1;
    line-height: 1.6;
    margin-bottom: 30px;
}

/* --- Lista de Benefícios --- */
.pre-inscricao-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.pre-inscricao-list li {
    position: relative;
    padding-left: 20px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #f1f5f9;
    /* Branco ligeiramente suavizado para não cansar a vista */
    line-height: 1.4;
}

/* Bolinha da lista */
.pre-inscricao-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #ffffff;
    font-size: 1.2rem;
    /* Um pouco maior para imitar o print */
    line-height: 1.1;
}

/* Responsividade (Tablets e Mobile) */
@media (max-width: 900px) {
    .pre-inscricao-left {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .pre-inscricao-left h2 {
        font-size: 2rem;
    }
}

/* =========================================
   ATUALIZAÇÃO: TEXTOS AVISO PRÓXIMA EDIÇÃO (ESQUERDA)
   ========================================= */

.aviso-edicao-left {
    max-width: 500px;
    text-align: center;
    /* Centraliza todo o conteúdo do lado esquerdo */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Garante que os blocos internos alinhem ao centro */
}

.aviso-tag {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: #cbd5e1;
    /* Branco ligeiramente acinzentado */
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 25px;
}

.aviso-edicao-left h2 {
    font-size: 2.1rem;
    font-weight: 700;
    color: var(--white, #ffffff);
    line-height: 1.3;
    margin-bottom: 25px;
    margin-top: 0;
    max-width: 450px;
}

.aviso-desc {
    font-size: 1.05rem;
    color: #e2e8f0;
    line-height: 1.6;
    margin: 0;
    max-width: 460px;
    /* Força a quebra de linha igual à do print */
}

/* Responsividade */
@media (max-width: 900px) {
    .aviso-edicao-left {
        max-width: 100%;
        padding: 0 15px;
    }
}

@media (max-width: 768px) {
    .aviso-edicao-left h2 {
        font-size: 1.8rem;
    }
}

.card-autor {
    font-size: 0.85rem;
    color: #64748b;
    margin-top: -8px;
    /* Puxa para perto do título */
    margin-bottom: 12px;
    font-weight: 500;
}

/* ==========================================
   ESTILIZAÇÃO DO BANNER DE COOKIES
   ========================================== */

/* 1. O Container Principal (Transformando em um Card Flutuante) */
.cc-window.cc-banner {
    position: fixed !important;
    bottom: 24px !important;
    left: 24px !important;
    right: auto !important;
    top: auto !important;
    max-width: 420px !important;
    background-color: #ffffff !important;
    border-radius: 12px !important;
    padding: 24px !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    z-index: 99999 !important;
    font-family: system-ui, -apple-system, sans-serif !important;
}

/* Responsividade para celulares: card ocupa quase toda a largura */
@media (max-width: 480px) {
    .cc-window.cc-banner {
        bottom: 16px !important;
        left: 16px !important;
        right: 16px !important;
        max-width: 100% !important;
        width: auto !important;
    }
}

/* 2. O Texto do Aviso */
.cc-window .cc-message {
    color: #4b5563 !important;
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    display: block !important;
}

/* 3. O Link "Saiba mais" */
.cc-window .cc-link {
    color: #14b8a6 !important;
    /* Cor principal (Verde/Teal) */
    text-decoration: none !important;
    font-weight: 600 !important;
    display: inline-block !important;
    margin-top: 4px !important;
    transition: color 0.2s ease !important;
}

.cc-window .cc-link:hover {
    color: #0f766e !important;
    /* Cor um pouco mais escura no hover */
    text-decoration: underline !important;
}

/* 4. Container do Botão */
.cc-window .cc-compliance {
    display: flex !important;
    justify-content: flex-end !important;
    margin-top: 8px !important;
}

/* 5. O Botão "Ok, entendi!" */
.cc-window .cc-btn {
    background-color: #14b8a6 !important;
    /* Cor principal */
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 10px 24px !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease, transform 0.1s ease !important;
    text-align: center !important;
    flex: 1 !important;
    /* Faz o botão esticar no mobile */
}

/* Efeito de hover no botão */
.cc-window .cc-btn:hover {
    background-color: #0d9488 !important;
}

.cc-window .cc-btn:active {
    transform: scale(0.98) !important;
}

@media (min-width: 481px) {
    .cc-window .cc-btn {
        flex: none !important;
        /* Tira o esticamento no desktop */
    }
}

/* =========================================
   FAQ EXCLUSIVO: GUIA DE EQUIPAMENTOS
   ========================================= */

.guia-faq-header {
    border-top: 1px solid #d1d5db;
    /* Linha de 1px (cinza clara, ajuste a cor se preferir) */
    padding-top: 15px;
    /* Distância exata de 15px entre a linha e o texto */
    margin-bottom: 30px;
    /* Espaço abaixo do título para as perguntas */
}

.guia-faq-header h2 {
    font-size: 1.8rem;
    color: #001212;
    font-weight: 700;
    /* Garante o negrito para o "FAQ -" */
    margin: 0;
    text-align: left;
}

/* Nova regra para o texto normal */
.guia-faq-header h2 span {
    font-weight: 400;
    /* Deixa o "Perguntas Frequentes" com a espessura normal da fonte */
}

.guia-faq-section {
    padding: 80px 20px;
}

.guia-faq-container {
    max-width: 900px;
    margin: 0 auto;
}

.guia-faq-header h2 {
    font-size: 1.8rem;
    color: #001212;
    font-weight: 700;
    margin-bottom: 30px;
    text-align: left;
    /* Título alinhado à esquerda como no modelo */
}

.guia-faq-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.guia-faq-item {
    background-color: #051313;
    /* Fundo do card fechado (escuro padrão Greener) */
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.guia-faq-question {
    padding: 22px 30px;
    color: #ffffff;
    /* Título da pergunta em branco */
    font-weight: 700;
    font-size: 1.05rem;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
}

/* Esconde a seta padrão do navegador */
.guia-faq-question::-webkit-details-marker {
    display: none;
}

/* Seta customizada (Verde Limão) */
.guia-faq-question::before {
    content: '∨';
    margin-right: 15px;
    font-size: 0.9rem;
    font-weight: 900;
    color: #B2D235;
    /* Verde Limão Oficial */
    transition: transform 0.3s ease;
}

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

/* Área da Resposta */
.guia-faq-answer {
    padding: 25px 30px;
    background-color: #062329;
    /* Fundo da área aberta (Azul Petróleo Escuro) */
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Texto da Resposta (Branco acinzentado para destacar contra o fundo escuro) */
.guia-faq-answer p {
    margin: 0;
    color: #e2e8f0;
    line-height: 1.6;
    font-size: 0.95rem;
    font-weight: 400;
}

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

    .guia-faq-answer {
        padding: 20px;
    }
}

/* =========================================
   CTA: SENTIU FALTA DO SEU EQUIPAMENTO
   ========================================= */

.guia-cta-equipamento {
    /* O linear-gradient aplica a cor azul petróleo transparente por cima da foto */
    /* Substitua a URL abaixo pela imagem real do seu projeto */
    background: linear-gradient(rgba(11, 35, 45, 0.85), rgba(11, 35, 45, 0.85)),
        url('/img/educacao/MASTERCLASS_STORAGE.png') center/cover no-repeat;
    padding: 90px 20px;
    text-align: center;
    color: #ffffff;
}

.guia-cta-container {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.guia-cta-equipamento h2 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 20px;
    letter-spacing: -0.5px;
    color: #ffffff;
}

.guia-cta-equipamento p {
    font-size: 1.15rem;
    color: #e2e8f0;
    /* Branco levemente acinzentado para leitura suave */
    line-height: 1.6;
    margin-bottom: 35px;
    font-weight: 400;
}

/* O Botão Verde Limão */
.btn-guia-incluir {
    display: inline-block;
    background-color: #B2D235;
    /* Verde padrão da Greener */
    color: #001212;
    /* Texto bem escuro para dar alto contraste */
    padding: 14px 35px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 1.05rem;
    text-decoration: none;
    transition: transform 0.2s ease, filter 0.2s ease;
}

/* Efeito ao passar o mouse */
.btn-guia-incluir:hover {
    transform: translateY(-2px);
    /* Dá uma leve "levantadinha" */
    filter: brightness(0.95);
    /* Escurece 5% para indicar o hover */
}

/* =========================================
   RESPONSIVIDADE (Tablets e Celulares)
   ========================================= */
@media (max-width: 768px) {
    .guia-cta-equipamento {
        padding: 60px 20px;
    }

    .guia-cta-equipamento h2 {
        font-size: 1.8rem;
    }

    .guia-cta-equipamento p {
        font-size: 1rem;
        /* No celular, removemos a quebra de linha forçada (<br>) para o texto fluir natural */
    }

    .guia-cta-equipamento p br {
        display: none;
    }
}

/* ==========================================
   ESTILOS INTERNOS DOS ARTIGOS
========================================== */

/* Justifica apenas os parágrafos dentro da área do artigo */
#conteudo-artigo p {
    text-align: justify;
}

/* Controla o tamanho das imagens inseridas no meio do texto */
#conteudo-artigo .img-responsiva {
    width: 100%;
    max-width: 650px;
    /* Altere este valor para ajustar o limite de crescimento */
    height: auto;
    /* Mantém a proporção original da imagem */
    display: block;
}

/* Bloco Principal - O background fica restrito apenas a esta section */
.greener-bess {
    background: linear-gradient(135deg, #2a414b 0%, #111e24 100%);
    color: #ffffff;
    padding: 80px 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Removido o font-family para herdar do seu style.css global */
}

/* Container interno com limite de largura */
.greener-bess__container {
    max-width: 1200px;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

/* Tipografia e espaçamentos internos */
.greener-bess__content {
    flex: 1;
    max-width: 580px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.greener-bess__pre-title {
    font-size: 18px;
    color: #b0c9cf;
    margin: 0 0 24px 0;
    font-weight: 300;
}

.greener-bess__pre-title strong {
    color: #ffffff;
    font-weight: 400;
}

.greener-bess__title {
    font-size: 40px;
    line-height: 1.2;
    font-weight: 500;
    margin: 0 0 24px 0;
    letter-spacing: -0.5px;
}

.greener-bess__highlight {
    color: #89d1e3;
    font-weight: 600;
}

.greener-bess__description {
    font-size: 16px;
    line-height: 1.5;
    color: #e2e8f0;
    margin: 0 0 40px 0;
    max-width: 500px;
}

/* Estilização específica do botão para não conflitar com classes como .btn do seu global */
.greener-bess__cta {
    background: linear-gradient(90deg, #6ec0d8 0%, #9be4f2 100%);
    color: #0d2127;
    border: none;
    border-radius: 6px;
    padding: 16px 32px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s ease;
    margin: 0 0 24px 0;
    font-family: inherit;
    /* Garante que o botão puxe a fonte correta */
}

.greener-bess__cta:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}

.greener-bess__footer {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #b0c9cf;
}

/* Área da Imagem */
.greener-bess__image-wrapper {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.greener-bess__image {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0px 20px 30px rgba(0, 0, 0, 0.3));
}

/* Media Queries Responsivas (também escopadas) */
@media (max-width: 992px) {
    .greener-bess__container {
        flex-direction: column;
        text-align: center;
    }

    .greener-bess__content {
        align-items: center;
    }

    .greener-bess__description {
        text-align: center;
    }
}

@media (max-width: 480px) {
    .greener-bess {
        padding: 48px 20px;
    }

    .greener-bess__title {
        font-size: 32px;
    }
}

/* Container principal - agora com fundo azul claro e largura total */
.greener-marquee {
    background-color: #89d1e3;
    /* Azul claro */
    padding: 24px 0;
    overflow: hidden;
    width: 100vw;
    /* Força a ocupar toda a largura da tela */
    max-width: 100%;
    position: relative;
    display: flex;
}

/* A trilha animada */
.greener-marquee__track {
    display: flex;
    width: max-content;
    /* Usando translate3d no keyframe abaixo para ativar aceleração de hardware (GPU) e deixar fluido */
    animation: greenerScroll 30s linear infinite;
}

/* Bloco de conteúdo */
.greener-marquee__content {
    display: flex;
    flex-shrink: 0;
    /* O SEGREDO AQUI: Impede que os textos sejam espremidos na tela */
    gap: 40px;
    padding-right: 40px;
    /* O padding deve ser exatamente igual ao gap para o loop ficar perfeito */
    align-items: center;
}

/* Os textos limpos */
.greener-marquee__item {
    color: #0d2127;
    /* Cor escura da marca para dar bom contraste */
    font-size: 18px;
    font-weight: 600;
    white-space: nowrap;
    /* Impede a quebra de linha nas palavras */
}

/* Keyframe otimizado */
@keyframes greenerScroll {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(-50%, 0, 0);
    }
}

/* =========================================
   SEÇÃO BESS (Estilos Isolados)
========================================= */

/* Garante que o box-sizing correto seja aplicado apenas dentro desta seção */
.bess-section,
.bess-section * {
    box-sizing: border-box;
}

.bess-section {
    padding: 60px 20px;
    display: flex;
    justify-content: center;
    /* A fonte será herdada do seu style.css global. 
     Se precisar forçar uma fonte específica apenas aqui, descomente abaixo: */
    /* font-family: 'Inter', sans-serif; */
    color: #333;
    line-height: 1.6;
    background-color: #fff;
    /* Herda o fundo global, ou mude para #fff se necessário */
}

.bess-container {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 60px;
    max-width: 1100px;
    width: 100%;
}

/* --- COLUNA ESQUERDA --- */
.bess-left-col {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.bess-format-card {
    border: 2px solid #a8dbec;
    border-radius: 8px;
    padding: 20px 24px;
    background-color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.bess-format-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #2b708b;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    display: block;
}

.bess-format-title {
    font-size: 1.25rem;
    color: #0b3242;
    margin-bottom: 4px;
    margin-top: 0;
    font-weight: bold;
}

.bess-format-desc {
    font-size: 0.85rem;
    color: #666;
    margin: 0;
}

/* Timeline/Cards Escuros */
.bess-steps-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.bess-steps-wrapper::before {
    content: '';
    position: absolute;
    left: 45px;
    top: 20px;
    bottom: 20px;
    width: 2px;
    background-color: #72c1d9;
    z-index: 0;
}

.bess-step-card {
    background-color: #082029;
    border-radius: 8px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 1;
    box-shadow: 0 6px 16px rgba(8, 32, 41, 0.4);
}

.bess-step-icon {
    width: 50px;
    height: 50px;
    background-color: #72c1d9;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.bess-step-icon svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bess-step-content h4 {
    color: #ffffff;
    font-size: 1.1rem;
    margin: 0 0 2px 0;
    font-weight: 600;
}

.bess-step-content p {
    color: #aebfc6;
    font-size: 0.85rem;
    margin: 0;
}

/* --- COLUNA DIREITA --- */
.bess-right-col {
    display: flex;
    flex-direction: column;
    padding-top: 10px;
}

.bess-eyebrow {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #2b708b;
    letter-spacing: 1px;
    margin-bottom: 16px;
}

.bess-main-heading {
    font-size: 2rem;
    line-height: 1.2;
    margin: 0 0 30px 0;
}

.bess-dark-text {
    color: #0b3242;
    font-weight: 600;
}

.bess-highlight-text {
    color: #63b4cd;
    font-weight: 600;
}

.bess-text-content p {
    color: #1a4253;
    margin: 0 0 24px 0;
    font-size: 1.05rem;
    line-height: 1.6;
}

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

    .bess-steps-wrapper::before {
        left: 41px;
    }
}

/* ==========================================================================
   Cronograma Section (Timeline) - Fiel ao Design
   ========================================================================== */

.cronograma-section {
    /* Forçando as cores exatas da imagem para não depender do global */
    --bg-section: #121e24;
    /* Cor de fundo escura azulada */
    --timeline-line: #9eb6c6;
    /* Cor da linha e bolinhas */
    --timeline-border: #2c3f4c;
    /* Cor da borda dos cards normais */
    --timeline-active: #d9f18a;
    /* Verde limão do card ativo */
    --text-muted: #9eb6c6;
    /* Texto descritivo mais claro */

    background-color: var(--bg-section);
    /* Aplica o fundo escuro */
    padding: 5rem 0;
    /* Garante que o texto da seção toda tenha uma base clara */
    color: #ffffff;
}

.cronograma-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 5rem;
    gap: 1.5rem;
}

.subtitle-text {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--timeline-line);
    display: block;
    margin-bottom: 1rem;
}

.header-titles h2 {
    color: #ffffff;
    margin: 0;
    line-height: 1.3;
}

.header-desc p {
    text-align: right;
    margin: 0;
    color: var(--text-muted);
}

/* =========================================
   Timeline Layout Principal
   ========================================= */
.timeline {
    position: relative;
    max-width: 100%;
    margin: 0 auto;
}

/* Linha central vertical */
.timeline::after {
    content: '';
    position: absolute;
    width: 2px;
    background-color: var(--timeline-line);
    top: 1.25rem;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
}

.timeline-item {
    padding: 0.625rem 3.125rem;
    position: relative;
    width: 50%;
}

.timeline-item.left {
    left: 0;
}

.timeline-item.right {
    left: 50%;
}

/* Bolinhas da timeline */
.timeline-item::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    background-color: var(--timeline-line);
    border-radius: 50%;
    top: 3.125rem;
    z-index: 1;
    /* Efeito de brilho/sombra ao redor da bolinha */
    box-shadow: 0 0 0 6px rgba(158, 182, 198, 0.2);
}

.left::after {
    right: -6px;
}

.right::after {
    left: -6px;
}

/* =========================================
   Caixas de Texto (Cards)
   ========================================= */
.timeline-card {
    /* Forçando o fundo do card para esconder qualquer linha passando por trás */
    background-color: var(--bg-section);
    border: 1px solid var(--timeline-border);
    border-radius: 12px;
    padding: 2rem;
    position: relative;
    transition: border-color 0.3s ease;
    width: 100%;
}

.timeline-card.active {
    border-color: var(--timeline-active);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

/* Tags de data do card */
.timeline-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--timeline-border);
    padding: 0.25rem 0.75rem;
    border-radius: 50px;
    font-size: 0.75rem;
    color: var(--timeline-line);
    letter-spacing: 0.5px;
}

.timeline-badge .dot {
    width: 4px;
    height: 4px;
    background-color: var(--timeline-line);
    border-radius: 50%;
}

.ep-number {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* Blindando a tipografia interna dos cards contra o CSS Global */
.timeline-card h3 {
    color: #ffffff;
    font-size: 1.25rem;
    margin: 0 0 1rem 0 !important;
    /* Força zerar margens globais */
    line-height: 1.4;
    font-weight: 600;
}

.date-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #ffffff;
    font-size: 0.875rem;
    margin-bottom: 1.25rem;
}

.timeline-card p {
    color: var(--text-muted);
    margin: 0 !important;
    /* Força zerar margens globais */
    font-size: 0.875rem;
    line-height: 1.6;
}

.action-link {
    display: inline-block;
    margin-top: 1.5rem;
    color: #ffffff;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: color 0.2s;
}

.action-link:hover {
    color: var(--timeline-active);
}

/* =========================================
   Responsividade Mobile/Tablets
   ========================================= */
@media screen and (max-width: 768px) {
    .cronograma-header {
        flex-direction: column;
    }

    .header-desc p {
        text-align: left;
    }

    .timeline::after {
        left: 20px;
        transform: none;
    }

    .timeline-item {
        width: 100%;
        padding-left: 60px;
        padding-right: 0;
    }

    .timeline-item.left,
    .timeline-item.right {
        left: 0;
    }

    .timeline-item.left::after,
    .timeline-item.right::after {
        left: 14px;
    }
}

/* Escopo isolado para a seção Conexão BESS */
.cb-section {
    padding: 80px 20px;
    background-color: #fff;
    /* Herda a fonte do seu style.css global, mas você pode forçar uma aqui se precisar */
    text-align: center;
}

.cb-container {
    max-width: 1000px;
    margin: 0 auto;
}

.cb-subtitle {
    color: #2a869e;
    font-weight: bold;
    letter-spacing: 1.5px;
    font-size: 14px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.cb-title {
    color: #004a61;
    font-size: 32px;
    margin-bottom: 15px;
    font-weight: 700;
    line-height: 1.2;
}

.cb-description {
    color: #555;
    max-width: 700px;
    margin: 0 auto 50px;
    line-height: 1.5;
    font-size: 16px;
}

/* Grid Layout */
.cb-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}

/* Card Styling */
.cb-card {
    background-color: #c0e8f4;
    border-radius: 12px;
    padding: 30px;
    display: flex;
    align-items: center;
    text-align: left;
    gap: 20px;
    box-sizing: border-box;
}

.cb-icon-box {
    background-color: #fff;
    width: 60px;
    height: 60px;
    min-width: 60px;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Ícones Geométricos Isolados */
.cb-inner-icon {
    width: 24px;
    height: 24px;
    border: 2px solid #000;
    box-sizing: border-box;
}

.cb-icon-rhombus-filled {
    transform: rotate(45deg);
    background-color: #000;
    width: 14px;
    height: 14px;
    outline: 2px solid #000;
    outline-offset: 4px;
}

.cb-icon-rhombus-outline {
    transform: rotate(45deg);
}

.cb-icon-circle-outline {
    border-radius: 50%;
}

.cb-icon-circle-dot {
    border-radius: 50%;
    background: radial-gradient(circle, #000 40%, transparent 40%);
}

/* Isolamento de tags filhas para não sofrerem impacto do global */
.cb-text-content h3 {
    color: #004a61;
    font-size: 18px;
    margin: 0 0 8px 0;
    font-weight: 700;
    line-height: 1.2;
}

.cb-text-content p {
    color: #555;
    font-size: 14px;
    margin: 0;
    line-height: 1.4;
}

/* Botão CTA Isolado */
.cb-btn-cta {
    display: inline-block;
    background: linear-gradient(to right, #6eb7d6, #bde6f2);
    color: #004a61;
    text-decoration: none;
    font-weight: bold;
    padding: 18px 45px;
    border-radius: 8px;
    font-size: 14px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease;
}

.cb-btn-cta:hover {
    transform: translateY(-2px);
    color: #004a61;
    /* Garante que a cor não mude caso o hover de <a> global altere isso */
}

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

    .cb-card {
        padding: 20px;
    }
}

/* --- PATROCÍNIO --- */

/* Escopo isolado para a seção de patrocínio */
.gr-sponsorship {
    background-color: #f0f7f9 !important;
    /* Força o fundo claro se o global tiver escuro */
    padding: 80px 20px;
    width: 100%;
    box-sizing: border-box;
}

.gr-sponsorship__container {
    max-width: 1200px;
    /* Aumentei um pouco para acomodar melhor os 50% */
    margin: 0 auto;
    display: flex;
    gap: 40px;
    /* Espaço entre as duas metades */
    align-items: flex-start;
    /* Alinha o card pelo topo do texto */
}

.gr-sponsorship__content {
    flex: 1;
    /* Ocupa exatamente metade do espaço disponível */
}

.gr-sponsorship__sidebar {
    flex: 1;
    /* Ocupa a outra metade exata */
    display: flex;
    justify-content: flex-end;
    /* Alinha o card à direita da sua metade */
}

.gr-sponsorship__eyebrow {
    display: block;
    font-weight: 700;
    letter-spacing: 2px;
    color: #4c8b91;
    margin-bottom: 20px;
    font-size: 14px;
}

.gr-sponsorship__title {
    font-size: 42px !important;
    /* Garante o tamanho da imagem independente do seu h1 global */
    line-height: 1.1 !important;
    margin-bottom: 30px !important;
    font-weight: 700 !important;
    color: #1a2b2e !important;
}

.gr-sponsorship__text {
    line-height: 1.6 !important;
    margin-bottom: 20px !important;
    font-size: 16px !important;
    color: #3e5255 !important;
    text-transform: none !important;
    /* Previne uppercase global */
}

/* Estilização do Card Dark */
.gr-card {
    background-color: #112226;
    border-radius: 12px;
    color: #ffffff;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.gr-card__header {
    padding: 25px 30px;
    border-bottom: 1px solid #334448;
}

.gr-card__label {
    font-size: 13px !important;
    letter-spacing: 1px;
    margin: 0;
    color: #ffffff;
    opacity: 0.8;
}

.gr-card__body {
    padding: 30px;
}

.gr-card__tier {
    border: 1px solid #4c8b91;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.gr-card__tier-title {
    font-size: 18px !important;
    margin-bottom: 10px !important;
    color: #ffffff !important;
}

.gr-card__tier-desc {
    font-size: 14px !important;
    line-height: 1.5;
    color: #a0b1b4 !important;
    margin: 0;
}

.gr-card__footer {
    padding: 25px 30px;
    border-top: 1px solid #334448;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.gr-card__footer-info {
    font-size: 13px !important;
    line-height: 1.4;
    color: #a0b1b4 !important;
    margin: 0;
}

.gr-card__cta {
    text-decoration: none !important;
    color: #ffffff !important;
    border: 1px solid #ffffff !important;
    padding: 10px 18px !important;
    border-radius: 6px;
    font-size: 14px;
    white-space: nowrap;
    transition: all 0.3s;
    background: transparent !important;
}

.gr-card__cta:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Mobile */
@media (max-width: 900px) {
    .gr-sponsorship__container {
        flex-direction: column;
        padding: 0 20px;
    }

    .gr-sponsorship__title {
        font-size: 32px !important;
    }

    .gr-card__footer {
        flex-direction: column;
        text-align: center;
    }
}

/* Container Principal - Isolando do seu 'section' global */
.sponsorship-section {
    background-color: #f0f7f9;
    padding: 60px 20px;
    width: 100%;
    box-sizing: border-box;
    display: block;
    /* Garante que ignore flexbox/grid do pai se houver */
}

.sponsorship-section .sponsorship-container {
    max-width: 1140px;
    margin: 0 auto;
}

/* Título - Isolando do seu 'h2' global */
.sponsorship-section .sponsorship-title {
    color: #1a2e35;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 40px;
    text-align: left;
    border: none;
    /* Remove possíveis bordas do seu h2 global */
}

/* Grid de Cards */
.sponsorship-section .sponsorship-grid {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 50px;
}

/* Card Individual */
.sponsorship-section .sponsorship-card {
    background-color: #2d4f59;
    color: #ffffff;
    padding: 40px 30px;
    border-radius: 12px;
    flex: 1;
    min-width: 300px;
    max-width: 360px;
    text-align: left;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
}

/* Elementos internos dos cards */
.sponsorship-section .card-num {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 25px;
    display: block;
}

.sponsorship-section .card-head {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.3;
    color: #ffffff;
}

.sponsorship-section .card-txt {
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
    opacity: 0.9;
}

/* Botão - Isolando do seu '.btn' ou 'button' global */
.sponsorship-section .sponsorship-actions {
    text-align: center;
}

.sponsorship-section .sponsorship-btn {
    background-color: #c1d045;
    color: #1a2e35;
    padding: 16px 32px;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: none;
    /* Evita que herde uppercase do global */
}

.sponsorship-section .sponsorship-btn:hover {
    background-color: #acc12e;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(193, 208, 69, 0.4);
}

/* Ajuste Responsivo */
@media (max-width: 992px) {
    .sponsorship-section .sponsorship-grid {
        flex-direction: column;
        align-items: center;
    }

    .sponsorship-section .sponsorship-card {
        max-width: 500px;
        width: 100%;
    }
}

/* ==========================================================================
   Nova formatação da coluna esquerda (Hero/Contato)
   ========================================================================== */

.greendex-contact-left-modern {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
}

/* Tag de "Inscrição Gratuita" */
.greendex-contact-left-modern .greendex-badge {
    color: #C6F1FC;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 16px;
}

/* Título Principal */
.greendex-contact-left-modern .greendex-title {
    font-size: 2.5rem;
    /* Ajuste o tamanho conforme a necessidade */
    line-height: 1.2;
    color: var(--white, #ffffff);
    margin-bottom: 16px;
    font-weight: bold;
}

/* Parágrafo de Descrição */
.greendex-contact-left-modern .greendex-description {
    font-size: 1.125rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    /* Branco com leve transparência */
    margin-bottom: 32px;
    max-width: 90%;
}

/* Lista de Benefícios */
.greendex-contact-left-modern .greendex-benefits {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.greendex-contact-left-modern .greendex-benefits li {
    position: relative;
    padding-left: 32px;
    font-size: 1rem;
    color: var(--white, #ffffff);
    line-height: 1.5;
}

/* Recria o checkmark verde dinamicamente */
.greendex-contact-left-modern .greendex-benefits li::before {
    content: '.';
    position: absolute;
    left: 0;
    top: 0;
    font-weight: bold;
    font-size: 1.2rem;
}

/* Escopo: Framework Dashboard (Prefixo: fw-dash-) */

.fw-dash-wrapper {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
    font-family: Arial, sans-serif;
    /* Opcional: remova se quiser herdar a fonte do projeto */
}

/* Título Principal */
.fw-dash-title {
    background-color: #72a578;
    color: white;
    text-align: center;
    padding: 15px;
    border-radius: 10px;
    font-weight: bold;
    font-size: 22px;
}

/* Cabeçalho da Tabela */
.fw-dash-header {
    background-color: #2b3b2d;
    color: white;
    display: grid;
    grid-template-columns: 35% 32.5% 32.5%;
    padding: 10px;
    border-radius: 10px;
    align-items: center;
    text-align: center;
}

.fw-dash-badge {
    background-color: #72a578;
    color: white;
    padding: 10px;
    padding-left: 50px;
    padding-right: 50px;
    border-radius: 10px;
    font-weight: bold;
    display: inline-block;
}

.fw-dash-header-label {
    font-weight: bold;
}

/* Linhas da Tabela */
.fw-dash-row {
    display: grid;
    grid-template-columns: 32% 32% 32%;
    gap: 15px;
}

.fw-dash-col {
    padding: 15px;
    border-radius: 10px;
    font-weight: bold;
    font-size: 16px;
    color: #333;
}

/* Alinhamento de texto por coluna */
.fw-dash-col:first-child {
    text-align: left;
}

.fw-dash-col:nth-child(2) {
    text-align: center;
}

.fw-dash-col:nth-child(3) {
    text-align: center;
}

/* Cores alternadas das linhas */
.fw-dash-bg-light {
    background-color: #f1f9f2;
}

.fw-dash-bg-dark {
    background-color: #c9ebd1;
}

/* Rodapé de Resumo */
.fw-dash-footer {
    background-color: #2b3b2d;
    padding: 15px;
    border-radius: 10px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.fw-dash-card {
    background-color: #659a68;
    color: white;
    padding: 20px;
    border-radius: 10px;
}

.fw-dash-num {
    font-size: 40px;
    font-weight: bold;
    margin: 0;
    line-height: 1;
}

.fw-dash-desc {
    font-size: 15px;
    margin-top: 8px;
    font-weight: bold;
}

/* ==========================================================================
   SEÇÃO HERO: CURSO ARMAZENAMENTO DE ENERGIA
   ========================================================================== */

.curso-arm-hero-section {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 80vh;
    background-color: var(--black);
    font-family: var(--inter);
    overflow: hidden;
}

/* --- Imagem (Atrás do painel escuro) --- */
.curso-arm-bg-image {
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
    /* Cobre a direita */
    height: 100%;
    /* Substitua pelo caminho da sua imagem */
    background-image: url('/img/cursos/foto2.png');
    background-size: cover;
    background-position: center left;
    z-index: 1;
}

/* --- Painel Escuro (A Máscara) --- */
.curso-arm-panel {
    position: relative;
    width: 65%;
    /* Esticado para dar espaço à curva no meio da tela */
    min-height: 80vh;
    background-color: #1b2f33;
    /* Fundo esverdeado */
    z-index: 2;

    /* Aplica o recorte exato do SVG invisível no HTML */
    clip-path: url(#panel-clip);

    display: flex;
    align-items: center;
    /* Padding direito agressivo (28%) para o texto não ultrapassar a linha curva */
    padding: 4rem 28% 4rem 10%;
}

/* --- Linha Curva em SVG --- */
.curso-arm-svg-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* Impede que a linha bloqueie cliques no texto */
    z-index: 3;
}

/* --- Textos e Interações --- */
.curso-arm-content {
    max-width: 600px;
    position: relative;
    z-index: 4;
}

.curso-arm-eyebrow {
    display: block;
    font-size: 0.85rem;
    letter-spacing: 2.5px;
    font-weight: 600;
    color: var(--white);
}

.curso-arm-divider {
    border: none;
    border-top: 1px solid var(--white);
    width: 100%;
    margin: 15px 0 35px 0;
    opacity: 0.7;
}

.curso-arm-title {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 25px;
    color: var(--white);
}

.curso-arm-desc {
    font-size: 1.1rem;
    color: #d1d5db;
    line-height: 1.6;
    margin-bottom: 25px;
}

.curso-arm-desc-italic {
    font-size: 1.05rem;
    color: #e2e8f0;
    font-style: italic;
    line-height: 1.6;
    margin-bottom: 40px;
}

.curso-arm-actions {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.curso-arm-btn {
    padding: 14px 28px;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.3s ease;
    text-align: center;
}

.curso-arm-btn-green {
    background-color: var(--primary-green);
    color: #001212;
}

.curso-arm-btn-green:hover {
    background-color: var(--primary-color-2);
    transform: translateY(-2px);
}

.curso-arm-btn-outline {
    background-color: transparent;
    color: var(--white);
    border: 1px solid var(--white);
}

.curso-arm-btn-outline:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

@media (max-width: 2050px) {

    .curso-arm-content {
        padding-top: 20px;
    }

}

/* --- Responsividade --- */
@media (max-width: 1024px) {
    .curso-arm-panel {
        width: 75%;
        padding-right: 32%;
    }

    .curso-arm-title {
        font-size: 2.8rem;
    }

    .curso-arm-hero-section {
        min-height: 90vh;
    }
}

@media (max-width: 768px) {
    .curso-arm-hero-section {
        flex-direction: column;
    }

    .curso-arm-panel {
        width: 100%;
        min-height: auto;
        clip-path: none;
        /* Remove a máscara curva no celular */
        padding: 3rem 5%;
    }

    .curso-arm-svg-line {
        display: none;
        /* Remove a linha decorativa no celular para um layout limpo */
    }

    .curso-arm-bg-image {
        position: relative;
        width: 100%;
        height: 400px;
    }

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

    .curso-arm-actions {
        flex-direction: column;
    }

    .curso-arm-btn {
        width: 100%;
    }
}

/* ==========================================================================
   SEÇÃO: UMA FORMAÇÃO ATUALIZADA (NOVA FASE)
   ========================================================================== */

.curso-arm-nova-fase-section {
    /* Fundo inspirado na imagem (um cinza/gelo muito claro) */
    background-color: #f4f7f8;
    padding: 80px 20px;
    font-family: var(--inter);
    /*[cite: 1]*/
}

.curso-arm-container {
    max-width: 1000px;
    /* Limita a largura para manter a leitura agradável */
    margin: 0 auto;
}

.curso-arm-nova-fase-title {
    /* Pode usar var(--dark-blue) do seu global se preferir[cite: 1] */
    color: #0b2229;
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 30px;
}

/* Layout flex para o parágrafo e a estrela */
.curso-arm-nova-fase-top-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    margin-bottom: 40px;
}

.curso-arm-nova-fase-desc {
    flex: 1;
    font-size: 1.1rem;
    color: #4b5563;
    /* Cinza médio para leitura */
    line-height: 1.6;
    margin: 0;
}

.curso-arm-nova-fase-graphic {
    flex-shrink: 0;
    /* Impede a estrela de ser esmagada em telas menores */
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 20px;
}

/* --- Lista com divisórias --- */
.curso-arm-nova-fase-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-width: 900px;
    /* Alinha a largura da lista um pouco antes do final do contêiner */
}

.curso-arm-nova-fase-list li {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 1.05rem;
    color: #4b5563;
    font-weight: 500;
    padding: 16px 0;
    /* Linha divisória fina que pega o tom do verde principal, com opacidade */
    border-bottom: 1px solid rgba(178, 210, 53, 0.5);
    /* Baseado no #b2d235 */
}

/* Remove a linha divisória do último item, como na imagem */
.curso-arm-nova-fase-list li:last-child {
    border-bottom: none;
}

/* A setinha verde */
.curso-arm-list-icon {
    width: 18px;
    height: 18px;
    color: var(--primary-green);
    /* Puxa a cor do :root[cite: 1] */
    flex-shrink: 0;
}

/* --- Responsividade --- */
@media (max-width: 768px) {
    .curso-arm-nova-fase-section {
        padding: 60px 20px;
    }

    .curso-arm-nova-fase-title {
        font-size: 1.8rem;
    }

    .curso-arm-nova-fase-top-row {
        flex-direction: column;
        gap: 30px;
    }

    /* No mobile, podemos centralizar o grafismo ou escondê-lo. Optei por deixá-lo no topo/centro. */
    .curso-arm-nova-fase-graphic {
        align-self: center;
        padding-right: 0;
        margin-bottom: 20px;
    }

    .curso-arm-nova-fase-list li {
        align-items: flex-start;
        /* Se o texto quebrar linha no mobile, a seta fica no topo */
    }

    .curso-arm-list-icon {
        margin-top: 4px;
        /* Ajuste visual para quando alinhar pelo topo */
    }
}

/* ==========================================================================
   SEÇÃO: JORNADA DE APRENDIZAGEM (CARROSSEL)
   ========================================================================== */

.curso-arm-jornada-section {
    background-color: #f4f7f8;
    /* Mantém o fundo gelo */
    padding: 60px 0 100px 0;
    /* Espaçamento interno */
    font-family: var(--inter);
    overflow: hidden;
    /* Evita que o carrossel gere barra de rolagem na página inteira */
}

/* O contêiner usa padding lateral no desktop para centralizar, mas deixa a direita livre pro carrossel vazar */
.curso-arm-jornada-section .curso-arm-container {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 20px;
}

/* --- Cabeçalho --- */
.curso-arm-jornada-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    padding-right: 20px;
    /* Compensa o padding lateral do contêiner */
}

.curso-arm-jornada-title {
    font-size: 2.2rem;
    color: #0b2229;
    /* Tom escuro azul/petróleo */
    font-weight: 700;
    margin: 0;
}

/* --- Botões de Navegação --- */
.curso-arm-jornada-nav {
    display: flex;
    gap: 15px;
}

.curso-arm-nav-btn {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    color: #0b2229;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
}

.curso-arm-nav-btn svg {
    width: 20px;
    height: 20px;
}

.curso-arm-nav-btn:hover {
    background-color: var(--primary-green);
    border-color: var(--primary-green);
    color: #001212;
    transform: translateY(-2px);
}

/* --- Pista do Carrossel --- */
.curso-arm-jornada-track {
    display: flex;
    gap: 20px;
    padding-bottom: 20px;
    /* Espaço para a sombra dos cards */
    padding-right: 40px;
    /* Espaço extra no final do scroll */

    /* Permite o scroll horizontal e esconde a barra */
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    /* "Ímã" nos cards */

    /* Esconde scrollbar nativo */
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.curso-arm-jornada-track::-webkit-scrollbar {
    display: none;
}

/* --- O Card --- */
.curso-arm-jornada-card {
    flex: 0 0 350px;
    /* Largura fixa do card. Não encolhe nem cresce. */
    scroll-snap-align: start;
    /* Onde o ímã "gruda" */
    background-color: #ffffff;
    border-radius: 12px;
    padding: 30px;
    border: 2px solid transparent;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

/* Estado Ativo e Hover (Borda verde limão como na imagem) */
.curso-arm-jornada-card.active,
.curso-arm-jornada-card:hover {
    border-color: var(--primary-green);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}

/* Ícone de Seta Descendo */
.curso-arm-card-icon {
    width: 28px;
    height: 28px;
    color: var(--primary-green);
    margin-bottom: 25px;
}

/* Título da Etapa */
.curso-arm-card-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #0b2229;
    line-height: 1.4;
    margin: 0 0 15px 0;
}

/* Descrição */
.curso-arm-card-desc {
    font-size: 0.95rem;
    color: #64748b;
    /* Cinza de leitura */
    line-height: 1.6;
    margin: 0 0 25px 0;
}

/* Lista de tópicos dentro do card */
.curso-arm-card-list {
    list-style: none;
    padding: 0;
    margin: auto 0 0 0;
    /* Empurra para o fundo se houver espaço */
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.curso-arm-card-list li {
    position: relative;
    padding-left: 15px;
    font-size: 0.9rem;
    color: #4b5563;
    line-height: 1.5;
}

.curso-arm-card-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: #4b5563;
    font-weight: bold;
}

/* --- Responsividade --- */
@media (max-width: 900px) {
    .curso-arm-jornada-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .curso-arm-jornada-section {
        padding: 60px 0;
    }

    .curso-arm-jornada-title {
        font-size: 1.8rem;
    }

    .curso-arm-jornada-card {
        flex: 0 0 85vw;
        /* No celular, o card ocupa quase toda a tela */
        padding: 25px;
    }
}

/* ==========================================================================
   SEÇÃO: PARA QUEM É / RESULTADOS DO CURSO
   ========================================================================== */

.curso-arm-target-section {
    background-color: var(--white);
    /* Puxa do seu global[cite: 2] */
    padding: 80px 20px 100px 20px;
    font-family: var(--inter);
    /* Puxa do seu global[cite: 2] */
}

.curso-arm-target-section .curso-arm-container {
    max-width: 1000px;
    margin: 0 auto;
}

/* --- Cabeçalho e Linha Decorativa Exata --- */
.curso-arm-target-header {
    display: flex;
    align-items: center;
    margin-bottom: 50px;
    position: relative;
    /* FUNDAMENTAL: Permite que a linha final vaze para fora da tela */
}

.curso-arm-target-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: #0b2229;
    margin: 0;
    padding-right: 30px;
    /* Distância entre o texto e o início da linha */
    white-space: nowrap;
    /* Impede a quebra de linha no desktop */
}

/* O container controla a altura e o alinhamento das 3 partes da linha */
.curso-arm-line-container {
    flex: 1;
    /* Estica para ocupar todo o espaço à direita do título */
    display: flex;
    align-items: flex-start;
    /* Fixa as linhas no topo (Y=0) */
    height: 40px;
    /* Altura exata da descida do SVG */
    transform: translateY(4px);
    /* Ajuste fino para alinhar visualmente com o meio do texto */
}

.curso-arm-line-straight {
    flex: 1;
    /* Empurra o SVG curvo para perto da borda direita */
    height: 2px;
    background-color: var(--primary-green);
    /* Puxa do seu global[cite: 2] */
    margin-top: 0;
    margin-right: -1px;
    /* Remove fresta de pixel entre a Div e o SVG */
}

.curso-arm-line-curve {
    flex-shrink: 0;
    /* Impede que o SVG amasse ou perca a proporção da curva */
    display: block;
}

.curso-arm-line-tail {
    width: 50vw;
    /* Tamanho exagerado para garantir que passe do limite da tela */
    height: 2px;
    background-color: var(--primary-green);
    /* Puxa do seu global[cite: 2] */
    align-self: flex-end;
    /* Fixa essa linha no fundo do container (Y=40) */
    margin-bottom: 0;
    margin-left: -1px;
    /* Remove fresta de pixel */
}

/* --- Grid de Cards --- */
.curso-arm-target-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-bottom: 80px;
    /* Espaço até a próxima área */
}

.curso-arm-target-card {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    /* Borda cinza clara padrão */
    border-radius: 12px;
    padding: 30px 25px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}

/* Destaque (Card 1) */
.curso-arm-target-card.active {
    border-color: var(--primary-green);
    /* Puxa do seu global[cite: 2] */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

.curso-arm-target-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
}

/* Ícones dos cards */
.curso-arm-card-icon-box {
    width: 45px;
    height: 45px;
    /* Fundo verde limão com opacidade baseada na cor primária */
    background-color: rgba(178, 210, 53, 0.15);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.curso-arm-card-icon-box svg {
    width: 22px;
    height: 22px;
    color: #3b4e2f;
    /* Verde musgo para o traçado do ícone */
}

.curso-arm-target-card-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0b2229;
    margin: 0 0 12px 0;
    line-height: 1.4;
}

.curso-arm-target-card-desc {
    font-size: 0.9rem;
    color: #64748b;
    line-height: 1.6;
    margin: 0;
}

/* --- Seção: Ao final do curso --- */
.curso-arm-outcomes-header {
    text-align: center;
    margin-bottom: 40px;
}

.curso-arm-outcomes-title {
    font-size: 2rem;
    font-weight: 700;
    color: #0b2229;
    margin: 0;
}

/* Lista de resultados */
.curso-arm-outcomes-list {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 900px;
}

.curso-arm-outcomes-list li {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 1.05rem;
    color: #4b5563;
    /* Cinza médio de leitura */
    font-weight: 500;
    padding: 16px 0;
    /* Borda com transparência inspirada na cor primária */
    border-bottom: 1px solid rgba(178, 210, 53, 0.5);
}

.curso-arm-list-icon {
    width: 18px;
    height: 18px;
    color: var(--primary-green);
    /* Puxa do seu global[cite: 2] */
    flex-shrink: 0;
}

/* --- Responsividade (Tablets e Celulares) --- */
@media (max-width: 992px) {
    .curso-arm-target-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .curso-arm-target-section {
        padding: 60px 20px;
    }

    .curso-arm-target-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        margin-bottom: 30px;
    }

    .curso-arm-target-title {
        font-size: 1.8rem;
        white-space: normal;
        padding-right: 0;
    }

    .curso-arm-line-container {
        width: 100%;
        height: 2px;
        /* Reduz a altura para virar apenas uma linha simples */
        transform: none;
    }

    /* No celular, escondemos a curva para não quebrar o layout da tela pequena */
    .curso-arm-line-curve,
    .curso-arm-line-tail {
        display: none;
    }

    .curso-arm-target-grid {
        grid-template-columns: 1fr;
    }

    .curso-arm-outcomes-title {
        font-size: 1.6rem;
    }

    .curso-arm-outcomes-list li {
        align-items: flex-start;
        /* Se o texto quebrar, seta fica no topo */
    }

    .curso-arm-list-icon {
        margin-top: 4px;
        /* Ajuste para o alinhamento de topo no mobile */
    }
}

/* ==========================================================================
   SEÇÃO: PARA QUEM É / RESULTADOS DO CURSO
   ========================================================================== */

.curso-arm-target-section {
    background-color: var(--white);
    /* Puxa do seu global[cite: 2] */
    padding: 80px 20px 100px 20px;
    font-family: var(--inter);
    /* Puxa do seu global[cite: 2] */
    overflow-x: hidden;
    /* Garante que a linha que vaza não cause barra de rolagem */
}

.curso-arm-target-section .curso-arm-container {
    max-width: 1000px;
    margin: 0 auto;
}

/* --- Cabeçalho e Linha Decorativa com Matemática Exata --- */
.curso-arm-target-header {
    display: flex;
    align-items: center;
    margin-bottom: 40px;
    position: relative;
}

.curso-arm-target-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: #0b2229;
    margin: 0;
    padding-right: 30px;
    white-space: nowrap;
}

/* O container que abraça as 3 partes da linha */
.curso-arm-line-container {
    flex: 1;
    /* Estica até a direita */
    display: flex;
    align-items: flex-start;
    height: 40px;
    /* Mesma altura da curva SVG */
    transform: translateY(4px);
    /* Desce milimetricamente para alinhar com o centro do texto */
}

/* 1. Linha Alta (Antes da Curva) */
.curso-arm-line-high {
    flex: 0 0 55%;
    /* MÁGICA: Empurra a curva para cair exato no vão entre Card 2 e 3 */
    height: 2px;
    background-color: var(--primary-green);
    margin-top: 0;
    margin-right: -1px;
    /* Remove fresta de pixel */
}

/* 2. A Curva SVG (Não estica, não deforma) */
.curso-arm-line-curve {
    flex-shrink: 0;
    display: block;
}

/* 3. Linha Baixa (Depois da curva) */
.curso-arm-line-low {
    width: 50vw;
    /* Tamanho exagerado para vazar da tela à direita */
    flex-shrink: 0;
    height: 2px;
    background-color: var(--primary-green);
    align-self: flex-end;
    /* Encosta no chão do container (Y=40) */
    margin-bottom: 0;
    margin-left: -1px;
    /* Remove fresta de pixel */
}

/* --- Grid de Cards --- */
.curso-arm-target-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-bottom: 80px;
}

.curso-arm-target-card {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 30px 25px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}

.curso-arm-target-card.active {
    border-color: var(--primary-green);
    /* Puxa do seu global[cite: 2] */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

.curso-arm-target-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
}

/* Ícones dos cards */
.curso-arm-card-icon-box {
    width: 45px;
    height: 45px;
    background-color: rgba(178, 210, 53, 0.15);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.curso-arm-card-icon-box svg {
    width: 22px;
    height: 22px;
    color: #3b4e2f;
}

.curso-arm-target-card-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0b2229;
    margin: 0 0 12px 0;
    line-height: 1.4;
}

.curso-arm-target-card-desc {
    font-size: 0.9rem;
    color: #64748b;
    line-height: 1.6;
    margin: 0;
}

/* --- Seção: Ao final do curso --- */
.curso-arm-outcomes-header {
    text-align: center;
    margin-bottom: 40px;
}

.curso-arm-outcomes-title {
    font-size: 2rem;
    font-weight: 700;
    color: #0b2229;
    margin: 0;
}

.curso-arm-outcomes-list {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 900px;
}

.curso-arm-outcomes-list li {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 1.05rem;
    color: #4b5563;
    font-weight: 500;
    padding: 16px 0;
    border-bottom: 1px solid rgba(178, 210, 53, 0.5);
}

.curso-arm-list-icon {
    width: 18px;
    height: 18px;
    color: var(--primary-green);
    /* Puxa do seu global[cite: 2] */
    flex-shrink: 0;
}

/* --- Responsividade (Tablets e Celulares) --- */
@media (max-width: 992px) {
    .curso-arm-target-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 2 Colunas no Tablet */
    }
}

@media (max-width: 768px) {
    .curso-arm-target-section {
        padding: 60px 20px;
    }

    .curso-arm-target-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        margin-bottom: 30px;
    }

    .curso-arm-target-title {
        font-size: 1.8rem;
        white-space: normal;
        padding-right: 0;
    }

    .curso-arm-line-container {
        width: 100%;
        height: 2px;
        /* Transforma num traço simples no celular */
        transform: none;
    }

    /* Esconde a curva e a sobra da linha no celular (pois os cards empilham e a curva perde o sentido visual) */
    .curso-arm-line-high {
        flex: 1;
        /* Preenche toda a largura */
    }

    .curso-arm-line-curve,
    .curso-arm-line-low {
        display: none;
    }

    .curso-arm-target-grid {
        grid-template-columns: 1fr;
        /* 1 Coluna no Celular */
    }

    .curso-arm-outcomes-title {
        font-size: 1.6rem;
    }

    .curso-arm-outcomes-list li {
        align-items: flex-start;
    }

    .curso-arm-list-icon {
        margin-top: 4px;
    }
}

/* ==========================================================================
   SEÇÃO: ESPECIALISTAS (APRENDA COM QUEM DOMINA)
   ========================================================================== */

.curso-arm-specialists-section {
    position: relative;
    /* Tom escuro inspirado no layout, similar ao usado no Hero */
    background-color: #1b2f33;
    padding: 100px 20px;
    font-family: var(--inter);
    /*[cite: 2]*/
    overflow: hidden;
    /* Garante que a linha esquerda não gere barra de rolagem se encostar na borda */
}

.curso-arm-specialists-section .curso-arm-container {
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    /* Garante que os cards fiquem acima da linha esquerda */
}

/* --- Linha Esquerda com Curva Suave (SVG + DIVs) --- */
.curso-arm-spec-line-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 6%;
    /* Distância da borda esquerda da tela */
    width: 50px;
    display: flex;
    flex-direction: column;
    z-index: 1;
}

.curso-arm-line-vert-top {
    flex: 0 0 25%;
    /* Determina onde a curva começa */
    width: 2px;
    background-color: var(--primary-green);
    /*[cite: 2]*/
    margin-bottom: -1px;
    /* Remove fresta */
}

.curso-arm-line-s-curve {
    flex-shrink: 0;
    display: block;
}

.curso-arm-line-vert-bottom {
    flex: 1;
    /* Preenche o resto da tela para baixo */
    width: 2px;
    background-color: var(--primary-green);
    /*[cite: 2]*/
    align-self: flex-end;
    /* Encosta a linha na borda direita do container de 50px */
    margin-top: -1px;
    /* Remove fresta */
}

/* --- Cabeçalho --- */
.curso-arm-spec-header {
    text-align: center;
    max-width: 750px;
    margin: 0 auto 60px auto;
    position: relative;
}

.curso-arm-spec-title {
    font-size: 2.6rem;
    font-weight: 700;
    color: var(--white);
    /*[cite: 2]*/
    margin: 0 0 15px 0;
    line-height: 1.2;
}

.curso-arm-highlight {
    color: var(--primary-green);
    /*[cite: 2]*/
}

.curso-arm-spec-desc {
    font-size: 1.1rem;
    color: #e2e8f0;
    /* Branco acinzentado para leitura */
    line-height: 1.6;
    margin: 0;
}

/* Estrela SVG posicionada à direita do título */
.curso-arm-spec-star {
    position: absolute;
    top: -20px;
    right: -80px;
}

/* --- Lista de Cards --- */
.curso-arm-spec-cards {
    display: flex;
    flex-direction: column;
    gap: 40px;
    /* Distância vertical entre os especialistas */
    max-width: 900px;
    margin: 0 auto;
}

/* O Card com Flexbox para permitir a sobreposição */
.curso-arm-spec-card {
    display: flex;
    align-items: center;
    position: relative;
}

.curso-arm-spec-photo-wrapper {
    width: 170px;
    height: 170px;
    border-radius: 50%;
    flex-shrink: 0;
    /* Impede a foto de amassar */
    position: relative;
    z-index: 2;
    /* Garante que a foto fique POR CIMA do card branco */
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
    /* Sombra redonda da foto */
    /* Borda escura sutil pra mesclar melhor a foto */
}

.curso-arm-spec-photo-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* O Retângulo Branco */
.curso-arm-spec-info {
    background-color: var(--white);
    /*[cite: 2]*/
    border-radius: 12px;
    flex-grow: 1;
    /* Padding extra na esquerda para não escrever debaixo da foto */
    padding: 35px 40px 35px 110px;
    /* A MÁGICA: Puxa o card para a esquerda, passando por trás da foto */
    margin-left: -85px;
    z-index: 1;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

.curso-arm-spec-name {
    font-size: 1.3rem;
    font-weight: 700;
    color: #0b2229;
    margin: 0 0 10px 0;
}

.curso-arm-spec-logo {
    position: absolute;
    top: 30px;
    right: 40px;
    /* Posição inicial (esquerda) */
    width: 100px;
    z-index: 5;
    /* Deixa passar o clique para o texto */
}

.curso-arm-spec-bio {
    font-size: 0.95rem;
    color: #4b5563;
    /* Cinza médio de leitura */
    line-height: 1.6;
    margin: 0;
}

/* --- Responsividade (Tablets e Celulares) --- */
@media (max-width: 1024px) {
    .curso-arm-spec-star {
        right: 0;
        /* Ajusta a estrela para não vazar a tela */
        opacity: 0.3;
        /* Deixa transparente para não atrapalhar o texto */
        z-index: -1;
    }

    .curso-arm-spec-logo {
        left: 20px;
        top: 120px;
        width: 100px;
        opacity: 1;
        display: block;
    }
}

@media (max-width: 768px) {
    .curso-arm-specialists-section {
        padding: 70px 20px;
    }

    .curso-arm-spec-line-container {
        display: none;
        /* Esconde a linha S no celular por falta de espaço */
    }

    .curso-arm-spec-header {
        margin-bottom: 40px;
    }

    .curso-arm-spec-title {
        font-size: 2rem;
    }

    /* Muda o layout do card para Vertical */
    .curso-arm-spec-card {
        flex-direction: column;
        text-align: center;
    }

    .curso-arm-spec-info {
        margin-left: 0;
        /* Puxa o card branco para cima, ficando sob a metade inferior da foto */
        margin-top: -85px;
        /* Ajusta o padding para dar espaço pra foto no topo */
        padding: 110px 25px 30px 25px;
    }
}

/* ==========================================================================
   SEÇÃO: PRECIFICAÇÃO E PRÉ-VENDA
   ========================================================================== */

.curso-arm-pricing-section {
    background-color: var(--white);
    /* Puxa do seu global[cite: 2] */
    padding: 100px 20px;
    font-family: var(--inter);
    /* Puxa do seu global[cite: 2] */
}

.curso-arm-pricing-section .curso-arm-container {
    max-width: 1100px;
    margin: 0 auto;
}

.curso-arm-pricing-layout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

/* --- Lado Esquerdo (Textos) --- */
.curso-arm-pricing-left {
    flex: 1;
    text-align: center;
    max-width: 500px;
    margin: 0 auto;
    /* Centraliza em telas menores se empilhar */
}

.curso-arm-pricing-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #0b2229;
    /* Tom de azul-petróleo escuro (texto principal) */
    line-height: 1.2;
    margin-bottom: 25px;
}

.curso-arm-pricing-title .curso-arm-highlight {
    color: var(--primary-green);
    /* Verde limão[cite: 2] */
}

.curso-arm-pricing-desc {
    font-size: 1.1rem;
    color: #64748b;
    /* Cinza médio de leitura */
    line-height: 1.6;
    margin: 0;
}

/* --- Lado Direito (Card) --- */
.curso-arm-pricing-right {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.curso-arm-pricing-card {
    background-color: var(--white);
    /*[cite: 2] */
    border: 2px solid var(--primary-green);
    /* Borda verde[cite: 2] */
    border-radius: 12px;
    padding: 40px 35px;
    max-width: 480px;
    width: 100%;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.04);
}

.curso-arm-price-main {
    font-size: 2.8rem;
    font-weight: 700;
    color: #0b2229;
    line-height: 1;
    margin-bottom: 10px;
    letter-spacing: -1px;
}

.curso-arm-price-sub {
    font-size: 1.1rem;
    color: #64748b;
    margin-bottom: 25px;
}

/* Informações do Produto */
.curso-arm-product-info {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding-bottom: 25px;
    border-bottom: 1px solid #e2e8f0;
    /* Linha sutil separadora */
    margin-bottom: 30px;
}

.curso-arm-product-info .curso-arm-icon {
    width: 24px;
    height: 24px;
    color: #94a3b8;
    /* Cinza claro/médio para os ícones */
    flex-shrink: 0;
    margin-top: 3px;
}

.curso-arm-product-info p {
    font-size: 0.95rem;
    color: #64748b;
    margin: 0;
    line-height: 1.5;
}

.curso-arm-product-info p span {
    font-weight: 600;
    color: #475569;
}

/* Botão de Compra */
.curso-arm-btn-buy {
    display: block;
    width: 100%;
    background-color: var(--primary-green);
    /*[cite: 2] */
    color: #001212;
    text-align: center;
    padding: 16px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1.1rem;
    text-decoration: none;
    transition: transform 0.2s ease, filter 0.2s ease;
    margin-bottom: 30px;
}

.curso-arm-btn-buy:hover {
    transform: translateY(-2px);
    filter: brightness(0.95);
}

/* Segurança */
.curso-arm-security-info {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.curso-arm-security-info .curso-arm-icon {
    width: 20px;
    height: 20px;
    color: #94a3b8;
    flex-shrink: 0;
    margin-top: 2px;
}

.curso-arm-security-info p {
    font-size: 0.85rem;
    color: #94a3b8;
    margin: 0;
    line-height: 1.4;
}

/* --- Responsividade (Tablets e Mobile) --- */
@media (max-width: 992px) {
    .curso-arm-pricing-layout {
        flex-direction: column;
        gap: 50px;
    }

    .curso-arm-pricing-left {
        max-width: 100%;
    }

    .curso-arm-pricing-right {
        justify-content: center;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .curso-arm-pricing-section {
        padding: 60px 20px;
    }

    .curso-arm-pricing-title {
        font-size: 2rem;
    }

    .curso-arm-pricing-card {
        padding: 30px 25px;
    }

    .curso-arm-price-main {
        font-size: 2.2rem;
    }
}

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

.curso-arm-faq-section {
    background-color: #f4f7f8;
    /* Fundo gelo/cinza clarinho para dar contraste com a seção branca anterior */
    padding: 100px 20px;
    font-family: var(--inter);
}

.curso-arm-faq-section .curso-arm-container {
    max-width: 1000px;
    margin: 0 auto;
}

.curso-arm-faq-layout {
    display: flex;
    align-items: flex-start;
    gap: 80px;
}

/* --- Lado Esquerdo (Título) --- */
.curso-arm-faq-left {
    flex: 0 0 250px;
    /* Fixa o título na tela enquanto o usuário rola o FAQ para baixo */
    position: sticky;
    top: 120px;
}

.curso-arm-faq-title {
    font-size: 2.8rem;
    font-weight: 800;
    color: #0b2229;
    margin: 0 0 10px 0;
    letter-spacing: -1px;
}

.curso-arm-faq-line {
    width: 60px;
    height: 4px;
    background-color: var(--primary-green);
    border-radius: 2px;
}

/* --- Lado Direito (Acordeão) --- */
.curso-arm-faq-right {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* O item individual (details) */
.curso-arm-faq-item {
    border-bottom: 1px solid var(--primary-green);
    /* Borda verde limão separando os itens */
}

/* A Pergunta (summary) */
.curso-arm-faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #0b2229;
    /* Azul petróleo escuro */
    cursor: pointer;
    list-style: none;
    /* Remove a setinha nativa padrão */
    transition: color 0.2s ease;
    user-select: none;
}

/* Esconde setinha nativa no Chrome/Safari antigo */
.curso-arm-faq-question::-webkit-details-marker {
    display: none;
}

/* Ícone de Seta Customizado (Círculo) */
.curso-arm-faq-icon {
    width: 28px;
    height: 28px;
    border: 1px solid var(--primary-green);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-green);
    /* Seta verde por padrão */
    background-color: transparent;
    flex-shrink: 0;
    margin-left: 20px;
    transition: all 0.3s ease;
    /* Animação de rotação e cor */
}

.curso-arm-faq-icon svg {
    width: 16px;
    height: 16px;
}

/* --- ESTADO: ABERTO --- */
/* Quando o item recebe a prop 'open', mudamos a cor do ícone e giramos a seta */
.curso-arm-faq-item[open] .curso-arm-faq-icon {
    background-color: var(--primary-green);
    color: #ffffff;
    /* Seta fica branca */
    transform: rotate(180deg);
    /* Seta aponta para cima */
    border-color: var(--primary-green);
}

/* A Resposta */
.curso-arm-faq-answer {
    padding-bottom: 24px;
    padding-right: 40px;
    /* Dá espaço para o texto não encostar no ícone */
    animation: cursoArmFaqFade 0.4s ease-out;
    /* Efeito suave ao abrir */
}

.curso-arm-faq-answer p {
    font-size: 1rem;
    color: #64748b;
    /* Cinza médio de leitura */
    line-height: 1.6;
    margin: 0;
}

/* Animação suave para revelar o texto */
@keyframes cursoArmFaqFade {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

/* --- Responsividade (Tablets e Celulares) --- */
@media (max-width: 992px) {
    .curso-arm-faq-layout {
        flex-direction: column;
        /* Empilha: Título em cima, perguntas em baixo */
        gap: 40px;
    }

    .curso-arm-faq-left {
        flex: none;
        width: 100%;
        position: static;
        /* Remove comportamento de rolar grudado no mobile */
    }
}

@media (max-width: 768px) {
    .curso-arm-faq-section {
        padding: 60px 20px;
    }

    .curso-arm-faq-title {
        font-size: 2.2rem;
    }

    .curso-arm-faq-question {
        font-size: 1rem;
        padding: 20px 0;
    }

    .curso-arm-faq-icon {
        width: 24px;
        height: 24px;
    }

    .curso-arm-faq-icon svg {
        width: 14px;
        height: 14px;
    }

    .curso-arm-faq-answer {
        padding-right: 0;
    }
}

/* ==========================================================================
   SEÇÃO HERO: IMERSÃO LRCAP
   ========================================================================== */

.lrcap-hero-section {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 80vh;
    /* Utilizando variáveis nativas do seu :root */
    background: linear-gradient(135deg, var(--bg-dark) 0%, var(--dark-blue) 100%);
    overflow: hidden;
    font-family: var(--roboto-slab);
    /* Mantendo o padrão do seu body[cite: 1] */
}

/* Tratamento da Imagem de Fundo (Lado Direito) */
.lrcap-hero-img-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    width: 55%;
    height: 100%;
    clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%);
    z-index: 1;
}

.lrcap-hero-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Overlay Verde sobre a imagem */
.lrcap-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(26, 61, 50, 0.7);
    mix-blend-mode: multiply;
}

/* Conteúdo de Texto (Lado Esquerdo) */
.lrcap-hero-content {
    position: relative;
    z-index: 2;
    width: 50%;
    padding: 4rem 2rem 4rem 8rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
}

/* Estilos do Badge (Data e Local) */
.lrcap-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--primary-green);
    /* Conectado ao seu :root[cite: 1] */
    border-radius: 50px;
    color: var(--primary-green);
    font-size: 0.9rem;
    font-weight: 500;
}

/* Título Principal */
.lrcap-hero-title {
    color: var(--white);
    font-size: 3.5rem;
    line-height: 1.1;
    margin: 0;
    font-family: 'Roboto Slab', serif;
    /* Fonte corrigida */
    font-weight: 400;
    /* Adicionado um font-weight para garantir o peso correto do título */
}

/* Subtítulo com Ícone */
.lrcap-hero-subtitle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--primary-green);
    font-size: 1.1rem;
    font-weight: 500;
}

/* Parágrafos de Descrição */
.lrcap-hero-desc {
    color: #e2e8f0;
    /* Tom de cinza claro já utilizado em suas outras seções[cite: 1] */
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
    max-width: 90%;
}

/* Botão CTA */
.lrcap-btn-cta {
    display: inline-block;
    background-color: var(--primary-green);
    /* #B2D235 do seu :root[cite: 1] */
    color: #001212;
    padding: 14px 32px;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    font-size: 1rem;
    margin-top: 1rem;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.lrcap-btn-cta:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
}

/* Responsividade Básica (Tablets e Celulares) */
@media (max-width: 992px) {
    .lrcap-hero-section {
        flex-direction: column;
        justify-content: center;
        padding: 80px 20px;
    }

    .lrcap-hero-img-wrapper {
        position: relative;
        width: 100%;
        height: 300px;
        clip-path: none;
        /* Remove o corte no mobile */
        order: -1;
        /* Joga a imagem para cima */
        border-radius: 12px;
        margin-bottom: 30px;
    }

    .lrcap-hero-content {
        width: 100%;
        padding: 0;
        align-items: flex-start;
    }

    .lrcap-hero-title {
        font-size: 2.5rem;
    }
}

/* ==========================================================================
   SEÇÃO: DECISÕES E GARANTIAS (LRCAP)
   ========================================================================== */

.lrcap-decisoes-section {
    background-color: #eaf3ea;
    /* Fundo verde super claro, idêntico à imagem */
    padding: 80px 20px;
    font-family: var(--inter, sans-serif);
    /* Respeitando a tipografia base do seu projeto */
    color: #172b1d;
    /* Tom escuro levemente esverdeado para os textos */
}

.lrcap-decisoes-container {
    max-width: 1050px;
    margin: 0 auto;
}

/* Título */
.lrcap-decisoes-title {
    font-size: 2.2rem;
    line-height: 1.3;
    color: #275235;
    /* Verde musgo escuro */
    font-weight: 400;
    margin-top: 0;
    margin-bottom: 30px;
}

.lrcap-decisoes-title strong {
    font-weight: 700;
    color: #346b45;
    /* Verde levemente mais destacado para a primeira linha */
}

/* Introdução */
.lrcap-decisoes-intro {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 50px;
    max-width: 1000px;
}

/* Grid de 2 Colunas */
.lrcap-decisoes-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: flex-start;
    /* Alinha o card e os textos pelo topo */
}

/* O Card com Borda */
.lrcap-garantias-card {
    border: 1.5px solid #204029;
    /* Borda verde escura */
    border-radius: 12px;
    padding: 35px 30px;
    background-color: transparent;
}

.lrcap-garantias-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #172b1d;
    margin-top: 0;
    margin-bottom: 25px;
}

.lrcap-garantias-card ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.lrcap-garantias-card li {
    display: flex;
    flex-direction: column;
    position: relative;
    padding-left: 20px;
}

/* Customização do "bullet point" para ficar bem alinhado */
.lrcap-garantias-card li::before {
    content: '•';
    position: absolute;
    left: 0;
    top: -2px;
    color: #172b1d;
    font-size: 1.2rem;
    font-weight: bold;
}

.lrcap-garantias-card li strong {
    font-size: 1rem;
    font-weight: 700;
    color: #172b1d;
    margin-bottom: 2px;
}

.lrcap-garantias-card li span {
    font-size: 0.95rem;
    color: #273d2f;
}

/* Textos da Coluna Direita */
.lrcap-decisoes-textos {
    display: flex;
    flex-direction: column;
    gap: 25px;
    padding-top: 10px;
    /* Leve recuo para alinhar opticamente o primeiro parágrafo com o título do card */
}

.lrcap-decisoes-textos p {
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 0;
}

/* ==========================================================================
   RESPONSIVIDADE (Tablets e Celulares)
   ========================================================================== */
@media (max-width: 900px) {
    .lrcap-decisoes-grid {
        grid-template-columns: 1fr;
        /* Quebra para 1 coluna */
        gap: 40px;
    }

    .lrcap-decisoes-title {
        font-size: 1.8rem;
    }

    .lrcap-decisoes-textos {
        padding-top: 0;
    }
}

/* ==========================================================================
   SEÇÃO: UM PROJETO, QUATRO DIMENSÕES (LRCAP)
   ========================================================================== */

.lrcap-projeto-section {
    background-color: #0c1815;
    /* Fundo verde super escuro, quase preto, idêntico à imagem */
    padding: 100px 20px;
}

.lrcap-projeto-container {
    max-width: 950px;
    /* Largura contida para manter a leitura agradável */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Título */
.lrcap-projeto-title {
    font-family: 'Roboto Slab', serif;
    /* Usando a mesma fonte do hero para consistência */
    font-size: 2.2rem;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    margin-top: 0;
    margin-bottom: 45px;
    line-height: 1.3;
}

/* Card centralizado */
.lrcap-projeto-card {
    background-color: #eaf3ea;
    /* Fundo verde gelo/pastel idêntico à seção anterior */
    border-radius: 12px;
    padding: 50px 70px;
    width: 100%;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    /* Sombra elegante para descolar do fundo */
}

/* Textos dentro do card */
.lrcap-projeto-card p {
    font-family: 'Roboto Slab', serif;
    /* O texto da imagem também usa serifa no card */
    font-size: 1.15rem;
    color: #0f1c13;
    /* Verde/Preto para alto contraste e leitura suave */
    line-height: 1.7;
    margin-top: 0;
    margin-bottom: 25px;
}

/* Remove a margem do último parágrafo para o padding do card ficar exato */
.lrcap-projeto-card p:last-child {
    margin-bottom: 0;
}

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

    .lrcap-projeto-title {
        font-size: 1.8rem;
        margin-bottom: 35px;
    }

    .lrcap-projeto-card {
        padding: 35px 30px;
        /* Reduz o espaçamento interno do card no mobile */
    }

    .lrcap-projeto-card p {
        font-size: 1.05rem;
        margin-bottom: 20px;
    }
}

/* ==========================================================================
   SEÇÃO: CARROSSEL DE MÓDULOS (LRCAP)
   ========================================================================== */

.lrcap-carousel-section {
    background-color: #0c1815;
    /* Mesmo fundo verde muito escuro da seção anterior */
    padding: 80px 20px;
    position: relative;
}

.lrcap-carousel-container {
    max-width: 1200px;
    /* Largura máxima do carrossel */
    margin: 0 auto;
    position: relative;
    display: flex;
    align-items: center;
}

/* Container da trilha com rolagem */
.lrcap-carousel-track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    /* Esconde scrollbar no Firefox */
    padding: 10px 0;
    /* Respiro vertical para sombras e bordas */
    width: 100%;
}

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

/* O Card Individual */
.lrcap-card {
    flex: 0 0 380px;
    /* Largura fixa do card */
    scroll-snap-align: start;
    border: 1.5px solid #eaf3ea;
    /* Borda clara idêntica à imagem */
    border-radius: 8px;
    padding: 40px 35px;
    background-color: transparent;
    display: flex;
    flex-direction: column;
}

/* Número Destaque */
.lrcap-card-number {
    font-family: var(--inter, sans-serif);
    /* Mantendo sem serifa para o número */
    font-size: 3rem;
    font-weight: 700;
    color: var(--primary-green, #B2D235);
    /* Verde Limão/Amarelo */
    margin-bottom: 20px;
    line-height: 1;
}

/* Título do Card */
.lrcap-card-title {
    font-family: 'Roboto Slab', serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 20px 0;
    line-height: 1.4;
}

/* Textos do Card */
.lrcap-card-text {
    font-family: 'Roboto Slab', serif;
    font-size: 1.05rem;
    color: #e2e8f0;
    /* Branco acinzentado */
    line-height: 1.6;
    margin: 0 0 20px 0;
}

.lrcap-card-text:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   BOTÕES DE NAVEGAÇÃO
   ========================================================================== */

.lrcap-nav-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #eaf3ea;
    /* Fundo verde gelo claro */
    border: none;
    color: #0c1815;
    /* Seta escura */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: absolute;
    z-index: 10;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transition: opacity 0.3s ease, transform 0.2s ease;
}

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

.lrcap-prev {
    left: -25px;
    /* Metade para fora do container */
    opacity: 0;
    /* Inicia oculto */
    pointer-events: none;
    /* Impede clique enquanto invisível */
}

/* Classe aplicada via JS quando há rolagem */
.lrcap-prev.show {
    opacity: 1;
    pointer-events: auto;
}

.lrcap-next {
    right: -25px;
}

/* Oculta botão direito se chegar no final */
.lrcap-next.hide {
    opacity: 0;
    pointer-events: none;
}

/* ==========================================================================
   RESPONSIVIDADE (Tablets e Celulares)
   ========================================================================== */
/* ==========================================================================
   RESPONSIVIDADE (Tablets e Celulares)
   ========================================================================== */

/* Ajustes intermediários para tablets */
@media (max-width: 1024px) {
    .lrcap-prev {
        left: 10px;
    }

    .lrcap-next {
        right: 10px;
    }
}

/* ==========================================================================
   RESPONSIVIDADE MELHORADA (Smartphones)
   ========================================================================== */
@media (max-width: 768px) {
    .lrcap-carousel-section {
        padding: 60px 0 20px 0;
        /* Ajuste no padding inferior da seção */
    }

    .lrcap-carousel-container {
        /* O SEGREDO DO CLIQUE: Damos um padding no container para que ele "abrace" os botões absolutos */
        padding-bottom: 80px;
    }

    .lrcap-carousel-track {
        padding: 10px 20px;
        gap: 15px;
        scroll-padding-left: 20px;
        /* Garante que o card trave certinho na margem */
    }

    .lrcap-card {
        flex: 0 0 82vw;
        /* Deixa uma "pontinha" do próximo card visível para incentivar a rolagem */
        scroll-snap-align: start;
        padding: 25px 20px;
    }

    .lrcap-card-number {
        font-size: 2.2rem;
        margin-bottom: 15px;
    }

    .lrcap-card-title {
        font-size: 1.15rem;
        margin-bottom: 12px;
    }

    .lrcap-card-text {
        font-size: 0.95rem;
    }

    .lrcap-nav-btn {
        display: flex;
        width: 48px;
        height: 48px;
        top: auto;
        bottom: 15px;
        /* Agora eles ficam DENTRO da área clicável do container */
        z-index: 20;
        /* Reforça a prioridade do clique */
    }

    .lrcap-prev {
        left: calc(50% - 60px);
    }

    .lrcap-next {
        right: calc(50% - 60px);
    }
}

/* ==========================================================================
   SEÇÃO: CASE PRÁTICO (LRCAP)
   ========================================================================== */

.lrcap-case-section {
    background-color: #f6faec;
    /* Um fundo bem claro, quase branco, puxando para um off-white esverdeado */
    padding: 100px 20px;
    font-family: var(--inter, sans-serif);
    color: #172b1d;
}

.lrcap-case-container {
    max-width: 900px;
    /* Mantém a leitura curta e confortável */
    margin: 0 auto;
}

/* Cabeçalho */
.lrcap-case-header {
    text-align: center;
    margin-bottom: 50px;
    background-color: #f6faec;
}

.lrcap-case-title {
    font-size: 2rem;
    font-weight: 500;
    color: #172b1d;
    line-height: 1.4;
    margin: 0;
}

.lrcap-text-green {
    color: #275235;
    /* O verde de destaque da primeira linha */
    font-weight: 700;
}

/* Introdução */
.lrcap-case-intro {
    margin-bottom: 50px;
}

.lrcap-case-intro p {
    font-size: 1.05rem;
    line-height: 1.6;
    margin-bottom: 25px;
    color: #2b3b31;
}

.lrcap-case-intro p:last-child {
    margin-bottom: 0;
}

/* Lista Estruturada */
.lrcap-case-list {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #94a3b8;
    /* Borda final que fecha a lista */
}

.lrcap-case-item {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    padding: 30px 0;
    border-top: 1px solid #94a3b8;
    /* Borda separadora */
}

/* Número Lateral */
.lrcap-case-number {
    font-size: 1.1rem;
    font-weight: 700;
    color: #172b1d;
    width: 40px;
    /* Largura fixa para manter o alinhamento de todos os textos à direita */
    flex-shrink: 0;
    margin-top: 2px;
    /* Ajuste fino de alinhamento com o título */
}

/* Conteúdo da Lista */
.lrcap-case-content {
    flex: 1;
}

.lrcap-case-content h3 {
    font-family: 'Roboto Slab', serif;
    /* Mantendo a serifa para destacar os títulos */
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f1c13;
    margin-top: 0;
    margin-bottom: 10px;
}

.lrcap-case-content p {
    font-size: 1rem;
    color: #334138;
    line-height: 1.5;
    margin: 0;
}

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

    .lrcap-case-title {
        font-size: 1.6rem;
    }

    .lrcap-case-intro p {
        font-size: 1rem;
    }

    .lrcap-case-item {
        gap: 15px;
        /* Reduz o espaço entre o número e o texto no celular */
        padding: 25px 0;
    }

    .lrcap-case-number {
        font-size: 1rem;
        width: 25px;
        /* Reduz a largura fixa do número */
    }

    .lrcap-case-content h3 {
        font-size: 1.15rem;
    }

    .lrcap-case-content p {
        font-size: 0.95rem;
    }
}

/* ==========================================================================
   SEÇÃO: PARA QUEM É A IMERSÃO? (LRCAP)
   ========================================================================== */

.lrcap-publico-section {
    background-color: #eaf3ea;
    /* Fundo verde super claro */
    padding: 80px 20px;
    font-family: var(--inter, sans-serif);
}

.lrcap-publico-container {
    max-width: 1000px;
    margin: 0 auto;
}

/* --- Cabeçalho --- */
.lrcap-publico-header {
    margin-bottom: 40px;
    text-align: left;
}

.lrcap-publico-title {
    font-family: 'Roboto Slab', serif;
    font-size: 2.2rem;
    font-weight: 700;
    color: #0f1c13;
    /* Verde/Preto bem escuro */
    margin-top: 0;
    margin-bottom: 15px;
}

.lrcap-publico-desc {
    font-size: 1.05rem;
    color: #273d2f;
    line-height: 1.6;
    margin: 0;
    max-width: 900px;
}

/* --- Grid de Cards --- */
.lrcap-publico-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    /* Espaçamento entre os cards idêntico à imagem */
    margin-bottom: 50px;
}

/* --- Estilo Individual dos Cards --- */
.lrcap-publico-card {
    background-color: #17251d;
    /* Verde super escuro (fundo do card) */
    border-radius: 12px;
    padding: 35px 30px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    /* Sombra elegante */
    transition: transform 0.2s ease;
}

.lrcap-publico-card:hover {
    transform: translateY(-3px);
    /* Leve elevação ao passar o mouse */
}

.lrcap-publico-card h3 {
    font-family: 'Roboto Slab', serif;
    /* Títulos dos cards com serifa */
    font-size: 1.15rem;
    font-weight: 700;
    color: #ffffff;
    margin-top: 0;
    margin-bottom: 8px;
}

.lrcap-publico-card p {
    font-size: 0.95rem;
    color: #e2e8f0;
    /* Branco ligeiramente acinzentado para leitura suave */
    line-height: 1.5;
    margin: 0;
}

/* --- Botão --- */
.lrcap-publico-action {
    text-align: center;
}

/* Reutilizando ou criando a classe do botão CTA caso você não tenha globalizada */
.lrcap-btn-cta {
    display: inline-block;
    background-color: var(--primary-green, #B2D235);
    /* Verde Limão */
    color: #001212;
    padding: 15px 35px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1.05rem;
    text-decoration: none;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.lrcap-btn-cta:hover {
    transform: translateY(-2px);
    filter: brightness(0.95);
    /* Dá uma leve escurecida no hover */
}

/* ==========================================================================
   RESPONSIVIDADE (Tablets e Celulares)
   ========================================================================== */
@media (max-width: 900px) {
    .lrcap-publico-grid {
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .lrcap-publico-section {
        padding: 60px 20px;
    }

    .lrcap-publico-title {
        font-size: 1.8rem;
    }

    .lrcap-publico-grid {
        grid-template-columns: 1fr;
        /* Quebra para 1 coluna no celular */
    }

    .lrcap-publico-card {
        padding: 30px 25px;
        /* Reduz um pouco o espaçamento interno */
    }

    .lrcap-btn-cta {
        width: 100%;
        /* Botão ocupa toda a largura no mobile */
        text-align: center;
        box-sizing: border-box;
    }
}

/* ==========================================================================
   SEÇÃO: ESPECIALISTAS (LRCAP)
   ========================================================================== */

.lrcap-especialistas-section {
    background-color: #0c1815;
    /* Mesmo fundo verde super escuro/preto das seções anteriores */
    padding: 100px 20px;
    font-family: var(--inter, sans-serif);
}

.lrcap-especialistas-container {
    max-width: 900px;
    /* Largura contida para o layout ficar elegante e não esticar demais */
    margin: 0 auto;
}

/* --- Cabeçalho --- */
.lrcap-especialistas-header {
    text-align: center;
    margin-bottom: 60px;
}

.lrcap-especialistas-title {
    font-size: 2rem;
    font-weight: 700;
    color: #ffffff;
    margin-top: 0;
    margin-bottom: 20px;
}

.lrcap-especialistas-desc {
    font-size: 1.05rem;
    color: #e2e8f0;
    /* Branco acinzentado para não cansar a leitura */
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto;
}

/* --- Lista de Cards --- */
.lrcap-especialistas-list {
    display: flex;
    flex-direction: column;
    gap: 40px;
    /* Distância vertical entre um card e outro */
    padding-left: 60px;
    /* Dá espaço para a imagem "vazar" sem bater na borda da tela */
}

/* --- O Card --- */
.lrcap-especialista-card {
    background-color: #ffffff;
    border-radius: 16px;
    position: relative;
    /* Essencial para ancorar a imagem absoluta */
    padding: 45px 50px 45px 140px;
    /* Muito espaço na esquerda (140px) para a imagem não cobrir o texto */
    display: flex;
    align-items: center;
    min-height: 200px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

/* --- A Imagem Flutuante --- */
.lrcap-especialista-img {
    position: absolute;
    left: -60px;
    /* Puxa metade da imagem para fora do card branco */
    top: 50%;
    transform: translateY(-50%);
    /* Centraliza verticalmente com perfeição */
    width: 160px;
    height: 160px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    /* Sombra para dar profundidade contra o fundo escuro */
    background-color: #1a2b2e;
    /* Cor de fundo caso a imagem demore a carregar ou tenha transparência */
}

/* --- Textos do Card --- */
.lrcap-especialista-info h3 {
    font-size: 1.4rem;
    font-weight: 700;
    color: #0f1c13;
    /* Texto escuro */
    margin-top: 0;
    margin-bottom: 12px;
}

.lrcap-especialista-info p {
    font-size: 1rem;
    color: #4b5563;
    /* Cinza médio de leitura */
    line-height: 1.6;
    margin: 0;
}

/* ==========================================================================
   RESPONSIVIDADE (Tablets e Celulares)
   ========================================================================== */

@media (max-width: 900px) {
    .lrcap-especialistas-list {
        padding-left: 40px;
    }

    .lrcap-especialista-card {
        padding-left: 110px;
    }

    .lrcap-especialista-img {
        width: 140px;
        height: 140px;
        left: -40px;
    }
}

@media (max-width: 768px) {
    .lrcap-especialistas-section {
        padding: 80px 20px;
    }

    .lrcap-especialistas-title {
        font-size: 1.7rem;
    }

    .lrcap-especialistas-list {
        padding-left: 0;
        /* Remove o padding esquerdo no mobile */
        gap: 80px;
        /* Aumenta o gap porque a imagem agora vazará para cima */
        margin-top: 50px;
    }

    .lrcap-especialista-card {
        flex-direction: column;
        text-align: center;
        padding: 80px 30px 40px 30px;
        /* Espaço generoso no topo para a imagem */
    }

    /* Muda a posição da imagem de "vazada na esquerda" para "vazada no topo" */
    .lrcap-especialista-img {
        left: 50%;
        top: -50px;
        /* Sobe a imagem */
        transform: translateX(-50%);
        /* Centraliza no eixo X */
        width: 120px;
        height: 120px;
    }
}

/* ==========================================================================
   SEÇÃO: EXPERIÊNCIA PRESENCIAL (LRCAP)
   ========================================================================== */

.lrcap-experiencia-section {
    background-color: #eaf3ea;
    /* Fundo verde super claro */
    padding: 100px 20px;
    font-family: var(--inter, sans-serif);
}

.lrcap-experiencia-container {
    max-width: 1050px;
    margin: 0 auto;
}

.lrcap-experiencia-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    /* Coluna direita levemente maior */
    gap: 70px;
    align-items: flex-start;
}

/* --- Lado Esquerdo --- */
.lrcap-experiencia-left {
    display: flex;
    flex-direction: column;
}

.lrcap-experiencia-title {
    font-size: 1.85rem;
    font-weight: 700;
    color: #275235;
    /* Verde musgo escuro */
    margin-top: 0;
    margin-bottom: 25px;
    line-height: 1.3;
}

.lrcap-experiencia-lead {
    font-size: 1.45rem;
    font-weight: 500;
    color: #0f1c13;
    /* Tom quase preto esverdeado */
    line-height: 1.4;
    margin-top: 0;
    margin-bottom: 30px;
}

.lrcap-experiencia-note {
    font-size: 1rem;
    font-style: italic;
    font-weight: 500;
    color: #172b1d;
    /* Verde escuro */
    line-height: 1.5;
    margin: 0;
}

/* --- Lado Direito --- */
.lrcap-experiencia-right {
    display: flex;
    flex-direction: column;
}

.lrcap-experiencia-subtitle {
    font-size: 1.4rem;
    font-weight: 700;
    color: #374a4f;
    /* Cinza chumbo/azulado */
    margin-top: 0;
    margin-bottom: 25px;
}

.lrcap-experiencia-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.lrcap-experiencia-list li {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 16px 0;
    border-bottom: 1px solid #94b09c;
    /* Borda divisória verde suave */
    font-size: 1.1rem;
    font-weight: 500;
    color: #374a4f;
    /* Cor do texto da lista */
}

/* Remove a borda do último item para ficar mais limpo (opcional, remova se quiser borda no final) */
.lrcap-experiencia-list li:last-child {
    border-bottom: 1px solid #94b09c;
    /* A imagem possui borda no final, mantida aqui */
}

.lrcap-experiencia-list svg {
    width: 18px;
    height: 18px;
    color: #275235;
    /* Cor da seta em verde escuro */
    flex-shrink: 0;
    /* Impede a seta de amassar se o texto quebrar de linha */
}

/* ==========================================================================
   RESPONSIVIDADE (Tablets e Celulares)
   ========================================================================== */

@media (max-width: 992px) {
    .lrcap-experiencia-grid {
        grid-template-columns: 1fr;
        /* Quebra para uma coluna no tablet e mobile */
        gap: 50px;
    }
}

@media (max-width: 768px) {
    .lrcap-experiencia-section {
        padding: 70px 20px;
    }

    .lrcap-experiencia-title {
        font-size: 1.6rem;
    }

    .lrcap-experiencia-lead {
        font-size: 1.25rem;
    }

    .lrcap-experiencia-subtitle {
        font-size: 1.2rem;
    }

    .lrcap-experiencia-list li {
        font-size: 1rem;
        padding: 14px 0;
    }
}

/* ==========================================================================
   SEÇÃO: POR QUE SETEMBRO? / CRONOGRAMA (LRCAP)
   ========================================================================== */

.lrcap-cronograma-section {
    background-color: #ffffff;
    /* Fundo branco/off-white */
    padding: 100px 20px;
    font-family: var(--inter, sans-serif);
    color: #172b1d;
}

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

/* --- Cabeçalho --- */
.lrcap-cronograma-header {
    text-align: center;
    margin-bottom: 60px;
}

.lrcap-cronograma-title {
    font-size: 2.2rem;
    font-weight: 800;
    color: #0f1c13;
    margin-top: 0;
    margin-bottom: 20px;
}

.lrcap-cronograma-desc {
    font-size: 1.1rem;
    color: #334138;
    line-height: 1.5;
    max-width: 850px;
    margin: 0 auto;
}

/* --- Grid do Cronograma --- */
.lrcap-timeline-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    /* 5 colunas de larguras iguais */
    gap: 20px;
    margin-bottom: 40px;
}

.lrcap-timeline-card {
    border: 2.5px solid #366144;
    /* Verde musgo da borda */
    border-radius: 6px;
    padding: 20px 15px;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    min-height: 160px;
}

.lrcap-timeline-date {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    font-weight: 800;
    color: #0f1c13;
    font-size: 1.25rem;
}

.lrcap-timeline-text {
    font-size: 0.95rem;
    font-weight: 700;
    color: #366144;
    text-align: center;
    line-height: 1.4;
    margin: auto 0 0 0;
    /* Empurra o texto para a parte inferior do card */
}

/* --- Banners de Destaque --- */
.lrcap-cronograma-banners {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 70px;
}

.lrcap-banner-item {
    background-color: #eef7ee;
    /* Fundo verde muito claro */
    padding: 20px 25px;
    border-radius: 6px;
}

.lrcap-banner-item p {
    margin: 0;
    font-size: 1.05rem;
    color: #273d2f;
    line-height: 1.5;
}

/* --- Seção de Qualificação --- */
.lrcap-qualificacao-section {
    margin-bottom: 60px;
}

.lrcap-qualificacao-title {
    font-size: 1.8rem;
    font-weight: 800;
    color: #366144;
    /* Verde musgo idêntico aos cards */
    margin-bottom: 30px;
}

.lrcap-qualificacao-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

.lrcap-qualificacao-text p {
    font-size: 1.05rem;
    color: #334138;
    line-height: 1.6;
    margin-top: 0;
    margin-bottom: 20px;
}

.lrcap-qualificacao-text p:last-child {
    margin-bottom: 0;
}

/* Caixa Tracejada */
.lrcap-qualificacao-dashed {
    border: 2.5px dashed #366144;
    border-radius: 8px;
    padding: 30px;
}

.lrcap-qualificacao-dashed p {
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 0;
    color: #0f1c13;
}

/* --- Botão CTA Escuro --- */
.lrcap-cronograma-action {
    text-align: center;
}

.lrcap-btn-dark {
    display: inline-block;
    background-color: #092114;
    /* Fundo verde super escuro, quase preto */
    color: #ffffff;
    padding: 16px 40px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 1.05rem;
    text-decoration: none;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.lrcap-btn-dark:hover {
    transform: translateY(-2px);
    background-color: #113622;
    /* Leve clareada no hover */
}

/* ==========================================================================
   RESPONSIVIDADE (Tablets e Celulares)
   ========================================================================== */

@media (max-width: 992px) {
    .lrcap-timeline-grid {
        grid-template-columns: repeat(3, 1fr);
        /* 3 colunas no tablet */
    }

    .lrcap-qualificacao-grid {
        grid-template-columns: 1fr;
        /* Quebra texto e caixa tracejada para 1 coluna */
        gap: 30px;
    }
}

@media (max-width: 768px) {
    .lrcap-cronograma-section {
        padding: 60px 20px;
    }

    .lrcap-cronograma-title {
        font-size: 1.8rem;
    }

    .lrcap-timeline-grid {
        grid-template-columns: 1fr 1fr;
        /* 2 colunas em celulares grandes */
    }

    .lrcap-qualificacao-title {
        font-size: 1.5rem;
        line-height: 1.3;
    }

    .lrcap-btn-dark {
        width: 100%;
        box-sizing: border-box;
    }
}

@media (max-width: 480px) {
    .lrcap-timeline-grid {
        grid-template-columns: 1fr;
        /* 1 coluna em celulares menores */
    }
}

/* =========================================
   PÁGINA IMERSÃO BESS C&I (ESCOPO ISOLADO)
   ========================================= */

.page-imersao {
    --im-verde: #00B140;
    --im-verde-escuro: #063D1D;
    --im-lima: #B2D235;
    --im-preto: #020804;
    --im-osso: #F6F8F4;
    --im-osso-2: #EEF2EA;
    --im-cinza: #54604F;
    --im-linha: #DCE4D8;
    --im-branco: #FFFFFF;
    --im-raio: 14px;
    --im-serif-display: 'Inter Tight', 'Inter', sans-serif;

    font-family: 'Inter', sans-serif;
    color: var(--im-preto);
    background: var(--im-osso);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* Resets locais para não conflitar */
.page-imersao img,
.page-imersao svg {
    display: block;
    max-width: 100%;
}

.page-imersao a {
    color: inherit;
    text-decoration: none;
}

.page-imersao ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.page-imersao .wrap {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 28px;
}

.page-imersao section {
    padding: 86px 0;
    background: transparent;
}

@media(max-width:720px) {
    .page-imersao section {
        padding: 64px 0;
    }

    .page-imersao .wrap {
        padding: 0 20px;
    }
}

.page-imersao h1,
.page-imersao h2,
.page-imersao h3 {
    font-family: var(--im-serif-display);
    letter-spacing: -0.02em;
    line-height: 1.05;
    margin: 0;
}

.page-imersao .eyebrow {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--im-verde-escuro);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.page-imersao .eyebrow::before {
    content: '';
    width: 22px;
    height: 2px;
    background: var(--im-verde);
    display: inline-block;
}

.page-imersao .lead {
    color: var(--im-cinza);
    font-size: 18px;
    max-width: 640px;
    margin: 0;
}

/* ---------- BOTÕES ---------- */
.page-imersao .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    padding: 13px 24px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 14.5px;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
    text-decoration: none;
}

.page-imersao .btn-primary {
    background: var(--im-preto);
    color: var(--im-branco);
}

.page-imersao .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(2, 8, 4, 0.22);
}

.page-imersao .btn-ghost {
    border-color: var(--im-preto);
    color: var(--im-preto);
    background: transparent;
}

.page-imersao .btn-ghost:hover {
    background: var(--im-preto);
    color: var(--im-branco);
}

.page-imersao .btn-accent {
    background: var(--im-verde);
    color: var(--im-branco);
}

.page-imersao .btn-accent:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 26px rgba(0, 177, 64, 0.32);
}

/* ---------- HERO ---------- */
.page-imersao .hero {
    padding: 76px 0 60px;
    position: relative;
    overflow: hidden;
    color: var(--im-preto);
}

.page-imersao .hero::after {
    content: '';
    position: absolute;
    right: -160px;
    top: -140px;
    width: 520px;
    height: 520px;
    background: radial-gradient(circle, rgba(0, 177, 64, 0.14) 0%, rgba(0, 177, 64, 0) 70%);
    pointer-events: none;
}

.page-imersao .hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 56px;
    align-items: center;
}

@media(max-width:900px) {
    .page-imersao .hero-grid {
        grid-template-columns: 1fr;
    }
}

.page-imersao .hero h1 {
    font-size: clamp(34px, 4.6vw, 58px);
    font-weight: 900;
}

.page-imersao .hero h1 em {
    font-style: normal;
    color: var(--im-verde);
}

.page-imersao .hero-sub {
    margin-top: 18px;
    font-size: 19px;
    color: var(--im-cinza);
    max-width: 520px;
    margin-bottom: 0;
}

.page-imersao .hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    margin: 30px 0 34px;
    font-size: 14.5px;
    color: var(--im-preto);
    font-weight: 600;
}

.page-imersao .hero-meta span {
    display: flex;
    align-items: center;
    gap: 8px;
}

.page-imersao .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--im-verde);
    display: inline-block;
}

.page-imersao .hero-ctas {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

/* Gráfico Bateria (Hero) */
.page-imersao .battery-card {
    background: var(--im-preto);
    border-radius: 20px;
    padding: 34px 30px;
    color: var(--im-osso);
    position: relative;
}

.page-imersao .battery-card .tag {
    font-size: 11.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--im-lima);
    font-weight: 700;
    margin-bottom: 0;
    display: block;
}

.page-imersao .battery-shell {
    margin-top: 22px;
    border: 3px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
}

.page-imersao .battery-shell::after {
    content: '';
    position: absolute;
    right: -11px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 34px;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 0 4px 4px 0;
}

.page-imersao .cell {
    height: 34px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    padding: 0 12px;
    font-size: 12.5px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.4);
    overflow: hidden;
    position: relative;
}

.page-imersao .cell .fill {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--im-verde-escuro), var(--im-verde));
    width: 0%;
    transition: width 1.1s cubic-bezier(.4, 0, .2, 1);
}

.page-imersao .cell span {
    position: relative;
    z-index: 1;
    transition: color .4s;
}

.page-imersao .cell.charged span {
    color: var(--im-branco);
}

.page-imersao .battery-note {
    margin-top: 18px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.4;
}

/* ---------- CONTEXTO ---------- */
.page-imersao .contexto {
    background: var(--im-branco);
    border-top: 1px solid var(--im-linha);
    border-bottom: 1px solid var(--im-linha);
}

.page-imersao .stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin-top: 44px;
}

@media(max-width:800px) {
    .page-imersao .stat-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

.page-imersao .stat {
    padding: 0 32px;
    border-left: 1px solid var(--im-linha);
}

.page-imersao .stat:first-child {
    border-left: none;
    padding-left: 0;
}

@media(max-width:800px) {
    .page-imersao .stat {
        border-left: none;
        padding-left: 0;
        padding-right: 0;
    }
}

.page-imersao .stat h3 {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 10px;
    color: var(--im-preto);
}

.page-imersao .stat p {
    color: var(--im-cinza);
    font-size: 15px;
    margin: 0;
    line-height: 1.5;
}

.page-imersao .contexto-callout {
    margin-top: 52px;
    padding: 26px 30px;
    background: var(--im-osso);
    border-radius: var(--im-raio);
    border-left: 4px solid var(--im-verde);
    font-size: 18px;
    font-weight: 700;
    font-family: var(--im-serif-display);
    color: var(--im-preto);
}

/* ---------- MANIFESTO ---------- */
.page-imersao .manifesto {
    text-align: center;
}

.page-imersao .manifesto .wrap {
    max-width: 820px;
}

.page-imersao .manifesto h2 {
    font-size: clamp(26px, 3.6vw, 40px);
    font-weight: 800;
}

.page-imersao .manifesto h2 .no {
    color: var(--im-cinza);
    font-weight: 500;
    display: block;
    font-size: 0.55em;
    margin-bottom: 14px;
    font-family: 'Inter', sans-serif;
}

.page-imersao .manifesto h2 .yes {
    color: var(--im-verde-escuro);
}

/* ---------- PARA QUEM ---------- */
.page-imersao .personas {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 44px;
}

@media(max-width:860px) {
    .page-imersao .personas {
        grid-template-columns: 1fr;
    }
}

.page-imersao .persona {
    background: var(--im-branco);
    border: 1px solid var(--im-linha);
    border-radius: var(--im-raio);
    padding: 30px 26px;
    transition: border-color .15s;
    text-align: left;
}

.page-imersao .persona:hover {
    border-color: var(--im-verde);
}

.page-imersao .persona .num {
    font-family: var(--im-serif-display);
    font-weight: 900;
    font-size: 13px;
    color: var(--im-verde);
    letter-spacing: 0.06em;
}

.page-imersao .persona h3 {
    margin-top: 14px;
    font-size: 20px;
    font-weight: 800;
    color: var(--im-preto);
    margin-bottom: 0;
}

.page-imersao .persona p {
    margin-top: 10px;
    color: var(--im-cinza);
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 0;
}

/* ---------- DIFERENCIAL / CHAIN ---------- */
.page-imersao .diferencial {
    background: var(--im-preto);
    color: var(--im-osso);
}

.page-imersao .diferencial .eyebrow {
    color: var(--im-lima);
}

.page-imersao .diferencial .eyebrow::before {
    background: var(--im-lima);
}

.page-imersao .diferencial h2 {
    color: var(--im-branco);
    font-size: clamp(26px, 3.4vw, 38px);
    font-weight: 800;
    max-width: 640px;
}

.page-imersao .diferencial .lead {
    color: rgba(255, 255, 255, 0.62);
}

.page-imersao .chain {
    margin-top: 56px;
}

.page-imersao .chain-track {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    position: relative;
}

@media(max-width:900px) {
    .page-imersao .chain-track {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

.page-imersao .chain-track::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 26px;
    height: 2px;
    background: rgba(255, 255, 255, 0.12);
}

@media(max-width:900px) {
    .page-imersao .chain-track::before {
        display: none;
    }
}

.page-imersao .chain-node {
    position: relative;
    padding-right: 18px;
    text-align: left;
}

.page-imersao .chain-node .badge {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--im-serif-display);
    font-weight: 900;
    font-size: 16px;
    background: var(--im-preto);
    position: relative;
    z-index: 2;
    color: rgba(255, 255, 255, 0.5);
    transition: all .5s ease;
}

.page-imersao .chain-node.on .badge {
    border-color: var(--im-verde);
    background: var(--im-verde);
    color: var(--im-branco);
    box-shadow: 0 0 0 6px rgba(0, 177, 64, 0.18);
}

.page-imersao .chain-node h4 {
    margin-top: 18px;
    font-size: 16px;
    font-weight: 700;
    color: var(--im-branco);
    margin-bottom: 0;
}

.page-imersao .chain-node p {
    margin-top: 6px;
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 0;
}

.page-imersao .chain-gauge {
    margin-top: 40px;
    height: 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.page-imersao .chain-gauge .fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--im-verde-escuro), var(--im-verde), var(--im-lima));
    transition: width 1.4s ease;
}

.page-imersao .chain-caption {
    margin-top: 14px;
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.5);
    text-align: right;
}

/* ---------- PROGRAMA ---------- */
.page-imersao .modulos {
    margin-top: 20px;
}

.page-imersao .modulo {
    border-top: 1px solid var(--im-linha);
    padding: 34px 0;
    text-align: left;
}

.page-imersao .modulo:last-child {
    border-bottom: 1px solid var(--im-linha);
}

.page-imersao .modulo-head {
    display: flex;
    gap: 24px;
    align-items: baseline;
    cursor: pointer;
}

.page-imersao .modulo-head .mnum {
    font-family: var(--im-serif-display);
    font-weight: 900;
    font-size: 34px;
    color: var(--im-verde);
    min-width: 56px;
}

.page-imersao .modulo-head .mmeta {
    flex: 1;
}

.page-imersao .modulo-head .tag {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--im-cinza);
    margin-bottom: 0;
    display: block;
}

.page-imersao .modulo-head h3 {
    margin-top: 6px;
    font-size: 22px;
    font-weight: 800;
    color: var(--im-preto);
    margin-bottom: 0;
}

.page-imersao .modulo-toggle {
    font-size: 22px;
    color: var(--im-cinza);
    transition: transform .25s;
}

.page-imersao .modulo.open .modulo-toggle {
    transform: rotate(45deg);
    color: var(--im-verde);
}

.page-imersao .modulo-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s ease;
    padding-left: 80px;
}

@media(max-width:640px) {
    .page-imersao .modulo-body {
        padding-left: 0;
    }

    .page-imersao .modulo-head .mnum {
        min-width: 40px;
        font-size: 26px;
    }
}

.page-imersao .modulo.open .modulo-body {
    max-height: 600px;
}

.page-imersao .modulo-input {
    margin-top: 18px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--im-verde-escuro);
    background: var(--im-osso-2);
    display: inline-block;
    padding: 6px 12px;
    border-radius: 6px;
}

.page-imersao .modulo-body ul {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.page-imersao .modulo-body li {
    font-size: 15px;
    color: var(--im-cinza);
    padding-left: 18px;
    position: relative;
    margin-bottom: 0;
}

.page-imersao .modulo-body li::before {
    content: '—';
    position: absolute;
    left: 0;
    color: var(--im-verde);
}

.page-imersao .modulo-decisao {
    margin-top: 20px;
    padding: 16px 18px;
    border-left: 3px solid var(--im-lima);
    background: var(--im-osso);
    font-style: italic;
    font-size: 14.5px;
    color: var(--im-preto);
    border-radius: 0 8px 8px 0;
}

/* ---------- LEVA ---------- */
.page-imersao .leva {
    background: var(--im-branco);
    border-top: 1px solid var(--im-linha);
    border-bottom: 1px solid var(--im-linha);
}

.page-imersao .leva-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 44px;
}

@media(max-width:760px) {
    .page-imersao .leva-grid {
        grid-template-columns: 1fr;
    }
}

.page-imersao .leva-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    text-align: left;
}

.page-imersao .leva-item .check {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--im-verde);
    color: var(--im-branco);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
    margin-top: 2px;
}

.page-imersao .leva-item p {
    font-size: 16px;
    font-weight: 600;
    color: var(--im-preto);
    margin: 0;
}

/* ---------- INVESTIMENTO ---------- */
.page-imersao .invest-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
    margin-top: 44px;
    text-align: left;
}

@media(max-width:860px) {
    .page-imersao .invest-grid {
        grid-template-columns: 1fr;
    }
}

.page-imersao .info-table {
    width: 100%;
    border-collapse: collapse;
}

.page-imersao .info-table tr {
    border-bottom: 1px solid var(--im-linha);
    background: transparent;
}

.page-imersao .info-table tr:first-child {
    border-top: 1px solid var(--im-linha);
}

.page-imersao .info-table td {
    padding: 16px 4px;
    font-size: 15px;
    color: var(--im-preto);
}

.page-imersao .info-table td:first-child {
    color: var(--im-cinza);
    font-weight: 600;
    width: 38%;
}

.page-imersao .info-table td:last-child {
    font-weight: 700;
}

.page-imersao .price-card {
    background: var(--im-preto);
    color: var(--im-branco);
    border-radius: 20px;
    padding: 38px 34px;
    position: relative;
    overflow: hidden;
}

.page-imersao .price-card::before {
    content: '';
    position: absolute;
    left: -60px;
    bottom: -60px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(178, 210, 53, 0.22), transparent 70%);
    pointer-events: none;
}

.page-imersao .price-card .tag {
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--im-lima);
    font-weight: 700;
    display: block;
    margin-bottom: 0;
    text-align: left;
}

.page-imersao .price-value {
    font-family: var(--im-serif-display);
    font-size: 48px;
    font-weight: 900;
    margin-top: 14px;
    text-align: left;
}

.page-imersao .price-value span {
    font-size: 16px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    margin-left: 6px;
}

.page-imersao .price-card ul {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 14.5px;
    color: rgba(255, 255, 255, 0.75);
    text-align: left;
}

.page-imersao .price-card ul li {
    margin-bottom: 0;
    padding-left: 0;
}

.page-imersao .price-card ul li::before {
    content: '✓ ';
    color: var(--im-lima);
    font-weight: 700;
    margin-right: 5px;
}

.page-imersao .price-card .btn {
    margin-top: 26px;
    width: 100%;
    position: relative;
    z-index: 2;
}

/* ---------- FORM ---------- */
.page-imersao .inscricao {
    background: var(--im-osso-2);
    text-align: left;
}

.page-imersao .form-card {
    background: var(--im-branco);
    border-radius: 20px;
    padding: 44px;
    margin-top: 44px;
    box-shadow: 0 20px 60px rgba(2, 8, 4, 0.06);
    border: 1px solid var(--im-linha);
}

@media(max-width:640px) {
    .page-imersao .form-card {
        padding: 26px;
    }
}

.page-imersao .form-note {
    font-size: 12.5px;
    color: var(--im-cinza);
    display: block;
    margin-top: 18px;
}

/* =========================================
   SKIN DO FORMULÁRIO RD STATION (IMERSÃO)
   ========================================= */
.page-imersao #imersao-bess-c-amp-i-inscricoes-da-landing-page-af3f4bc7af715440de4d,
.page-imersao #imersao-bess-c-amp-i-inscricoes-da-landing-page-af3f4bc7af715440de4d .rd-form-wrapper,
.page-imersao #imersao-bess-c-amp-i-inscricoes-da-landing-page-af3f4bc7af715440de4d .rd-form {
    font-family: 'Inter', sans-serif !important;
    width: 100% !important;
}

.page-imersao #imersao-bess-c-amp-i-inscricoes-da-landing-page-af3f4bc7af715440de4d * {
    box-sizing: border-box !important;
}

.page-imersao #imersao-bess-c-amp-i-inscricoes-da-landing-page-af3f4bc7af715440de4d .rd-form-row,
.page-imersao #imersao-bess-c-amp-i-inscricoes-da-landing-page-af3f4bc7af715440de4d [class*="row"],
.page-imersao #imersao-bess-c-amp-i-inscricoes-da-landing-page-af3f4bc7af715440de4d .rd-form-input-container,
.page-imersao #imersao-bess-c-amp-i-inscricoes-da-landing-page-af3f4bc7af715440de4d [class*="input-container"],
.page-imersao #imersao-bess-c-amp-i-inscricoes-da-landing-page-af3f4bc7af715440de4d [class*="field-wrapper"],
.page-imersao #imersao-bess-c-amp-i-inscricoes-da-landing-page-af3f4bc7af715440de4d [class*="form-group"] {
    display: block !important;
    width: 100% !important;
    float: none !important;
    margin: 0 0 18px 0 !important;
    padding: 0 !important;
}

.page-imersao #imersao-bess-c-amp-i-inscricoes-da-landing-page-af3f4bc7af715440de4d label,
.page-imersao #imersao-bess-c-amp-i-inscricoes-da-landing-page-af3f4bc7af715440de4d .rd-form-label {
    display: block !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--im-preto) !important;
    margin: 0 0 7px 0 !important;
    font-family: 'Inter', sans-serif !important;
    line-height: 1.4 !important;
    text-align: left !important;
}

.page-imersao #imersao-bess-c-amp-i-inscricoes-da-landing-page-af3f4bc7af715440de4d input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.page-imersao #imersao-bess-c-amp-i-inscricoes-da-landing-page-af3f4bc7af715440de4d select,
.page-imersao #imersao-bess-c-amp-i-inscricoes-da-landing-page-af3f4bc7af715440de4d textarea,
.page-imersao #imersao-bess-c-amp-i-inscricoes-da-landing-page-af3f4bc7af715440de4d .rd-form-input {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    padding: 13px 14px !important;
    border-radius: 9px !important;
    border: 1.5px solid var(--im-linha) !important;
    background: var(--im-osso) !important;
    color: var(--im-preto) !important;
    outline: none !important;
    margin: 0 !important;
    box-shadow: none !important;
    transition: border-color .15s !important;
}

.page-imersao #imersao-bess-c-amp-i-inscricoes-da-landing-page-af3f4bc7af715440de4d input:focus,
.page-imersao #imersao-bess-c-amp-i-inscricoes-da-landing-page-af3f4bc7af715440de4d select:focus,
.page-imersao #imersao-bess-c-amp-i-inscricoes-da-landing-page-af3f4bc7af715440de4d textarea:focus {
    border-color: var(--im-verde) !important;
}

.page-imersao #imersao-bess-c-amp-i-inscricoes-da-landing-page-af3f4bc7af715440de4d textarea {
    min-height: 80px !important;
    resize: vertical !important;
}

.page-imersao #imersao-bess-c-amp-i-inscricoes-da-landing-page-af3f4bc7af715440de4d input[type="checkbox"],
.page-imersao #imersao-bess-c-amp-i-inscricoes-da-landing-page-af3f4bc7af715440de4d input[type="radio"] {
    width: 16px !important;
    height: 16px !important;
    display: inline-block !important;
    margin: 0 8px 0 0 !important;
    accent-color: var(--im-verde) !important;
}

.page-imersao #imersao-bess-c-amp-i-inscricoes-da-landing-page-af3f4bc7af715440de4d button,
.page-imersao #imersao-bess-c-amp-i-inscricoes-da-landing-page-af3f4bc7af715440de4d input[type="submit"],
.page-imersao #imersao-bess-c-amp-i-inscricoes-da-landing-page-af3f4bc7af715440de4d .rd-form-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: auto !important;
    padding: 13px 24px !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
    font-size: 14.5px !important;
    font-family: 'Inter', sans-serif !important;
    border: 1.5px solid transparent !important;
    cursor: pointer !important;
    background: var(--im-verde) !important;
    color: var(--im-branco) !important;
    box-shadow: none !important;
    margin-top: 8px !important;
    transition: transform .15s ease, box-shadow .15s ease !important;
}

.page-imersao #imersao-bess-c-amp-i-inscricoes-da-landing-page-af3f4bc7af715440de4d button:hover,
.page-imersao #imersao-bess-c-amp-i-inscricoes-da-landing-page-af3f4bc7af715440de4d input[type="submit"]:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 10px 26px rgba(0, 177, 64, 0.32) !important;
}

.page-imersao #imersao-bess-c-amp-i-inscricoes-da-landing-page-af3f4bc7af715440de4d [class*="error"],
.page-imersao #imersao-bess-c-amp-i-inscricoes-da-landing-page-af3f4bc7af715440de4d [class*="invalid"],
.page-imersao #imersao-bess-c-amp-i-inscricoes-da-landing-page-af3f4bc7af715440de4d .rd-form-message {
    color: #C0392B !important;
    font-size: 12.5px !important;
    margin-top: 4px !important;
    font-family: 'Inter', sans-serif !important;
    text-align: left !important;
}