/* ===== BASE RESPONSIVO ===== */
/* Variáveis para breakpoints */
:root {
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-xxl: 1400px;
}

/* Reset para todos os elementos */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Container responsivo global */
.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 576px) {
    .container { max-width: 540px; }
}
@media (min-width: 768px) {
    .container { max-width: 720px; }
}
@media (min-width: 992px) {
    .container { max-width: 960px; }
}
@media (min-width: 1200px) {
    .container { max-width: 1140px; }
}
@media (min-width: 1400px) {
    .container { max-width: 1320px; }
}

/* Grid responsivo */
.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

[class*="col-"] {
    padding-right: 15px;
    padding-left: 15px;
}

/* Classes de grid */
.col-12 { width: 100%; }
.col-6 { width: 50%; }
.col-4 { width: 33.333%; }
.col-3 { width: 25%; }

@media (min-width: 768px) {
    .col-md-12 { width: 100%; }
    .col-md-6 { width: 50%; }
    .col-md-4 { width: 33.333%; }
    .col-md-3 { width: 25%; }
}

@media (min-width: 992px) {
    .col-lg-12 { width: 100%; }
    .col-lg-6 { width: 50%; }
    .col-lg-4 { width: 33.333%; }
    .col-lg-3 { width: 25%; }
}

/* Classes de texto responsivo */
.text-center-sm { text-align: center; }
.text-left-sm { text-align: left; }
.text-right-sm { text-align: right; }

@media (min-width: 768px) {
    .text-center-md { text-align: center; }
    .text-left-md { text-align: left; }
    .text-right-md { text-align: right; }
}

@media (min-width: 992px) {
    .text-center-lg { text-align: center; }
    .text-left-lg { text-align: left; }
    .text-right-lg { text-align: right; }
}

/* Utility classes */
.d-none { display: none; }
.d-block { display: block; }
.d-flex { display: flex; }

@media (min-width: 768px) {
    .d-md-none { display: none; }
    .d-md-block { display: block; }
    .d-md-flex { display: flex; }
}

@media (min-width: 992px) {
    .d-lg-none { display: none; }
    .d-lg-block { display: block; }
    .d-lg-flex { display: flex; }
}

/* Margens e paddings responsivos */
.m-1 { margin: 0.25rem; }
.m-2 { margin: 0.5rem; }
.m-3 { margin: 1rem; }
.m-4 { margin: 1.5rem; }
.m-5 { margin: 3rem; }

.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 1rem; }
.p-4 { padding: 1.5rem; }
.p-5 { padding: 3rem; }

@media (max-width: 768px) {
    .p-md-1 { padding: 0.25rem; }
    .p-md-2 { padding: 0.5rem; }
    .p-md-3 { padding: 1rem; }
    .p-md-4 { padding: 1.5rem; }
    .m-md-1 { margin: 0.25rem; }
    .m-md-2 { margin: 0.5rem; }
    .m-md-3 { margin: 1rem; }
}