/* =====================================================
   VARIÁVEIS DE LAYOUT (TOKENS)
===================================================== */
:root {
  --gutter: 16px;
  --max-width: 1200px;

  /* Espaçamentos padrão */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
}

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

/* =====================================================
   DEBUG / MARCAÇÃO VISUAL
===================================================== */
.mark {
  border: 1px dotted #f1bb0b;
}

.mark-2 {
  border: 1px dotted #24e621;
}

.mark-3 {
  border: 1px dotted #7F2D1F;
}

.mark-4 {
  border: 1px dotted #42332E;
}

.mark-5 {
  border: 1px dotted #C96148;
}

.mark-6 {
  border: 2px dotted #42332E;
}

.mark-outline {
  outline: 1px dotted #C96148;
}

body{
  overflow-x: hidden !important;
}

/* =====================================================
   ESPAÇAMENTO — PADDING GLOBAL
===================================================== */
.p-0 {
  padding: 0 !important;
}

.p-xs {
  padding: var(--space-xs) !important;
}

.p-sm {
  padding: var(--space-sm) !important;
}

.p-md {
  padding: var(--space-md) !important;
}

.p-lg {
  padding: var(--space-lg) !important;
}

.p-xl {
  padding: var(--space-xl) !important;
}

/* Horizontal */
.px-0 {
  padding-inline: 0 !important;
}

.px-xs {
  padding-inline: var(--space-xs) !important;
}

.px-sm {
  padding-inline: var(--space-sm) !important;
}

.px-md {
  padding-inline: var(--space-md) !important;
}

.px-lg {
  padding-inline: var(--space-lg) !important;
}

.px-xl {
  padding-inline: var(--space-xl) !important;
}

/* Vertical */
.py-0 {
  padding-block: 0 !important;
}

.py-xs {
  padding-block: var(--space-xs) !important;
}

.py-sm {
  padding-block: var(--space-sm) !important;
}

.py-md {
  padding-block: var(--space-md) !important;
}

.py-lg {
  padding-block: var(--space-lg) !important;
}

.py-xl {
  padding-block: var(--space-xl) !important;
}

.box-footer {
  margin: 15px 0;
}

/* =====================================================
   Z-INDEX — CONTROLE DE CAMADAS
===================================================== */

.z-auto {
  z-index: auto !important;
}

.z-0 {
  z-index: 0 !important;
}

.z-1 {
  z-index: 1 !important;
}

.z-10 {
  z-index: 10 !important;
}

.z-50 {
  z-index: 50 !important;
}

.z-100 {
  z-index: 100 !important;
}

.z-500 {
  z-index: 500 !important;
}

.z-1000 {
  z-index: 1000 !important;
}

/* =====================================================
   CENTRALIZAÇÃO TOTAL
===================================================== */

.centralizada {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* =====================================================
   GRID BASE — CONTAINER & ROW
===================================================== */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-inline: calc(var(--gutter) * -0.5);
}

.row-center {
  justify-content: center;
}

/* =====================================================
   GRID — COLUNAS (DESKTOP FIRST)
===================================================== */
[class*="col-"] {
  padding-inline: calc(var(--gutter) * 0.5);
}

.col-1 {
  width: 8.333%;
}

.col-2 {
  width: 16.666%;
}

.col-3 {
  width: 25%;
}

.col-4 {
  width: 33.333%;
}

.col-5 {
  width: 41.666%;
}

.col-6 {
  width: 50%;
}

.col-7 {
  width: 58.333%;
}

.col-8 {
  width: 66.666%;
}

.col-9 {
  width: 75%;
}

.col-10 {
  width: 83.333%;
}

.col-11 {
  width: 91.666%;
}

.col-12 {
  width: 100%;
}

/* =====================================================
   UTILITÁRIOS DE TEXTO / FLUXO
===================================================== */
.break-line {
  display: block;
}

.text-left {
  text-align: left !important;
}

/* =====================================================
   FLEXBOX — BASE
===================================================== */
.absolute {
  position: absolute !important;
}

.relative {
  position: relative !important;
}

.flex {
  display: flex;
}

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

.flex-wrap {
  flex-wrap: wrap;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.center-absolute {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}


.flex-between {
  justify-content: space-between;
}

.flex-around {
  justify-content: space-around;
}

.flex-evenly {
  justify-content: space-evenly;
}

.flex-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.align-center,
.items-center {
  align-items: center;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

/* =====================================================
   GAP SYSTEM (FLEX / GRID)
===================================================== */
.gap-xs {
  gap: var(--space-xs);
}

.gap-sm {
  gap: var(--space-sm);
}

.gap-md {
  gap: var(--space-md);
}

.gap-lg {
  gap: var(--space-lg);
}

.gap-xl {
  gap: var(--space-xl);
}

.gap-x-xs {
  column-gap: var(--space-xs);
}

.gap-x-sm {
  column-gap: var(--space-sm);
}

.gap-x-md {
  column-gap: var(--space-md);
}

.gap-x-lg {
  column-gap: var(--space-lg);
}

/* =====================================================
   SECTION 2 — IMAGEM (COMPORTAMENTO ESPECÍFICO)
===================================================== */
#section-2 .image-left {
  display: block;
  width: 100%;
  height: auto;
  max-width: 490px;
}

/* Desktop grande */
@media (min-width: 1024px) {
  #section-2 .col-6:first-child {
    padding-left: 0 !important;
    margin-left: 0 !important;
  }

  #section-2 .image-left {
    margin-right: auto;
    max-width: none;
  }
}

/* Até 1950px */
@media (max-width: 1950px) {
  #section-2 .image-left {
    margin-left: 0;
    margin-right: auto;
  }
}

/* Ultra-wide */
@media (min-width: 1951px) {
  #section-2 .image-left {
    margin-inline: auto;
  }
}

/* =====================================================
   TABLET (≤1023px)
===================================================== */
@media (max-width: 1023px) {
  .col-md-1 {
    width: 8.333%;
  }

  .col-md-2 {
    width: 16.666%;
  }

  .col-md-3 {
    width: 25%;
  }

  .col-md-4 {
    width: 33.333%;
  }

  .col-md-6 {
    width: 50%;
  }

  .col-md-12 {
    width: 100%;
  }

  .tablet-w-100 {
    width: 100% !important;
  }

  .tablet-w-50 {
    width: 50% !important;
  }

  .tablet-hidden {
    display: none !important;
  }

  .tablet-block {
    display: block !important;
  }

  .tablet-flex {
    display: flex !important;
  }

  .tablet-column {
    flex-direction: column !important;
  }

  .tablet-center {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
  }

  .m-tablet-0 {
    margin: 0 !important;
  }

  .m-tablet-sm {
    margin: 6px !important;
  }

  .m-tablet-md {
    margin: 12px !important;
  }

  .m-tablet-lg {
    margin: 24px !important;
  }

  .p-tablet-0 {
    padding: 0 !important;
  }

  .p-tablet-sm {
    padding: 6px !important;
  }

  .p-tablet-md {
    padding: 12px !important;
  }

  .p-tablet-lg {
    padding: 24px !important;
  }
}

/* =====================================================
   MOBILE (≤767px)
===================================================== */
@media (max-width: 767px) {

    .mobile-flex-only {
    display: flex !important;
  }

  .col-sm-12 {
    width: 100%;
  }

  .mobile-w-100 {
    width: 100% !important;
  }

  .mobile-w-50 {
    width: 50% !important;
  }

  .mobile-hidden {
    display: none !important;
  }

  .mobile-block {
    display: block !important;
  }

  .mobile-flex {
    display: flex !important;
  }

  .mobile-column {
    flex-direction: column !important;
  }

  .mobile-text-center {
    text-align: center !important;
  }

  .mobile-center {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
  }

  .break-line {
    display: inline;
  }

  #section-2 .image-left {
    margin: 0 auto 20px;
    max-width: 380px;
  }

  #section-2 .col-sm-12:first-child {
    order: -1;
  }

  .m-mobile-0 {
    margin: 0 !important;
  }

  .m-mobile-sm {
    margin: 4px !important;
  }

  .m-mobile-md {
    margin: 8px !important;
  }

  .m-mobile-lg {
    margin: 16px !important;
  }

  .p-mobile-0 {
    padding: 0 !important;
  }

  .p-mobile-sm {
    padding: 4px !important;
  }

  .p-mobile-md {
    padding: 8px !important;
  }

  .p-mobile-lg {
    padding: 16px !important;
  }
}

/* =====================================================
   XL (≥1280px)
===================================================== */
@media (min-width: 1280px) {
  .col-xl-2 {
    width: 16.666%;
  }

  .col-xl-3 {
    width: 25%;
  }

  .col-xl-4 {
    width: 33.333%;
  }
}