/* ================================================= */
/* ARQUIVO DE ESTILO LER & CONTAR (RESPONSIVIDADE FINAL) */
/* ================================================= */

/* --- CONFIGURAÇÕES GLOBAIS --- */
:root {
    --primary-blue: #005A9C;
    --secondary-teal: #35A4B7;
    --accent-yellow: #FFC107;
    --light-bg: #f0f8ff;
    --white: #ffffff;
    --disabled-gray: #d3d3d3;
}

body {
    font-family: "Baloo 2", sans-serif;
    background: var(--light-bg);
    margin: 0;
    padding-top: 80px; 
    box-sizing: border-box;
    transition: background-color 2s ease-in-out;
}

.container {
    background: var(--white);
    padding: 40px 50px;
    border-radius: 30px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    text-align: center;
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 900px;
    box-sizing: border-box;
    margin: 40px auto;
}

h1 {
    color: var(--primary-blue);
    font-size: 52px;
    margin-top: 0;
    margin-bottom: 25px;
}


/* --- HEADER (CABEÇALHO FIXO) --- */
.main-header {
    background-color: var(--white);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    padding: 10px 40px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
}
.main-header .logo-container a { display: flex; align-items: center; text-decoration: none; }
.main-header .logo { height: 50px; }

/* Esconde o hambúrguer em telas grandes e mostra o menu desktop */
.hamburger-menu, .mobile-menu-overlay { 
    display: none; 
}
.user-info-desktop { 
    display: flex; 
    align-items: center; 
    gap: 10px;
}

.user-info-desktop span {
    margin-right: 15px;
    font-size: 18px;
    color: var(--primary-blue);
    font-weight: bold;
}

.user-info-desktop .button {
    font-family: "Baloo 2", sans-serif;
    text-decoration: none;
    font-size: 16px;
    padding: 8px 18px;
    border-radius: 12px;
    transition: all 0.2s ease;
    font-weight: bold;
    border: 2px solid transparent;
}
.user-info-desktop .button { background-color: var(--accent-yellow); color: var(--primary-blue); }
.user-info-desktop .button.secondary { background-color: var(--white); color: var(--primary-blue); border-color: var(--primary-blue); }
.user-info-desktop .button.special { background-color: #28a745; color: white; }
.user-info-desktop .button:hover { opacity: 0.8; transform: translateY(-2px); }


/* (O resto dos estilos de desktop continua aqui) */
/* ... */


/* --- MEDIA QUERIES PARA RESPONSIVIDADE --- */

/* Telas menores que 768px (Tablets em modo retrato e a maioria dos celulares) */
@media (max-width: 768px) {
    body {
        padding-top: 70px; /* Altura do header mobile */
    }

    /* Header no Mobile: Esconde desktop, mostra hambúrguer */
    .user-info-desktop { 
        display: none !important; /* CORREÇÃO: Garante que o menu desktop seja escondido */
    } 
    .hamburger-menu { 
        display: block; /* Mostra o botão hambúrguer */
        background: none;
        border: none;
        font-size: 30px;
        color: var(--primary-blue);
        cursor: pointer;
        padding: 0; /* Remove o espaçamento interno herdado */
    line-height: 1; /* Garante o alinhamento vertical do ícone */
        
    }
    .main-header {
        padding: 10px 20px;
        height: 70px;
    }
    .main-header .logo {
        height: 45px;
    }

    /* Menu Lateral Mobile */
    .mobile-menu-overlay {
        display: flex;
        position: fixed;
        top: 0;
        right: -100%; /* Começa totalmente fora da tela */
        width: 280px;
        height: 100%;
        background-color: var(--primary-blue);
        box-shadow: -5px 0 15px rgba(0,0,0,0.2);
        flex-direction: column;
        padding: 20px;
        box-sizing: border-box;
        transition: right 0.3s ease-in-out;
        z-index: 101;
    }
    .mobile-menu-overlay.open {
        right: 0; /* Desliza para dentro da tela */
    }
    .mobile-menu-content { display: flex; flex-direction: column; gap: 15px; margin-top: 40px; }
    .mobile-menu-content a { color: var(--white); text-decoration: none; font-size: 20px; padding: 10px 15px; border-radius: 8px; transition: background-color 0.2s ease; }
    .mobile-menu-content a:hover { background-color: rgba(255,255,255,0.1); }
    .mobile-welcome { color: var(--accent-yellow); font-size: 22px; font-weight: bold; margin-bottom: 20px; padding: 10px 15px; }
    .close-menu { background: none; border: none; color: var(--white); font-size: 28px; position: absolute; top: 15px; right: 15px; cursor: pointer; padding: 0; /* Remove o espaçamento interno herdado */
    line-height: 1; /* Garante o alinhamento vertical do ícone */ }
    
    /* Demais ajustes para mobile */
    .container { padding: 20px; }
    h1 { font-size: 36px; }
    #activity-menu {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    margin-top: 30px;
    width: 100%;
}
    /* ... (outras regras de mobile que já tínhamos) ... */
}

/* (O CSS completo com todas as outras regras continua abaixo...) */
.container { background: var(--white); padding: 40px 50px; border-radius: 30px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15); text-align: center; position: relative; z-index: 1; width: 100%; max-width: 900px; box-sizing: border-box; margin: 40px auto; }
.hero-section { background: linear-gradient(135deg, var(--secondary-teal) 0%, var(--primary-blue) 100%); color: var(--white); padding: 60px 40px; border-radius: 25px; box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25); text-align: center; }
.hero-section h1 { color: var(--accent-yellow); font-size: 58px; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); }
.hero-section p { font-size: 22px; max-width: 700px; margin: 0 auto 30px auto; }
.hero-buttons { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
.cta-button { font-size: 24px; font-weight: bold; padding: 15px 35px; background: var(--accent-yellow); color: var(--primary-blue); border: none; border-radius: 50px; cursor: pointer; text-decoration: none; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); transition: all 0.2s ease-out; }
.cta-button:hover { transform: translateY(-5px); box-shadow: 0 12px 25px rgba(0, 0, 0, 0.4); }
.cta-button.secondary { background-color: var(--white); color: var(--primary-blue); }
.feature-cards { display: flex; justify-content: center; gap: 30px; margin-top: 40px; flex-wrap: wrap; }
.card-feature { background: var(--white); padding: 30px; border-radius: 20px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); width: 280px; text-align: center; transition: all 0.3s ease; }
.card-feature:hover { transform: translateY(-10px); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2); }
.card-feature .icon { font-size: 50px; color: var(--secondary-teal); margin-bottom: 20px; }
.card-feature h3 { font-size: 24px; color: var(--primary-blue); margin-bottom: 15px; }
.card-feature p { font-size: 16px; color: #666; line-height: 1.5; }
.menu-button { font-size: 26px; font-weight: bold; padding: 20px 30px; background: var(--accent-yellow); color: var(--primary-blue); border-radius: 20px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 15px; border: none; cursor: pointer; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); transition: all 0.2s ease-out; }
.menu-button:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25); }
.menu-button .icon { font-size: 40px; transition: transform 0.3s ease; }
.menu-button:hover .icon { transform: rotate(-10deg) scale(1.1); }
.menu-button.soon { background: var(--disabled-gray); color: #888; cursor: not-allowed; }
.menu-button.soon:hover, .menu-button.soon:hover .icon { transform: none; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); }
#activity-menu {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    margin-top: 30px;
    width: 100%;
}
#activity-menu .menu-button { width: 100%; box-sizing: border-box; margin: 0; }
button, .submit-button { font-family: "Baloo 2", sans-serif; font-size: 24px; font-weight: bold; padding: 12px 35px; background: var(--accent-yellow); color: var(--primary-blue); border: none; border-radius: 15px; cursor: pointer; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); transition: all 0.2s ease-out; }
button:hover, .submit-button:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25); }
.submit-button { width: auto; margin-top: 40px; }
label { display: block; margin: 25px 0 8px; font-size: 24px; color: #555; font-weight: bold; }
select { font-family: "Baloo 2", sans-serif; font-size: 20px; font-weight: bold; color: var(--primary-blue); padding: 12px 20px; width: 100%; max-width: 400px; border-radius: 15px; border: 3px solid var(--secondary-teal); background-color: #fdfdff; cursor: pointer; box-shadow: 0 2px 5px rgba(0,0,0,0.1); -webkit-appearance: none; -moz-appearance: none; 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%2335A4B7%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.4-12.8z%22%2F%3E%3C%2Fsvg%3E'); background-repeat: no-repeat; background-position: right 15px top 50%; background-size: 14px; transition: all 0.2s ease; }
select:hover { border-color: var(--primary-blue); }
select:focus { outline: none; box-shadow: 0 0 0 4px rgba(53, 164, 183, 0.3); }
.form-group { margin-bottom: 20px; text-align: left; }
.form-group label { display: block; margin-bottom: 8px; font-size: 20px; color: #555; }
.form-group input { width: 100%; padding: 12px; border-radius: 10px; border: 2px solid var(--secondary-teal); font-size: 18px; box-sizing: border-box; }
.form-link { display: block; margin-top: 20px; font-size: 18px; }
.error-message { color: red; margin-bottom: 15px; }