:root {
            --cor-primaria: #0A7EA4;
            --cor-secundaria: #F4A261;
            --cor-destaque: #E76F51;
            --cor-clara: #F8F9FA;
            --cor-texto: #2D3748;
            --cor-texto-claro: #718096;
            --oceano: #1A5F7A;
        }

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

        body {
            font-family: 'Karla', sans-serif;
            color: var(--cor-texto);
            line-height: 1.7;
            overflow-x: hidden;
            background: var(--cor-clara);
        }

        /* Efeito de ondas de fundo */
        .waves-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            opacity: 0.05;
            background-image:
                repeating-linear-gradient(45deg, var(--cor-primaria) 0px, transparent 2px, transparent 8px),
                repeating-linear-gradient(-45deg, var(--cor-secundaria) 0px, transparent 2px, transparent 8px);
        }

        /* Header */
        header {
            background: linear-gradient(135deg, var(--oceano) 0%, var(--cor-primaria) 100%);
            color: white;
            padding: 1rem 0;
            position: sticky;
            top: 0;
            z-index: 1000;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            animation: slideDown 0.6s ease-out;
        }

        @keyframes slideDown {
            from {
                transform: translateY(-100%);
                opacity: 0;
            }

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

        nav {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 1rem;
        }

        .logo {
            font-family: 'Righteous', cursive;
            font-size: 1.8rem;
            letter-spacing: 1px;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .logo::before {
            content: '👋';
            font-size: 2rem;
            animation: wave 2s infinite ease-in-out;
        }

        @keyframes wave {

            0%,
            100% {
                transform: rotate(0deg);
            }

            25% {
                transform: rotate(20deg);
            }

            75% {
                transform: rotate(-20deg);
            }
        }

        nav ul {
            list-style: none;
            display: flex;
            gap: 2rem;
            flex-wrap: wrap;
        }

        /* Esconder side-menu por defeito (aparece duplicado no desktop) */
        .side-menu {
            display: none;
        }

        nav a {
            color: white;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s;
            position: relative;
        }

        nav a::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 3px;
            background: var(--cor-secundaria);
            transition: width 0.3s;
        }

        nav a:hover::after {
            width: 100%;
        }

        /* Hero Section */
        .hero {
            background: linear-gradient(135deg, var(--cor-primaria) 0%, var(--oceano) 100%);
            color: white;
            padding: 6rem 2rem;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120"><path fill="%23ffffff" fill-opacity="0.1" d="M0,64L48,69.3C96,75,192,85,288,80C384,75,480,53,576,48C672,43,768,53,864,64C960,75,1056,85,1152,80L1200,75L1200,120L1152,120C1056,120,960,120,864,120C768,120,672,120,576,120C480,120,384,120,288,120C192,120,96,120,48,120L0,120Z"></path></svg>') bottom repeat-x;
            background-size: 1200px 120px;
            animation: waveMove 20s linear infinite;
        }

        @keyframes waveMove {
            0% {
                background-position: 0 bottom;
            }

            100% {
                background-position: 1200px bottom;
            }
        }

        .hero-content {
            max-width: 900px;
            margin: 0 auto;
            position: relative;
            z-index: 1;
            animation: fadeInUp 0.8s ease-out 0.3s both;
        }

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

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

        .hero h1 {
            font-family: 'Righteous', cursive;
            font-size: clamp(2.5rem, 6vw, 4rem);
            margin-bottom: 1.5rem;
            line-height: 1.2;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
        }

        .hero p {
            font-size: clamp(1.1rem, 2vw, 1.3rem);
            margin-bottom: 2rem;
            opacity: 0.95;
        }

        .cta-button {
            display: inline-block;
            background: var(--cor-secundaria);
            color: white;
            padding: 1rem 2.5rem;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 700;
            font-size: 1.1rem;
            transition: all 0.3s;
            box-shadow: 0 4px 15px rgba(244, 162, 97, 0.4);
            animation: pulse 2s infinite;
        }

        @keyframes pulse {

            0%,
            100% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.05);
            }
        }

        .cta-button:hover {
            background: var(--cor-destaque);
            transform: translateY(-3px);
            box-shadow: 0 6px 25px rgba(231, 111, 81, 0.5);
            animation: none;
        }

        /* Container */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 2rem;
        }

        /* Sections */
        section {
            padding: 5rem 2rem;
            animation: fadeIn 1s ease-out;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        .section-title {
            font-family: 'Righteous', cursive;
            font-size: clamp(2rem, 4vw, 2.8rem);
            text-align: center;
            margin-bottom: 3rem;
            color: var(--cor-primaria);
            position: relative;
            display: inline-block;
            left: 50%;
            transform: translateX(-50%);
        }

        .section-title::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
            background: linear-gradient(90deg, var(--cor-secundaria), var(--cor-destaque));
            border-radius: 2px;
        }

        /* Sobre Nós */
        .sobre {
            background: white;
        }

        .sobre-content {
            max-width: 800px;
            margin: 0 auto;
            text-align: center;
        }

        .sobre-content p {
            font-size: 1.2rem;
            margin-bottom: 1.5rem;
            color: var(--cor-texto-claro);
        }

        .sobre-content strong {
            color: var(--cor-primaria);
            font-weight: 700;
        }

        /* Missão Cards */
        .missao-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin-top: 3rem;
        }

        .missao-card {
            background: white;
            padding: 2.5rem;
            border-radius: 20px;
            text-align: center;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            border: 3px solid transparent;
            position: relative;
            overflow: hidden;
        }

        .missao-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 5px;
            background: linear-gradient(90deg, var(--cor-primaria), var(--cor-secundaria));
            transform: scaleX(0);
            transition: transform 0.4s;
        }

        .missao-card:hover::before {
            transform: scaleX(1);
        }

        .missao-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            border-color: var(--cor-primaria);
        }

        .missao-card .icon {
            font-size: 3.5rem;
            margin-bottom: 1rem;
            display: block;
            animation: float 3s ease-in-out infinite;
        }

        @keyframes float {

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

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

        .missao-card h3 {
            font-family: 'Righteous', cursive;
            color: var(--cor-primaria);
            font-size: 1.5rem;
            margin-bottom: 1rem;
        }

        .missao-card p {
            color: var(--cor-texto-claro);
            line-height: 1.6;
        }

        /* Projetos */
        .projetos {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
        }

        .projetos-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 2.5rem;
            margin-top: 3rem;
        }

        .projeto-card {
            background: white;
            border-radius: 25px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            transition: all 0.4s;
        }

        .projeto-card:hover {
            transform: scale(1.03);
            box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
        }

        .projeto-header {
            background: linear-gradient(135deg, var(--cor-primaria), var(--oceano));
            color: white;
            padding: 2rem;
            text-align: center;
        }

        .projeto-header .icon {
            font-size: 3rem;
            margin-bottom: 0.5rem;
            display: block;
        }

        .projeto-header h3 {
            font-family: 'Righteous', cursive;
            font-size: 1.6rem;
        }

        .projeto-body {
            padding: 2rem;
        }

        .projeto-body ul {
            list-style: none;
            padding: 0;
        }

        .projeto-body li {
            padding: 0.8rem 0;
            padding-left: 2rem;
            position: relative;
            color: var(--cor-texto-claro);
        }

        .projeto-body li::before {
            content: '✓';
            position: absolute;
            left: 0;
            color: var(--cor-secundaria);
            font-weight: 700;
            font-size: 1.3rem;
        }

        /* Como Ajudar */
        .ajudar {
            background: white;
        }

        .ajudar-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 2rem;
            margin-top: 3rem;
        }

        .ajudar-card {
            background: linear-gradient(135deg, var(--cor-secundaria), var(--cor-destaque));
            color: white;
            padding: 2.5rem;
            border-radius: 20px;
            text-align: center;
            transition: all 0.3s;
            cursor: pointer;
        }

        .ajudar-card:hover {
            transform: rotate(-2deg) scale(1.05);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
        }

        .ajudar-card .icon {
            font-size: 3rem;
            margin-bottom: 1rem;
            display: block;
        }

        .ajudar-card h3 {
            font-family: 'Righteous', cursive;
            font-size: 1.4rem;
            margin-bottom: 0.8rem;
        }

        /* Contato */
        .contato {
            background: linear-gradient(135deg, var(--oceano), var(--cor-primaria));
            color: white;
            text-align: center;
        }

        .contato .section-title {
            color: white;
        }

        .contato .section-title::after {
            background: var(--cor-secundaria);
        }

        .contato-info {
            max-width: 600px;
            margin: 3rem auto 0;
        }

        .contato-item {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            padding: 1.5rem;
            margin-bottom: 1.5rem;
            border-radius: 15px;
            border: 2px solid rgba(255, 255, 255, 0.2);
            transition: all 0.3s;
        }

        .contato-item:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: translateX(10px);
        }

        .contato-item .icon {
            font-size: 2rem;
            margin-bottom: 0.5rem;
        }

        .contato-item h3 {
            font-family: 'Righteous', cursive;
            font-size: 1.2rem;
            margin-bottom: 0.5rem;
        }

        .contato-item a {
            color: white;
            text-decoration: none;
            font-size: 1.1rem;
            transition: all 0.3s;
        }

        .contato-item a:hover {
            color: var(--cor-secundaria);
        }

        /* Footer */
        footer {
            background: #1a202c;
            color: white;
            text-align: center;
            padding: 2rem;
        }

        footer p {
            opacity: 0.8;
        }

        /* Responsivo */
        @media (max-width: 768px) {
                    nav {
                        flex-direction: row;
                        justify-content: space-between;
                        align-items: center;
                    }

                    /* Hamburger & Side Menu */
                    .hamburger {
                        display: none;
                        background: transparent;
                        border: none;
                        gap: 6px;
                        align-items: center;
                        cursor: pointer;
                    }

                    .hamburger .bar {
                        width: 22px;
                        height: 2.5px;
                        background: white;
                        display: block;
                        border-radius: 2px;
                    }

                    .side-menu {
                        position: fixed;
                        top: 0;
                        left: -280px;
                        width: 280px;
                        height: 100vh;
                        background: linear-gradient(180deg, var(--oceano), var(--cor-primaria));
                        color: white;
                        padding: 2.5rem 1.5rem;
                        box-shadow: 4px 0 30px rgba(0,0,0,0.3);
                        transition: left 0.35s cubic-bezier(0.2,0.8,0.2,1);
                        z-index: 1500;
                        display: flex;
                        flex-direction: column;
                        gap: 1.2rem;
                    }

                    .side-menu.open {
                        left: 0;
                    }

                    .side-menu .close-btn {
                        align-self: flex-end;
                        background: transparent;
                        border: none;
                        color: white;
                        font-size: 1.2rem;
                        cursor: pointer;
                    }

                    .side-menu ul {
                        list-style: none;
                        padding: 0;
                        margin-top: 1rem;
                        display: flex;
                        flex-direction: column;
                        gap: 1rem;
                    }

                    .side-menu a {
                        color: white;
                        text-decoration: none;
                        font-weight: 700;
                        font-size: 1.1rem;
                    }

                    .menu-overlay {
                        position: fixed;
                        inset: 0;
                        background: rgba(0,0,0,0.45);
                        opacity: 0;
                        visibility: hidden;
                        transition: opacity 0.25s;
                        z-index: 1400;
                    }

                    .menu-overlay.show {
                        opacity: 1;
                        visibility: visible;
                    }

                    /* Esconde o menu horizontal no mobile (usamos menu lateral) */
                    nav ul {
                        display: none;
                    }

                    /* Mostrar botão hamburger */
                    .hamburger {
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                    }

            .hero {
                padding: 4rem 1rem;
            }

            section {
                padding: 3rem 1rem;
            }
        }

        /* Estilos melhorados para o formulário de contato */
        .contato .contato-form form {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
            background: rgba(255,255,255,0.04);
            padding: 1rem;
            border-radius: 12px;
            border: 1px solid rgba(255,255,255,0.06);
        }

        .contato .contato-form label {
            color: rgba(255,255,255,0.95);
            font-weight: 700;
            margin-bottom: 0.25rem;
            font-size: 0.95rem;
        }

        .contato .contato-form input,
        .contato .contato-form textarea {
            padding: 0.75rem 1rem;
            border-radius: 10px;
            border: 1px solid rgba(255,255,255,0.12);
            background: rgba(255,255,255,0.03);
            color: white;
            outline: none;
            transition: box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
            font-size: 0.98rem;
        }

        .contato .contato-form input::placeholder,
        .contato .contato-form textarea::placeholder {
            color: rgba(255,255,255,0.72);
        }

        .contato .contato-form input:focus,
        .contato .contato-form textarea:focus {
            border-color: rgba(244,162,97,0.95);
            box-shadow: 0 8px 30px rgba(231,111,81,0.12);
            background: rgba(255,255,255,0.05);
        }

        .contato .contato-form .cta-button {
            align-self: flex-start;
            padding: 0.8rem 1.6rem;
            border-radius: 999px;
            background: linear-gradient(90deg, var(--cor-secundaria), var(--cor-destaque));
            color: white;
            font-weight: 800;
            box-shadow: 0 10px 30px rgba(231,111,81,0.18);
            border: none;
            cursor: pointer;
            margin-top: 0.25rem;
        }

        .contato .contato-form .cta-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 16px 40px rgba(231,111,81,0.22);
        }

        /* Footer mais profissional */
        footer {
            background: linear-gradient(90deg, #0b1620 0%, #0f1b26 100%);
            color: rgba(255,255,255,0.95);
            padding: 3rem 1rem;
        }

        footer .container {
            display: flex;
            gap: 1.5rem;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
        }

        footer .brand {
            font-family: 'Righteous', cursive;
            display: flex;
            align-items: center;
            gap: 0.6rem;
            font-size: 1.1rem;
            color: white;
        }

        footer .links {
            display: flex;
            gap: 1rem;
            align-items: center;
        }

        footer .links a {
            color: rgba(255,255,255,0.86);
            text-decoration: none;
            font-weight: 600;
            font-size: 0.95rem;
        }

        footer .links a:hover {
            color: var(--cor-secundaria);
            text-decoration: underline;
        }

        footer small {
            display: block;
            opacity: 0.75;
            margin-top: 0.4rem;
            font-size: 0.92rem;
        }

        /* Animações de entrada ao scroll */
        .fade-in-section {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        }

        .fade-in-section.is-visible {
            opacity: 1;
            transform: translateY(0);
        }