:root {
    --branco: #FFF;
    --primary-color: #4CAF50;
    --background-color: #f8f9fa;
    --text-color: #333;
    --text-muted: #666;
    --card-shadow: 0 1px 3px rgba(0,0,0,0.12);
    --card-shadow-hover: 0 4px 8px rgba(0,0,0,0.15);
}

/* Classes utilitárias */
.card {
    background-color: var(--branco);
    border-radius: 8px;
    box-shadow: var(--card-shadow);
}

/* Layout base */
.container-geral {
    flex: 1;
    width: 100%;
    background-color: var(--background-color);
    container: container-geral / inline-size;
    display: flex;
    flex-direction: column;
}
.container {
    flex: 1;
    margin: 0 auto;
    padding: 1rem 2rem;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.card {
    background-color: var(--branco);
    border-radius: 12px;
    box-shadow: var(--card-shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--card-shadow-hover);
}

/* Container queries */
@container container-geral (width < 576px) {
    .container {
        max-width: 100%;
    }
}

@container container-geral (width >= 576px) {
    .container {
        max-width: 540px;
    }
}

@container container-geral (width >= 768px) {
    .container {
        max-width: 720px;
    }
}

@container container-geral (width >= 992px) {
    .container {
        max-width: 960px;
    }
}

@container container-geral (width >= 1200px) {
    .container {
        max-width: 1800px;
    }
}