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

body {
    font-family: 'Chivo', sans-serif;
    background: #e1e9eb;
    color: #222;
    line-height: 1.6;
}

/* ===== HEADER ===== */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 60px;
    background: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
    position: sticky;
    top: 0;
    z-index: 100;
}

.logo {
    font-size: 28px;
    font-weight: 700;
    text-decoration: none;
    color: black;
    font-family: 'Aldrich', sans-serif;
}

header nav a {
    margin-left: 20px;
    text-decoration: none;
    color: black;
    font-size: 18px;
    transition: color .3s;
}

header nav a:hover {
    color: #007a7a;
}

.imagensdoheader {
    padding-top: 1px;
    height: 22px;
    width: auto;
    margin-left: 15px;
}

.js-cont {
    position: relative;
    width: 100%;
    height: auto; /* antes era 100% */
}

.js-scroll {
    position: fixed; /* antes era fixed */
    z-index: 10;
    top: 0;
    left: 0;
    overflow: visible;
    height: auto;
    width: 100%;
    will-change: auto;
}

/* ===== HERO ===== */
.hero {
    text-align: center;
    padding: 260px 20px;
    height: 830px;
    background:
        linear-gradient(rgba(43, 43, 43, 0.5), rgba(20, 20, 20, 0.5)),
        /* Overlay escuro */
        url(./img/heroimg.png) center/cover no-repeat;
    background-size: 1920px 1080px;
    background-position: center;
    background-repeat: no-repeat;
}

.hero h1 {
    font-size: clamp(50px, 10vw, 120px);
    color: #ffffff;

    font-family: 'Aldrich', sans-serif;
}

.hero h2 {
    color: #ffffff;
    font-size: clamp(18px, 3vw, 28px);
    font-weight: 300;
    max-width: 900px;
    margin: 20px auto;
}

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

/* 3) Cores específicas por seção para evitar mesmo estilo global */
#sobre {
    color: #222222;
    background: #ffffff;
}

#implementacao {
    color: #000000;
    background: #d7dde6;
}

#regulamento {
    color: #ececec;
    background: #5b5b5b;
}

#parceiros {
    color: #052a4a;
    background: #ffffff;
}

#contato {
    color: #ececec;
    background: #466d46;
}


.content {
    padding: 130px 1px;
    width: 100%;
    color: inherit;
    /* cada seção define sua cor */
}

.content.alt {
    background: #f7f7f7;
    border-radius: 0px;
}

.content h2 {
    padding: 0 200px;
    font-size: 40px;
    margin-bottom: 20px;
    font-family: 'Aldrich', sans-serif;
}

.content p {
    padding: 0 200px;
    font-size: 18px;
    text-align: justify;
}

.imagem-sobre {
    display: block;
    margin: 20px auto;
    max-width: 80%;
    height: auto;
    border-radius: 0px;
}

.text-collapsed {
    max-height: 0;
    /* inicialmente escondido */
    overflow: hidden;
    transition: max-height 0.5s ease;
}

.text-expanded {
    max-height: 2000px;
    /* altura máxima quando expandido */
}

.btn-ver-mais {
    margin-top: 20px;
    margin-left: 200px;
    display: inline-block;
    padding: 10px 20px;
    border-radius: 8px;
    border: 2px solid rgb(255, 255, 255);
    background: #00000057;
    color: rgb(255, 255, 255);
    font-size: 16px;
    text-decoration: none;
    transition: background 0.3s, transform 0.2s;
    z-index: 2;
}

.btn-ver-mais:hover {
    background: #00000057;
    transform: scale(1.05);
    z-index: 2;
}

.infraestruturas {
    height: 75dvh;
    margin: 0;

    background-color: rgb(59, 123, 187);
    background-image: linear-gradient(rgba(255, 255, 255, 0.2) 2px,
            transparent 2px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.2) 2px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
    background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
    background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;

    color: white;
    align-content: center;
    justify-content: center;
    text-align: center;
}

.monitor {
    position: relative;
    top: -100px;
    /* Move a imagem mais para cima */
    left: 100px;
    /* Move a imagem um pouco menos à esquerda */
}

.login-container {
    position: relative;
    width: 100%;
    max-width: 65%;
    margin: 80px auto;
    background-color: #85bf9a;
    padding: 80px;
    border-radius: 10px;
    color: #07240f;
    text-align: center;
    height: 800px;
}

.login-container h1 {
    margin-bottom: 40px;
    font-size: 32px;
    font-family: 'Aldrich', sans-serif;
    color: #07240f;
}

.login-container img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin: 30px auto;
    display: block;
    object-fit: cover;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.login-container input {
    width: 100%;
    padding: 10px;
    margin: 15px 0;
    border: 1px solid #ccc;
    border-radius: 15px;
    font-size: 16px;
    box-sizing: border-box;
}

.login-container input:focus {
    border-color: #07240f;
    outline: none;
    box-shadow: 0 0 5px rgba(7, 36, 15, 0.5);
}

.login-container button {
    width: 100%;
    padding: 10px;
    margin-top: 20px;
    background-color: #07240f;
    color: #fff;
    border: none;
    border-radius: 15px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.login-container button:hover {
    background-color: #06401a;
}

.logon-container {
    position: relative;
    width: 100%;
    max-width: 65%;
    margin: 80px auto;
    background-color: #85bf9a;
    padding: 80px;
    border-radius: 10px;
    color: #07240f;
    text-align: center;
    height: 800px;
}

.logon-container h1 {
    margin-bottom: 40px;
    font-size: 32px;
    font-family: 'Aldrich', sans-serif;
    color: #07240f;
}

.logon-container img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin: 30px auto;
    display: block;
    object-fit: cover;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.logon-container input {
    width: 100%;
    padding: 10px;
    margin: 15px 0;
    border: 1px solid #ccc;
    border-radius: 15px;
    font-size: 16px;
    box-sizing: border-box;
}

.logon-container input:focus {
    border-color: #07240f;
    outline: none;
    box-shadow: 0 0 5px rgba(7, 36, 15, 0.5);
}

.logon-container button {
    width: 100%;
    padding: 10px;
    margin-top: 20px;
    background-color: #07240f;
    color: #fff;
    border: none;
    border-radius: 15px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.logon-container button:hover {
    background-color: #06401a;
}

/* ...existing code... */

.tags-publicacao {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.tag-publicacao {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    background: #f1f3f5;
    color: #343a40;
    cursor: default;
}

.tag-publicacao[data-tag="concreto"] {
    background: #e3fafc;
    color: #0b7285;
}

.tag-publicacao[data-tag="python"],
.tag-publicacao[data-tag="ferramenta-digital"] {
    background: #fff3bf;
    color: #e67700;
}

.tag-publicacao[data-tag="sustentabilidade"] {
    background: #d3f9d8;
    color: #2b8a3e;
}

.tag-publicacao[data-tag="edital"],
.tag-publicacao[data-tag="breve"] {
    background: #ffe3e3;
    color: #c92a2a;
}

.mensagem {
    padding: 10px;
    margin: 10px 0;
    border-radius: 4px;
    text-align: center;
}

.mensagem.erro {
    background-color: #ffebee;
    color: #c62828;
    border: 1px solid #ffcdd2;
}

.mensagem.sucesso {
    background-color: #e8f5e8;
    color: #2e7d32;
    border: 1px solid #c8e6c9;
}

/* ===== DASHBOARD & USER PAGES ===== */

.dashboard-container {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
    color: #333;
}

.dashboard-header {
    text-align: center;
    margin-bottom: 50px;
    padding: 40px 0;
    background: linear-gradient(135deg, #85bf9a 0%, #07240f 100%);
    border-radius: 15px;
    color: white;
}

.dashboard-header h1 {
    font-size: 2.5rem;
    margin-bottom: 10px;
    font-family: 'Aldrich', sans-serif;
}

.dashboard-header p {
    font-size: 1.1rem;
    opacity: 0.9;
}

.dashboard-menu {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    margin-bottom: 50px;
}

.dashboard-card {
    background: white;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    text-align: center;
    border: 2px solid transparent;
}

.dashboard-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    border-color: #85bf9a;
}

.dashboard-card i {
    font-size: 3rem;
    margin-bottom: 20px;
    color: #85bf9a;
}

.dashboard-card h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: #07240f;
    font-family: 'Aldrich', sans-serif;
}

.dashboard-card p {
    color: #666;
    margin-bottom: 20px;
    line-height: 1.6;
}

.dashboard-btn {
    display: inline-block;
    padding: 12px 30px;
    background: #07240f;
    color: white;
    text-decoration: none;
    border-radius: 25px;
    transition: all 0.3s ease;
    border: 2px solid #07240f;
    font-weight: 600;
}

.dashboard-btn:hover {
    background: transparent;
    color: #07240f;
    transform: translateY(-2px);
}

/* ===== PROFILE PAGE ===== */

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

.profile-header {
    background: white;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
    text-align: center;
}

.profile-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: linear-gradient(135deg, #85bf9a, #07240f);
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 3rem;
    font-weight: bold;
}

.profile-header h1 {
    font-size: 2.2rem;
    margin-bottom: 10px;
    color: #07240f;
    font-family: 'Aldrich', sans-serif;
}

.profile-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.stat-card {
    background: #f8f9fa;
    padding: 25px;
    border-radius: 10px;
    text-align: center;
    border-left: 4px solid #85bf9a;
}

.stat-number {
    font-size: 2rem;
    font-weight: bold;
    color: #07240f;
    display: block;
}

.stat-label {
    color: #666;
    font-size: 0.9rem;
}

.profile-form {
    background: white;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

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

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #07240f;
}

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

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: #85bf9a;
    outline: none;
    box-shadow: 0 0 0 3px rgba(133, 191, 154, 0.1);
}

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

.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 25px;
    margin-top: 30px;
}

.project-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 2px solid transparent;
}

.project-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    border-color: #85bf9a;
}

.project-image {
    height: 200px;
    background: linear-gradient(135deg, #85bf9a, #07240f);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 3rem;
}

.project-content {
    padding: 25px;
}

.project-content h3 {
    font-size: 1.3rem;
    margin-bottom: 10px;
    color: #07240f;
    font-family: 'Aldrich', sans-serif;
}

.project-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 15px 0;
    font-size: 0.9rem;
    color: #666;
}

.project-status {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.status-active {
    background: #e8f5e8;
    color: #2e7d32;
}

.status-pending {
    background: #fff3e0;
    color: #ef6c00;
}

.status-completed {
    background: #e3f2fd;
    color: #1565c0;
}

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

.btn-small {
    padding: 8px 16px;
    border-radius: 20px;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.btn-primary {
    background: #07240f;
    color: white;
}

.btn-primary:hover {
    background: transparent;
    color: #07240f;
    border-color: #07240f;
}

.btn-secondary {
    background: transparent;
    color: #07240f;
    border: 2px solid #07240f;
}

.btn-secondary:hover {
    background: #07240f;
    color: white;
}

/* ===== SETTINGS PAGE ===== */

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

.settings-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 30px;
    border-bottom: 2px solid #e0e0e0;
}

.tab-btn {
    padding: 12px 25px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    font-size: 1rem;
    font-weight: 600;
    color: #666;
    cursor: pointer;
    transition: all 0.3s ease;
}

.tab-btn.active {
    color: #07240f;
    border-bottom-color: #85bf9a;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
    animation: fadeIn 0.5s ease;
}

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

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

.settings-card {
    background: white;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    margin-bottom: 25px;
}

.settings-card h3 {
    font-size: 1.4rem;
    margin-bottom: 20px;
    color: #07240f;
    font-family: 'Aldrich', sans-serif;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 10px;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 30px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked+.toggle-slider {
    background-color: #85bf9a;
}

input:checked+.toggle-slider:before {
    transform: translateX(30px);
}

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

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

    .profile-stats {
        grid-template-columns: 1fr;
    }

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

    .settings-tabs {
        flex-direction: column;
    }

    .dashboard-header h1 {
        font-size: 2rem;
    }

    .profile-header h1 {
        font-size: 1.8rem;
    }
}

@media (max-width: 480px) {

    .dashboard-container,
    .profile-container,
    .settings-container {
        padding: 0 15px;
    }

    .dashboard-card,
    .profile-header,
    .profile-form,
    .settings-card {
        padding: 20px;
    }

    .project-actions {
        flex-direction: column;
    }
}

/* ===== SLIDERS ===== */

.carousel-container {
    width: 100%;
    max-width: 100%;
    height: 480px;
    position: relative;
    perspective: 1000px;
    margin-top: 80px;
}

.carousel-track {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.card {
    position: absolute;
    width: 280px;
    height: 380px;
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: pointer;
}

.card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.card.center {
    z-index: 10;
    transform: scale(1.1) translateZ(0);
}

.card.center img {
    filter: none;
}

.card.left-2 {
    z-index: 1;
    transform: translateX(-400px) scale(0.8) translateZ(-300px);
    opacity: 0.7;
}

.card.left-2 img {
    filter: grayscale(100%);
}

.card.left-1 {
    z-index: 5;
    transform: translateX(-200px) scale(0.9) translateZ(-100px);
    opacity: 0.9;
}

.card.left-1 img {
    filter: grayscale(100%);
}

.card.right-1 {
    z-index: 5;
    transform: translateX(200px) scale(0.9) translateZ(-100px);
    opacity: 0.9;
}

.card.right-1 img {
    filter: grayscale(100%);
}

.card.right-2 {
    z-index: 1;
    transform: translateX(400px) scale(0.8) translateZ(-300px);
    opacity: 0.7;
}

.card.right-2 img {
    filter: grayscale(100%);
}

.card.hidden {
    opacity: 0;
    pointer-events: none;
}

.member-info {
    text-align: center;
    margin-top: 40px;
    transition: all 0.5s ease-out;
    z-index: 1;
}

.member-name {
    color: color-mix(in srgb-linear, #0e6883 35%, #002727 65%);
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 10px;
    position: relative;
    display: inline-block;
}

.member-name::before,
.member-name::after {
    content: "";
    position: absolute;
    top: 100%;
    width: 100px;
    height: 2px;
    color: color-mix(in srgb-linear, #b4a995 35%, #007a7a 65%);
}

.member-name::before {
    left: -120px;
}

.member-name::after {
    right: -120px;
}

/* 4) Corrigir member-role (remover position absolute que sobrepunha imagens) */
.member-role {
    color: #848696;
    font-size: 1.5rem;
    font-weight: 500;
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 10px 0;
    margin-top: 8px;
    position: static;
    /* corrigido */
}

.dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 60px;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(8, 42, 123, 0.2);
    cursor: pointer;
    transition: all 0.3s ease;
}

.dot.active {
    background: rgb(0, 0, 0);
    transform: scale(1.2);
}

.nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.6);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 20;
    transition: all 0.3s ease;
    font-size: 1.5rem;
    border: none;
    outline: none;
    padding-bottom: 4px;
}

.nav-arrow:hover {
    background: rgba(0, 0, 0, 0.8);
    transform: translateY(-50%) scale(1.1);
}

.nav-arrow.left {
    left: 200px;
    padding-right: 3px;
}

.nav-arrow.right {
    right: 200px;
    padding-left: 3px;
}

@media (max-width: 768px) {
    .about-title {
        font-size: 4.5rem;
    }

    .card {
        width: 200px;
        height: 280px;
    }

    .card.left-2 {
        transform: translateX(-250px) scale(0.8) translateZ(-300px);
    }

    .card.left-1 {
        transform: translateX(-120px) scale(0.9) translateZ(-100px);
    }

    .card.right-1 {
        transform: translateX(120px) scale(0.9) translateZ(-100px);
    }

    .card.right-2 {
        transform: translateX(250px) scale(0.8) translateZ(-300px);
    }

    .member-name {
        font-size: 2rem;
    }

    .member-role {
        font-size: 1.2rem;
    }

    .member-name::before,
    .member-name::after {
        width: 50px;
    }

    .member-name::before {
        left: -70px;
    }

    .member-name::after {
        right: -70px;
    }
}


/* ===== FOOTER ===== */
footer {
    background: #222;
    color: white;
    text-align: center;
    padding: 20px;
    margin-top: 40px;
}

/* ===== RESPONSIVIDADE ===== */
@media (max-width: 768px) {
    header {
        flex-direction: column;
        padding: 15px;
    }

    header nav {
        margin-top: 10px;
    }

    header nav a {
        margin: 0 10px;
        font-size: 16px;
    }
}


/* ===== bolinha do cursor ===== */

.ball {
    background: #ff00bf;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    mix-blend-mode: difference;
    z-index: 0;
    text-align: center;
    font-family: Chivo;
    color: black;
    align-items: center;

    /* animação de "respiração" */
    animation: breathing 3s ease-in-out infinite;
}

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

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

    100% {
        transform: translate(-50%, -50%) scale(1);
    }
}


/* ===== BOTÕES ===== */
.btn {
    margin-left: 200px;
    margin-top: 20px;
    display: inline-block;
    padding: 10px 20px;
    border-radius: 8px;
    border: 2px solid rgb(255, 255, 255);
    background: #00000057;
    color: rgb(255, 255, 255);
    font-size: 16px;
    text-decoration: none;
    transition: background 0.3s, transform 0.2s;
    z-index: 20;
}

.btn:hover {
    background: #00000057;
    transform: scale(1.05);
    z-index: 20;
}

.btn.big {
    font-size: 18px;
    padding: 14px 28px;
    margin: 10px;
    z-index: 20;
}

.btn2 {
    margin-left: 200px;
    margin-top: 20px;
    display: inline-block;
    padding: 10px 20px;
    border-radius: 8px;
    border: 2px solid rgb(255, 255, 255);
    background: #00000057;
    color: rgb(255, 255, 255);
    font-size: 16px;
    text-decoration: none;
    transition: background 0.3s, transform 0.2s;
    z-index: 20;
}

.btn2:hover {
    background: #032709d2;
    transform: scale(1.05);
    z-index: 20;
}


/* ===== ESTILOS DO CARROSSEL DE PUBLICAÇÕES ===== */

.secao-publicacoes-recentes {
    width: 100%;
    max-width: 1920px;
    padding: 60px;
    position: relative;
    transition: all 0.6s ease;
    margin: 0 auto;
    /* Centraliza a seção */
    background: #e8e8e8;
    /* Fundo para a seção do carrossel */
    color: #000;
    /* Cor do texto padrão para o carrossel */
}

.cabecalho-publicacoes {
    margin-bottom: 40px;
    text-align: center;
    transition: all 0.6s ease;
}

.titulo-categoria-publicacoes {
    font-size: 14px;
    font-weight: 600;
    color: #666;
    margin-bottom: 10px;
    letter-spacing: 1px;
    transition: all 0.6s ease;
}

.titulo-principal-publicacoes {
    font-size: 32px;
    font-weight: bold;
    color: #000;
    transition: all 0.6s ease;
}

.wrapper-carrossel-publicacoes {
    position: relative;
}

.container-carrossel-publicacoes {
    display: flex;
    gap: 30px;
    overflow: hidden;
    scroll-behavior: smooth;
    transition: all 0.6s ease;
}

.card-publicacao-carrossel {
    min-width: calc(50% - 15px);
    background: white;
    padding: 50px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
    opacity: 0.7;
    transform: scale(0.95);
}

.card-publicacao-carrossel.active {
    opacity: 1;
    transform: scale(1);
}

.card-publicacao-carrossel::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.6s ease;
}

.card-publicacao-carrossel:hover::before {
    left: 100%;
}

.card-publicacao-carrossel:hover {
    transform: translateY(-12px) scale(1.02) rotate(-1deg);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
}

.card-publicacao-carrossel:nth-child(even):hover {
    transform: translateY(-12px) scale(1.02) rotate(1deg);
}

.categoria-card-publicacao {
    font-size: 12px;
    color: #999;
    margin-bottom: 20px;
    letter-spacing: 2px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.card-publicacao-carrossel:hover .categoria-card-publicacao {
    letter-spacing: 4px;
    color: #000;
}

.titulo-card-publicacao {
    font-size: 28px;
    margin-bottom: 25px;
    line-height: 1.3;
    color: #000;
    font-weight: bold;
    transition: all 0.3s ease;
}

.card-publicacao-carrossel:hover .titulo-card-publicacao {
    transform: translateX(5px);
}

.descricao-card-publicacao {
    color: #666;
    line-height: 1.7;
    margin-bottom: 35px;
    font-size: 15px;
    transition: all 0.3s ease;
}

.card-publicacao-carrossel:hover .descricao-card-publicacao {
    color: #333;
}

.botao-explorar-publicacao {
    margin-left: 200px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    border: 2px solid #000;
    background: transparent;
    color: #000;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 600;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    cursor: pointer;
    font-size: 14px;
    position: relative;
    overflow: hidden;
}

.botao-explorar-publicacao::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: #000;
    transition: all 0.5s ease;
    transform: translate(-50%, -50%);
}

.botao-explorar-publicacao:hover::before {
    width: 300px;
    height: 300px;
}

.botao-explorar-publicacao:hover {
    color: white;
    transform: translateX(8px) scale(1.05);
    border-color: #000;
}

.botao-explorar-publicacao span {
    position: relative;
    z-index: 1;
}

.botao-explorar-publicacao::after {
    content: '→';
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease;
}

.botao-explorar-publicacao:hover::after {
    transform: translateX(5px);
}

.navegacao-carrossel-publicacoes {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 40px;
    transition: all 0.6s ease;
}

.botao-seta-carrossel {
    width: 50px;
    height: 50px;
    border: 2px solid #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    background: white;
    color: #000;
    font-size: 18px;
    font-weight: bold;
}

.botao-seta-carrossel:hover {
    background: #000;
    color: white;
    transform: scale(1.2) rotate(360deg);
}

.botao-ver-mais-lateral {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%) translateX(100px);
    /* Começa fora da tela */
    background: #000;
    color: white;
    padding: 150px 35px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    letter-spacing: 4px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    border-radius: 8px 0 0 8px;
    z-index: 100;
    opacity: 0;
}

.botao-ver-mais-lateral.ativo {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

.botao-ver-mais-lateral.recolhido {
    transform: translateY(-50%) translateX(90%);
    /* Recolhe 90% para fora */
    opacity: 0.3;
    /* Fica semi-transparente */
    padding: 150px 15px;
    /* Reduz o padding */
}

.botao-ver-mais-lateral:hover {
    padding: 150px 45px;
    background: #111;
    letter-spacing: 6px;
}

/* ===== CORES DO BOTÃO LATERAL POR SEÇÃO ===== */

.botao-ver-mais-lateral.secao-divisor {
    background: #000000;
    color: #ffffff1f;
}

.botao-ver-mais-lateral.secao-sobre {
    background: #00000000;
    color: #030303;
}

.botao-ver-mais-lateral.secao-implementacao {
    background: #3a3a3a00;
    color: #000000;
}

.botao-ver-mais-lateral.secao-regulamento {
    background-color: #00000000;
    color: #dddddd;
}

.botao-ver-mais-lateral.secao-parceiros {
    background-color: #00000000;
    display: none;
}

.botao-ver-mais-lateral.secao-contato {
    background-color: #00000000;
    display: none;
}

.card-publicacao-1 {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
}

.card-publicacao-2 {
    background: linear-gradient(135deg, #ffffff 0%, #f0f2f5 100%);
}

.card-publicacao-3 {
    background: linear-gradient(135deg, #ffffff 0%, #e8eef3 100%);
}

.card-publicacao-4 {
    background: linear-gradient(135deg, #ffffff 0%, #e0e7ef 100%);
}

.card-publicacao-5 {
    background: linear-gradient(135deg, #ffffff 0%, #d8e0e8 100%);
}

.indicadores-paginacao-carrossel {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 30px;
    transition: all 0.6s ease;
}

.ponto-indicador-carrossel {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ccc;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.ponto-indicador-carrossel.active {
    background: #000;
    width: 30px;
    border-radius: 6px;
}

.ponto-indicador-carrossel:hover {
    background: #666;
    transform: scale(1.3);
}

/* Modo Expandido - Tela Cheia Preta */
.overlay-tela-cheia {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.8s ease;
}

.overlay-tela-cheia.ativo {
    opacity: 1;
    pointer-events: all;
}

.conteudo-expandido {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 60px;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.overlay-tela-cheia.ativo .conteudo-expandido {
    opacity: 1;
    transform: scale(1);
}

.cabecalho-expandido {
    margin-bottom: 60px;
    text-align: center;
}

.titulo-categoria-expandido {
    font-size: 16px;
    font-weight: 600;
    color: #666;
    margin-bottom: 15px;
    letter-spacing: 3px;
}

.titulo-principal-expandido {
    font-size: 48px;
    font-weight: bold;
    color: #fff;
    letter-spacing: 2px;
}

.container-carrossel-expandido {
    display: flex;
    gap: 40px;
    overflow: hidden;
    max-width: 1400px;
    scroll-behavior: smooth;
}

.card-expandido {

    min-width: calc(50% - 20px);
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    padding: 60px;
    border-radius: 12px;
    border: 2px solid #444;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.card-expandido:hover {
    transform: translateY(-15px) scale(1.03);
    border-color: #fff;
    box-shadow: 0 20px 60px rgba(255, 255, 255, 0.1);
}

.categoria-card-expandido {
    font-size: 12px;
    color: #888;
    margin-bottom: 20px;
    letter-spacing: 3px;
    font-weight: 600;
}

.titulo-card-expandido {
    font-size: 32px;
    margin-bottom: 25px;
    line-height: 1.3;
    color: #fff;
    font-weight: bold;
}

.descricao-card-expandido {
    color: #aaa;
    line-height: 1.8;
    margin-bottom: 40px;
    font-size: 16px;
}

.botao-explorar-expandido {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 36px;
    border: 2px solid #fff;
    background: transparent;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 600;
    transition: all 0.4s ease;
    cursor: pointer;
    font-size: 14px;
}

.botao-explorar-expandido:hover {
    background: #fff;
    color: #000;
    transform: translateX(8px);
}

.botao-fechar-expandido {
    position: absolute;
    top: 40px;
    right: 40px;
    width: 60px;
    height: 60px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    font-size: 28px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.botao-fechar-expandido:hover {
    background: #fff;
    color: #000;
    transform: rotate(90deg) scale(1.1);
}

.navegacao-expandida {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 50px;
}

.botao-seta-expandido {
    width: 60px;
    height: 60px;
    border: 2px solid #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: transparent;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
}

.botao-seta-expandido:hover {
    background: #fff;
    color: #000;
    transform: scale(1.2);
}

.card-expandido-1 {
    background: linear-gradient(135deg, #2d1b4e 0%, #1a0f2e 100%);
    border-color: #4a2d7a;
}

.card-expandido-2 {
    background: linear-gradient(135deg, #1b4e3a 0%, #0f2e1f 100%);
    border-color: #2d7a5a;
}

.card-expandido-3 {
    background: linear-gradient(135deg, #4e1b1b 0%, #2e0f0f 100%);
    border-color: #7a2d2d;
}

.card-expandido-4 {
    background: linear-gradient(135deg, #1b3a4e 0%, #0f1f2e 100%);
    border-color: #2d5a7a;
}

.card-expandido-5 {
    background: linear-gradient(135deg, #4e3d1b 0%, #2e240f 100%);
    border-color: #7a652d;
}

/* Media queries para responsividade do carrossel */
@media (max-width: 1200px) {
    .secao-publicacoes-recentes {
        padding: 40px 20px;
    }

    .card-publicacao-carrossel {
        min-width: calc(100% - 20px);
    }

    .container-carrossel-publicacoes {
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .secao-publicacoes-recentes {
        padding: 30px 15px;
    }

    .titulo-principal-publicacoes {
        font-size: 24px;
    }

    .card-publicacao-carrossel {
        padding: 30px;
    }

    .titulo-card-publicacao {
        font-size: 22px;
    }

    .botao-explorar-publicacao {
        padding: 10px 20px;
        font-size: 12px;
    }

    .botao-seta-carrossel {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .botao-ver-mais-lateral {
        padding: 100px 20px;
        font-size: 14px;
    }

    .titulo-principal-expandido {
        font-size: 36px;
    }

    .card-expandido {
        padding: 40px;
        min-width: calc(100% - 20px);
    }

    .titulo-card-expandido {
        font-size: 26px;
    }

    .botao-explorar-expandido {
        padding: 12px 24px;
        font-size: 12px;
    }

    .botao-fechar-expandido {
        width: 40px;
        height: 40px;
        font-size: 20px;
        top: 20px;
        right: 20px;
    }

    .botao-seta-expandido {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .secao-publicacoes-recentes {
        padding: 20px 10px;
    }

    .titulo-principal-publicacoes {
        font-size: 20px;
    }

    .card-publicacao-carrossel {
        padding: 20px;
    }

    .titulo-card-publicacao {
        font-size: 18px;
    }

    .descricao-card-publicacao {
        font-size: 13px;
    }

    .botao-ver-mais-lateral {
        padding: 80px 15px;
        font-size: 12px;
    }

    .titulo-principal-expandido {
        font-size: 28px;
    }

    .card-expandido {
        padding: 30px;
    }

    .titulo-card-expandido {
        font-size: 20px;
    }

    .descricao-card-expandido {
        font-size: 14px;
    }
}

/* divisor */

.divisor {
    background-color: #8c8c8c;
    /* Cinza médio cru */
    padding: 40px 0;
    margin: 60px 0;
    border-top: 2px solid #666666;
    /* Cinza mais escuro */
    border-bottom: 2px solid #666666;
}

.divisor>div {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.containerdivisor {
    height: 1px;
    background: linear-gradient(90deg,
            transparent 0%,
            #a6a6a6 20%,
            #8c8c8c 50%,
            #a6a6a6 80%,
            transparent 100%);
    opacity: 0.8;
}


/* ===== ESTILOS DA SEÇÃO DE INOVAÇÃO ===== */

.secao-inovacao-areas-tematicas {
    width: 100%;
    padding: 180px 50px;
    margin: 0 auto;
    /* Centraliza a seção */
    color: #000;
    /* Cor do texto padrão para a seção de inovação */
    ;
}

.container-inovacao-principal {
    display: flex;
    gap: 60px;
    align-items: flex-start;
}

.coluna-esquerda-inovacao {
    flex: 1;
    transition: all 0.5s ease;
}

.cabecalho-categoria-inovacao {
    margin-left: 250px;
    font-size: 14px;
    font-weight: 600;
    color: #666;
    margin-bottom: 15px;
    letter-spacing: 2px;
    transition: all 0.3s ease;
}

.coluna-esquerda-inovacao:hover .cabecalho-categoria-inovacao {
    letter-spacing: 4px;
    color: color-mix(in srgb-linear, #b4a995 35%, #007a7a 65%);
    ;
}

.titulo-principal-inovacao {
    font-size: 64px;
    font-weight: bold;
    margin-bottom: 40px;
    color: color-mix(in srgb-linear, #b4a995 15%, #020c0c 85%);
    ;
    line-height: 1.1;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    margin-left: 50px;
}

.titulo-principal-sobre {
    font-size: 64px;
    font-weight: bold;
    margin-bottom: 40px;
    color: color-mix(in srgb-linear, #b4a995 35%, #007a7a 65%);
    ;
    line-height: 1.1;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    margin-left: 0px;
}

.titulo-infraestruturas-sobre {
    font-size: 64px;
    font-weight: bold;
    padding-top: 40px;
    color: color-mix(in srgb-linear, #e6e4e0 35%, #e4f5f5 65%);
    ;
    line-height: 1.1;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.titulo-infraestruturas-sobre:hover {
    color: #ffffff;
}

.titulo-principal-sobre:hover {
    transform: translateX(10px) scale(1.02);
    letter-spacing: 2px;
    color: #000;
}

.descricao-sobre:hover {
    transform: translateX(10px) scale(1.02);
    letter-spacing: 2px;
    color: #000;
}

.descricao-infraestruturas:hover {
    color: #ffffff;
}

.coluna-esquerda-inovacao:hover .titulo-principal-inovacao {
    transform: translateX(10px) scale(1.02);
    letter-spacing: 2px;
    color: #000;
}

.descricao-inovacao {
    line-height: 1.8;
    color: color-mix(in srgb-linear, #b4a995 15%, #020c0c 85%);
    margin-bottom: 40px;
    font-size: 16px;
    transition: all 0.3s ease;
    margin-left: 50px;
}

.descricao-infraestruturas {
    line-height: 1.8;
    color: color-mix(in srgb-linear, #f1e9da 35%, #d2dada 65%);
    margin-bottom: 0;
    font-size: 16px;
    transition: all 0.3s ease;
    text-align: end;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

.descricao-sobre {
    line-height: 1.8;
    color: color-mix(in srgb-linear, #b4a995 35%, #007a7a 65%);
    margin-bottom: 40px;
    font-size: 16px;
    transition: all 0.3s ease;
    margin-left: 0px;
}

.coluna-esquerda-inovacao:hover .descricao-inovacao {
    color: #000000;
}

.botao-explorar-inovacao {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    border: 2px solid #000;
    background: transparent;
    color: color-mix(in srgb-linear, #b4a995 35%, #007a7a 65%);
    text-decoration: none;
    border-radius: 4px;
    font-weight: 600;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    cursor: pointer;
    font-size: 14px;
    position: relative;
    overflow: hidden;
}

.botao-explorar-inovacao::before {
    content: \'\';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: #000;
    transition: all 0.5s ease;
    transform: translate(-50%, -50%);
}

.botao-explorar-inovacao:hover::before {
    width: 300px;
    height: 300px;
}

.botao-explorar-inovacao:hover {
    color: white;
    transform: translateX(8px) scale(1.05);
}

.botao-explorar-inovacao span {
    position: relative;
    z-index: 1;
}

.botao-explorar-inovacao::after {
    content: \'→\';
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease;
}

.botao-explorar-inovacao:hover::after {
    transform: translateX(5px);
}

.coluna-direita-projetos {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.card-projeto-inovacao {
    padding: 55px 40px;
    border-radius: 8px;
    display: grid;
    justify-content: stretch;
    align-items: stretch;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
}

.card-projeto-inovacao::before {
    content: \'\';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
}

.card-projeto-inovacao:hover::before {
    left: 100%;
}

.card-projeto-inovacao:hover {
    transform: translateX(15px) scale(1.02);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.card-projeto-inovacao.expandido {
    transform: translateX(5px) scale(1.01);
}

.nome-projeto-inovacao {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.card-projeto-inovacao:hover .nome-projeto-inovacao {
    letter-spacing: 3px;
}

.botao-expandir-projeto {
    width: 40px;
    height: 40px;
    border: 2px solid currentColor;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 300;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    background: transparent;
    flex-shrink: 0;
}

.card-projeto-inovacao:hover .botao-expandir-projeto {
    transform: rotate(180deg) scale(1.15);
    border-width: 3px;
}

.card-projeto-inovacao.expandido .botao-expandir-projeto {
    transform: rotate(135deg) scale(0.1);
    background: currentColor;
    color: #393247;
}

.detalhes-projeto-expandido {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    padding: 0;
    opacity: 0;
}

.card-projeto-inovacao.expandido {
    flex-direction: column;
    align-items: flex-start;
}

.card-projeto-inovacao.expandido .detalhes-projeto-expandido {
    max-height: 400px;
    padding-top: 25px;
    width: 100%;
    opacity: 1;
    animation: fadeInUp 0.5s ease forwards;
}

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

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

.cabecalho-card-projeto {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.conteudo-detalhes-projeto {
    animation: slideIn 0.5s ease forwards;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

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

.descricao-detalhes-projeto {
    line-height: 1.7;
    margin-bottom: 20px;
    font-size: 15px;
    opacity: 0.9;
    color: #000;
}

.botao-ver-mais-projeto {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    border: 2px solid currentColor;
    background: transparent;
    color: inherit;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 600;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    cursor: pointer;
    font-size: 13px;
    position: relative;
    overflow: hidden;
}

.botao-ver-mais-projeto::before {
    content: \'\';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    transition: left 0.4s ease;
}

.botao-ver-mais-projeto:hover::before {
    left: 100%;
}

.botao-ver-mais-projeto:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateX(8px) scale(1.05);
    border-width: 3px;
}

/* Container principal que "emoldura" o perfil */
.perfil-moldura {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Alinhe no topo da tela */
    padding: 40px 20px;
    background-color: #f4f7f6; /* Fundo leve */
    min-height: 100vh; /* Ocupa a altura total da viewport */
}

/* O painel principal do perfil (o "cartão") */
.perfil-painel {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 400px;
    padding: 30px;
    text-align: center;
}

/* Agrupamento da foto e nome */
.perfil-cabecalho {
    margin-bottom: 25px;
    border-bottom: 1px solid #eeeeee;
    padding-bottom: 25px;
}

/* O círculo que contém a imagem (a "órbita" do avatar) */
.foto-orbita {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 15px auto;
    border: 4px solid #007bff; /* Borda de destaque */
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.5);
}

/* A imagem em si */
.foto-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* O nome do usuário */
.nome-identidade {
    font-size: 1.8em;
    color: #333333;
    margin: 0;
    font-weight: 600;
}

/* Detalhes adicionais */
.perfil-detalhes {
    text-align: left;
    margin-bottom: 25px;
    padding: 10px 0;
}

.detalhe-linha {
    margin: 5px 0;
    font-size: 1em;
    color: #666666;
}

.detalhe-titulo {
    font-weight: 700;
    color: #333333;
    display: inline-block;
    min-width: 60px; /* Para alinhamento, se tiver mais detalhes */
}

/* Container dos botões */
.perfil-acoes {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Estilo base para todos os botões de ação */
.acao-botao {
    display: block;
    padding: 12px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 1em;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: background-color 0.3s, opacity 0.3s;
    text-align: center;
}

/* Botão principal (Editar Perfil) */
.acao-primaria {
    background-color: #007bff;
    color: #ffffff;
}

.acao-primaria:hover {
    background-color: #0056b3;
}

/* Botão secundário (Sair da Conta) */
.acao-secundaria {
    background-color: #f8f9fa;
    color: #333333;
    border: 1px solid #ced4da;
}

.acao-secundaria:hover {
    background-color: #e9ecef;
}

/* Estilo de perigo para o botão Sair */
.acao-perigo {
    color: #66121a;
    background-color: #ffffff;
    border: 1px solid #41090f;
}

.acao-perigo:hover {
    background-color: #dc3545;
    color: #ffffff;
}






























































































































.card-projeto-carbonzero {
    background: #a0c5ff;
    border: 2px solid #000000;
}

.card-projeto-carbonzero:hover {
    background: #F5F5F0;
}

.card-projeto-urbsmart {
    background: #7aaef9;
    border: 2px solid #000000;
}

.card-projeto-urbsmart:hover {
    background: #F5F5F0;
}

.card-projeto-ecomat {
    background: #5497f2;
    border: 2px solid #000000;
}

.card-projeto-ecomat:hover {
    background: #F5F5F0;
}

.card-projeto-educis {
    background: #2e7fec;
    border: 2px solid #000000;

}

.card-projeto-educis:hover {
    background: #F5F5F0;
}

.card-projeto-qw {
    background: #B8EAE4;
    border: 0px solid #000000;
}

.card-projeto-qo{
    background: #B8EACC;
    border: 0px solid #000000;
}
.card-projeto-qu {
    background: #8fb6a9;
    border: 0px solid #000000;
}

/* Animação de entrada inicial */
.card-projeto-inovacao {
    animation: slideInRight 0.6s ease forwards;
    opacity: 0;
}

.card-projeto-inovacao:nth-child(1) {
    animation-delay: 0.1s;
}

.card-projeto-inovacao:nth-child(2) {
    animation-delay: 0.2s;
}

.card-projeto-inovacao:nth-child(3) {
    animation-delay: 0.3s;
}

.card-projeto-inovacao:nth-child(4) {
    animation-delay: 0.4s;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

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

/* Media queries para responsividade da seção de inovação */
@media (max-width: 1200px) {
    .secao-inovacao-areas-tematicas {
        padding: 60px 30px;
    }

    .container-inovacao-principal {
        flex-direction: column;
        gap: 40px;
    }

    .titulo-principal-inovacao {
        font-size: 48px;
    }
}

@media (max-width: 768px) {
    .secao-inovacao-areas-tematicas {
        padding: 40px 20px;
    }

    .titulo-principal-inovacao {
        font-size: 36px;
        margin-bottom: 30px;
    }

    .descricao-inovacao {
        font-size: 15px;
        margin-bottom: 30px;
    }

    .botao-explorar-inovacao {
        padding: 12px 28px;
        font-size: 13px;
    }

    .card-projeto-inovacao {
        padding: 25px 30px;
    }

    .nome-projeto-inovacao {
        font-size: 18px;
    }

    .botao-expandir-projeto {
        width: 35px;
        height: 35px;
        font-size: 24px;
    }

    .descricao-detalhes-projeto {
        font-size: 14px;
    }

    .botao-ver-mais-projeto {
        padding: 10px 20px;
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .secao-inovacao-areas-tematicas {
        padding: 30px 15px;
    }

    .titulo-principal-inovacao {
        font-size: 28px;
        margin-bottom: 20px;
    }

    .descricao-inovacao {
        font-size: 14px;
        margin-bottom: 20px;
    }

    .botao-explorar-inovacao {
        padding: 10px 20px;
        font-size: 12px;
    }

    .card-projeto-inovacao {
        padding: 20px 25px;
    }

    .nome-projeto-inovacao {
        font-size: 16px;
    }

    .botao-expandir-projeto {
        width: 30px;
        height: 30px;
        font-size: 20px;
    }
}

/* Container that centers the entire slider vertically and horizontally */
.slider-wrapper-container {
    display: flex;
    /* Flex container */
    justify-content: center;
    /* Center horizontally */
    align-items: center;
    /* Center vertically */
    height: 80vh;
    /* Full viewport height */
    width: 100%;
    /* Full width */
}

/* Slider container centered and positioned relatively */
.slider-container {
    position: relative;
    /* Changed from fixed to relative for better centering */
    width: 100%;
    /* Full width */
    overflow: hidden;
    /* Hide anything outside container */
    display: flex;
    /* Flex container to center slider */
    justify-content: center;
    /* Center horizontally */
    align-items: center;
    /* Center vertically */
    height: 100vh;
    /* Full viewport height */
}

/* Horizontal track holding all slider items side-by-side */
.slider {
    display: flex;
    /* Arrange children horizontally */
    margin-left: 0;
    /* Removed margin-left to avoid shifting */
}

/* Wrapper around each slider item, adds padding and border */
.slider-wrapper {
    padding: 30px 40px;
    /* Padding inside wrapper */
    border: 1px solid #444;
    /* Border for visual separation */
    box-sizing: border-box;
    /* Include padding and border in size */
    flex-shrink: 0;
    /* Prevent shrinking */
    display: flex;
    /* Flex container */
    align-items: center;
    /* Center children vertically */
    justify-content: center;
    /* Center children horizontally */
    margin-right: 20px;
    /* Spacing between items */
}

/* The actual slider card content */
.slider-item {
    width: 360px;
    /* Fixed width */
    height: 260px;
    /* Fixed height */
    background-color: #222;
    /* Dark background color */
    color: white;
    /* Text color */
    font-size: 48px;
    /* Large font size */
    display: flex;
    /* Flex container */
    align-items: center;
    /* Center content vertically */
    justify-content: center;
    /* Center content horizontally */
    font-family: Arial, sans-serif;
    /* Font family */
    cursor: default;
    /* Default mouse cursor */
    position: relative;
    /* Context for absolute children */
    overflow: hidden;
    /* Hide overflow inside card */
    transition: transform 0.3s ease;
    /* Smooth transform transitions */
}

/* Hover bubble element */
.bubble {
    position: absolute;
    /* Positioned relative to slider-item */
    top: 50%;
    /* Center vertically */
    left: 50%;
    /* Center horizontally */
    width: 0;
    /* Start with zero size */
    height: 0;
    /* Start with zero size */
    background-color: #a1ab60;
    border-radius: 50%;
    /* Make bubble round */
    transform: translate(-50%, -50%);
    /* Center bubble exactly */
    pointer-events: none;
    /* Don't interfere with mouse events */
    opacity: 0;
    /* Start invisible */
    display: flex;
    /* Flex container for text */
    justify-content: center;
    /* Center text horizontally */
    align-items: center;
    /* Center text vertically */
    color: #ebebeb;
    /* Light grey text */
    font-family: Arial, sans-serif;
    /* Font family */
    font-size: 12px;
    /* Small font size */
    transition: width 0.3s, height 0.3s, opacity 0.3s;
    /* Animate size and visibility */
    z-index: 2;
    /* Above slider-item content */
}

/* Show the bubble on hover */
.slider-item:hover .bubble {
    opacity: 1;
    /* Make bubble visible */
    width: 100px;
    /* Expand width */
    height: 100px;
    /* Expand height */
}

/* Text inside the bubble scales up */
.bubble span {
    pointer-events: none;
    /* Ignore mouse events on text */
    transition: transform 0.3s, font-size 0.3s;
    /* Animate scale and size */
}

/* Scale up text on bubble hover */
.slider-item:hover .bubble span {
    transform: scale(1.2);
    /* Slightly enlarge text */
    font-size: 14px;
    /* Increase font size */
}

.barra-pesquisa {
    text-align: center;
    margin-bottom: 20px;
}

.barra-pesquisa input {
    padding: 10px 15px;
    border-radius: 8px;
    border: none;
    width: 300px;
}

.filtros-tags {
    text-align: center;
    margin-bottom: 15px;
}

.filtros-tags button {
    margin: 5px;
    padding: 8px 12px;
    border: none;
    border-radius: 20px;
    cursor: pointer;
}

.filtros-tags .active {
    background: #000000;
    color: white;
}

.barra-pesquisa input {
    padding: 10px;
    border-radius: 10px;
    width: 250px;
}