/* DEFAULT.CSS — Reset + grid 12 col + utilitarios. Base reutilizavel.
   Como usar (grid, utilitarios): veja assets/css/agent.md
   Ordem: 1) Reset  2) Variaveis  3) Grid  4) Utilitarios
   Breakpoints: base · sm 576 · md 768 · lg 992 · xl 1200 */

/* ============================================================
   1) RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; -moz-tab-size: 4; tab-size: 4; }
body { min-height: 100vh; line-height: 1.5; -webkit-font-smoothing: antialiased; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.15; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
table { border-collapse: collapse; width: 100%; }
:where(fieldset) { border: 0; padding: 0; }
#root, #__next { isolation: isolate; }

/* ============================================================
   2) VARIAVEIS
   ============================================================ */
:root {
  --grid-max: 1400px;   /* largura maxima do container */
  --gutter: 20px;       /* espaco entre colunas */
  /* Escala de espacamento (para utilitarios m-* / p-*) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4rem;
  --space-8: 6rem;
}

/* ============================================================
   3) GRID (12 colunas)
   ------------------------------------------------------------
   <div class="container">
     <div class="row">
       <div class="col-12 col-md-6 col-lg-4">...</div>
     </div>
   </div>
   ============================================================ */
.container, .container-fluid {
  width: 100%; margin-inline: auto; padding-inline: var(--gutter);
}
.container { max-width: var(--grid-max); }

.row { display: flex; flex-wrap: wrap; margin-inline: calc(var(--gutter) / -2); }
/* Colunas: so o padding aqui (a largura vem das classes .col-*) */
.row > [class*="col"] { padding-inline: calc(var(--gutter) / 2); }

.col      { flex: 1 0 0%; }
.col-auto { flex: 0 0 auto; width: auto; }
.col-1  { flex: 0 0 auto; width: 8.3333%; }
.col-2  { flex: 0 0 auto; width: 16.6667%; }
.col-3  { flex: 0 0 auto; width: 25%; }
.col-4  { flex: 0 0 auto; width: 33.3333%; }
.col-5  { flex: 0 0 auto; width: 41.6667%; }
.col-6  { flex: 0 0 auto; width: 50%; }
.col-7  { flex: 0 0 auto; width: 58.3333%; }
.col-8  { flex: 0 0 auto; width: 66.6667%; }
.col-9  { flex: 0 0 auto; width: 75%; }
.col-10 { flex: 0 0 auto; width: 83.3333%; }
.col-11 { flex: 0 0 auto; width: 91.6667%; }
.col-12 { flex: 0 0 auto; width: 100%; }

.offset-0  { margin-left: 0; }
.offset-1  { margin-left: 8.3333%; }
.offset-2  { margin-left: 16.6667%; }
.offset-3  { margin-left: 25%; }
.offset-4  { margin-left: 33.3333%; }
.offset-5  { margin-left: 41.6667%; }
.offset-6  { margin-left: 50%; }
.offset-7  { margin-left: 58.3333%; }
.offset-8  { margin-left: 66.6667%; }
.offset-9  { margin-left: 75%; }
.offset-10 { margin-left: 83.3333%; }
.offset-11 { margin-left: 91.6667%; }

@media (min-width: 576px) {
  .col-sm-1{flex:0 0 auto;width:8.3333%}.col-sm-2{flex:0 0 auto;width:16.6667%}.col-sm-3{flex:0 0 auto;width:25%}
  .col-sm-4{flex:0 0 auto;width:33.3333%}.col-sm-5{flex:0 0 auto;width:41.6667%}.col-sm-6{flex:0 0 auto;width:50%}
  .col-sm-7{flex:0 0 auto;width:58.3333%}.col-sm-8{flex:0 0 auto;width:66.6667%}.col-sm-9{flex:0 0 auto;width:75%}
  .col-sm-10{flex:0 0 auto;width:83.3333%}.col-sm-11{flex:0 0 auto;width:91.6667%}.col-sm-12{flex:0 0 auto;width:100%}
  .offset-sm-0{margin-left:0}.offset-sm-1{margin-left:8.3333%}.offset-sm-2{margin-left:16.6667%}.offset-sm-3{margin-left:25%}
  .offset-sm-4{margin-left:33.3333%}.offset-sm-5{margin-left:41.6667%}.offset-sm-6{margin-left:50%}.offset-sm-7{margin-left:58.3333%}
  .offset-sm-8{margin-left:66.6667%}.offset-sm-9{margin-left:75%}.offset-sm-10{margin-left:83.3333%}.offset-sm-11{margin-left:91.6667%}
}
@media (min-width: 768px) {
  .col-md-1{flex:0 0 auto;width:8.3333%}.col-md-2{flex:0 0 auto;width:16.6667%}.col-md-3{flex:0 0 auto;width:25%}
  .col-md-4{flex:0 0 auto;width:33.3333%}.col-md-5{flex:0 0 auto;width:41.6667%}.col-md-6{flex:0 0 auto;width:50%}
  .col-md-7{flex:0 0 auto;width:58.3333%}.col-md-8{flex:0 0 auto;width:66.6667%}.col-md-9{flex:0 0 auto;width:75%}
  .col-md-10{flex:0 0 auto;width:83.3333%}.col-md-11{flex:0 0 auto;width:91.6667%}.col-md-12{flex:0 0 auto;width:100%}
  .offset-md-0{margin-left:0}.offset-md-1{margin-left:8.3333%}.offset-md-2{margin-left:16.6667%}.offset-md-3{margin-left:25%}
  .offset-md-4{margin-left:33.3333%}.offset-md-5{margin-left:41.6667%}.offset-md-6{margin-left:50%}.offset-md-7{margin-left:58.3333%}
  .offset-md-8{margin-left:66.6667%}.offset-md-9{margin-left:75%}.offset-md-10{margin-left:83.3333%}.offset-md-11{margin-left:91.6667%}
}
@media (min-width: 992px) {
  .col-lg-1{flex:0 0 auto;width:8.3333%}.col-lg-2{flex:0 0 auto;width:16.6667%}.col-lg-3{flex:0 0 auto;width:25%}
  .col-lg-4{flex:0 0 auto;width:33.3333%}.col-lg-5{flex:0 0 auto;width:41.6667%}.col-lg-6{flex:0 0 auto;width:50%}
  .col-lg-7{flex:0 0 auto;width:58.3333%}.col-lg-8{flex:0 0 auto;width:66.6667%}.col-lg-9{flex:0 0 auto;width:75%}
  .col-lg-10{flex:0 0 auto;width:83.3333%}.col-lg-11{flex:0 0 auto;width:91.6667%}.col-lg-12{flex:0 0 auto;width:100%}
  .offset-lg-0{margin-left:0}.offset-lg-1{margin-left:8.3333%}.offset-lg-2{margin-left:16.6667%}.offset-lg-3{margin-left:25%}
  .offset-lg-4{margin-left:33.3333%}.offset-lg-5{margin-left:41.6667%}.offset-lg-6{margin-left:50%}.offset-lg-7{margin-left:58.3333%}
  .offset-lg-8{margin-left:66.6667%}.offset-lg-9{margin-left:75%}.offset-lg-10{margin-left:83.3333%}.offset-lg-11{margin-left:91.6667%}
}
@media (min-width: 1200px) {
  .col-xl-1{flex:0 0 auto;width:8.3333%}.col-xl-2{flex:0 0 auto;width:16.6667%}.col-xl-3{flex:0 0 auto;width:25%}
  .col-xl-4{flex:0 0 auto;width:33.3333%}.col-xl-5{flex:0 0 auto;width:41.6667%}.col-xl-6{flex:0 0 auto;width:50%}
  .col-xl-7{flex:0 0 auto;width:58.3333%}.col-xl-8{flex:0 0 auto;width:66.6667%}.col-xl-9{flex:0 0 auto;width:75%}
  .col-xl-10{flex:0 0 auto;width:83.3333%}.col-xl-11{flex:0 0 auto;width:91.6667%}.col-xl-12{flex:0 0 auto;width:100%}
  .offset-xl-0{margin-left:0}.offset-xl-1{margin-left:8.3333%}.offset-xl-2{margin-left:16.6667%}.offset-xl-3{margin-left:25%}
  .offset-xl-4{margin-left:33.3333%}.offset-xl-5{margin-left:41.6667%}.offset-xl-6{margin-left:50%}.offset-xl-7{margin-left:58.3333%}
  .offset-xl-8{margin-left:66.6667%}.offset-xl-9{margin-left:75%}.offset-xl-10{margin-left:83.3333%}.offset-xl-11{margin-left:91.6667%}
}

/* ============================================================
   4) UTILITARIOS (minimos e praticos)
   ============================================================ */

/* --- Display --- */
.d-none { display: none; }
.d-block { display: block; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-flex { display: flex; }
.d-inline-flex { display: inline-flex; }
.d-grid { display: grid; }

/* --- Flexbox --- */
.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.flex-1 { flex: 1 1 0%; }
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
/* aliases usados no .row */
.row.align-start{align-items:flex-start}.row.align-center{align-items:center}.row.align-end{align-items:flex-end}
.row.g-0 { margin-inline: 0; }
.row.g-0 > [class*="col"] { padding-inline: 0; }

/* --- Gap --- */
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }

/* --- Texto --- */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-uppercase { text-transform: uppercase; }
.text-nowrap { white-space: nowrap; }
.fw-normal { font-weight: 400; }
.fw-medium { font-weight: 500; }
.fw-semibold { font-weight: 600; }
.fw-bold { font-weight: 700; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Largura / altura --- */
.w-100 { width: 100%; }
.w-auto { width: auto; }
.h-100 { height: 100%; }
.mw-100 { max-width: 100%; }
.min-vh-100 { min-height: 100vh; }

/* --- Margin (escala 0-8; direcoes all/x/y/t/b/l/r; suporta auto e negativos) ---
   0 | 1=.25rem | 2=.5rem | 3=1rem | 4=1.5rem | 5=2rem | 6=3rem | 7=4rem | 8=6rem */
.m-0{margin:0}.m-1{margin:var(--space-1)}.m-2{margin:var(--space-2)}.m-3{margin:var(--space-3)}.m-4{margin:var(--space-4)}.m-5{margin:var(--space-5)}.m-6{margin:var(--space-6)}.m-7{margin:var(--space-7)}.m-8{margin:var(--space-8)}.m-auto{margin:auto}
.mx-0{margin-inline:0}.mx-1{margin-inline:var(--space-1)}.mx-2{margin-inline:var(--space-2)}.mx-3{margin-inline:var(--space-3)}.mx-4{margin-inline:var(--space-4)}.mx-5{margin-inline:var(--space-5)}.mx-6{margin-inline:var(--space-6)}.mx-auto{margin-inline:auto}
.my-0{margin-block:0}.my-1{margin-block:var(--space-1)}.my-2{margin-block:var(--space-2)}.my-3{margin-block:var(--space-3)}.my-4{margin-block:var(--space-4)}.my-5{margin-block:var(--space-5)}.my-6{margin-block:var(--space-6)}.my-auto{margin-block:auto}
.mt-0{margin-top:0}.mt-1{margin-top:var(--space-1)}.mt-2{margin-top:var(--space-2)}.mt-3{margin-top:var(--space-3)}.mt-4{margin-top:var(--space-4)}.mt-5{margin-top:var(--space-5)}.mt-6{margin-top:var(--space-6)}.mt-7{margin-top:var(--space-7)}.mt-8{margin-top:var(--space-8)}.mt-auto{margin-top:auto}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:var(--space-1)}.mb-2{margin-bottom:var(--space-2)}.mb-3{margin-bottom:var(--space-3)}.mb-4{margin-bottom:var(--space-4)}.mb-5{margin-bottom:var(--space-5)}.mb-6{margin-bottom:var(--space-6)}.mb-7{margin-bottom:var(--space-7)}.mb-8{margin-bottom:var(--space-8)}.mb-auto{margin-bottom:auto}
.ml-0{margin-left:0}.ml-1{margin-left:var(--space-1)}.ml-2{margin-left:var(--space-2)}.ml-3{margin-left:var(--space-3)}.ml-4{margin-left:var(--space-4)}.ml-5{margin-left:var(--space-5)}.ml-6{margin-left:var(--space-6)}.ml-auto{margin-left:auto}
.mr-0{margin-right:0}.mr-1{margin-right:var(--space-1)}.mr-2{margin-right:var(--space-2)}.mr-3{margin-right:var(--space-3)}.mr-4{margin-right:var(--space-4)}.mr-5{margin-right:var(--space-5)}.mr-6{margin-right:var(--space-6)}.mr-auto{margin-right:auto}
/* margens negativas (compensar gutters / sobreposicoes) */
.mt-n1{margin-top:calc(var(--space-1)*-1)}.mt-n2{margin-top:calc(var(--space-2)*-1)}.mt-n3{margin-top:calc(var(--space-3)*-1)}.mt-n4{margin-top:calc(var(--space-4)*-1)}.mt-n5{margin-top:calc(var(--space-5)*-1)}
.mb-n1{margin-bottom:calc(var(--space-1)*-1)}.mb-n2{margin-bottom:calc(var(--space-2)*-1)}.mb-n3{margin-bottom:calc(var(--space-3)*-1)}
.mx-n1{margin-inline:calc(var(--space-1)*-1)}.mx-n2{margin-inline:calc(var(--space-2)*-1)}.mx-n3{margin-inline:calc(var(--space-3)*-1)}

/* --- Padding (escala 0-8; direcoes all/x/y/t/b/l/r) --- */
.p-0{padding:0}.p-1{padding:var(--space-1)}.p-2{padding:var(--space-2)}.p-3{padding:var(--space-3)}.p-4{padding:var(--space-4)}.p-5{padding:var(--space-5)}.p-6{padding:var(--space-6)}.p-7{padding:var(--space-7)}.p-8{padding:var(--space-8)}
.px-0{padding-inline:0}.px-1{padding-inline:var(--space-1)}.px-2{padding-inline:var(--space-2)}.px-3{padding-inline:var(--space-3)}.px-4{padding-inline:var(--space-4)}.px-5{padding-inline:var(--space-5)}.px-6{padding-inline:var(--space-6)}
.py-0{padding-block:0}.py-1{padding-block:var(--space-1)}.py-2{padding-block:var(--space-2)}.py-3{padding-block:var(--space-3)}.py-4{padding-block:var(--space-4)}.py-5{padding-block:var(--space-5)}.py-6{padding-block:var(--space-6)}.py-7{padding-block:var(--space-7)}.py-8{padding-block:var(--space-8)}
.pt-0{padding-top:0}.pt-1{padding-top:var(--space-1)}.pt-2{padding-top:var(--space-2)}.pt-3{padding-top:var(--space-3)}.pt-4{padding-top:var(--space-4)}.pt-5{padding-top:var(--space-5)}.pt-6{padding-top:var(--space-6)}.pt-7{padding-top:var(--space-7)}.pt-8{padding-top:var(--space-8)}
.pb-0{padding-bottom:0}.pb-1{padding-bottom:var(--space-1)}.pb-2{padding-bottom:var(--space-2)}.pb-3{padding-bottom:var(--space-3)}.pb-4{padding-bottom:var(--space-4)}.pb-5{padding-bottom:var(--space-5)}.pb-6{padding-bottom:var(--space-6)}.pb-7{padding-bottom:var(--space-7)}.pb-8{padding-bottom:var(--space-8)}
.pl-0{padding-left:0}.pl-1{padding-left:var(--space-1)}.pl-2{padding-left:var(--space-2)}.pl-3{padding-left:var(--space-3)}.pl-4{padding-left:var(--space-4)}.pl-5{padding-left:var(--space-5)}.pl-6{padding-left:var(--space-6)}
.pr-0{padding-right:0}.pr-1{padding-right:var(--space-1)}.pr-2{padding-right:var(--space-2)}.pr-3{padding-right:var(--space-3)}.pr-4{padding-right:var(--space-4)}.pr-5{padding-right:var(--space-5)}.pr-6{padding-right:var(--space-6)}

/* --- Posicao --- */
.position-relative { position: relative; }
.position-absolute { position: absolute; }
.position-fixed { position: fixed; }
.position-sticky { position: sticky; }

/* --- Diversos --- */
.overflow-hidden { overflow: hidden; }
.rounded-0 { border-radius: 0; }
.cursor-pointer { cursor: pointer; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* --- Display responsivo (esconder/mostrar por breakpoint) --- */
@media (max-width: 767.98px) { .d-md-none-down { display: none; } }
@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; }
}

/* ============================================================
   5) GRID DE POSICIONAMENTO (dentro das colunas)
   ------------------------------------------------------------
   Para montar layouts internos (imagem + texto lado a lado,
   linhas fixas etc.) sem criar classes exclusivas por componente.
   Aplique .d-grid + .grid-cols-* no elemento pai.
   Ex.: <article class="d-grid grid-cols-2 grid-rows-1 items-center">
   ============================================================ */
.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
/* proporcoes assimetricas comuns (imagem | texto) */
.grid-cols-5-7  { grid-template-columns: 41.6667% 1fr; }
.grid-cols-6-6  { grid-template-columns: 50% 1fr; }
.grid-cols-7-5  { grid-template-columns: 58.3333% 1fr; }

.grid-rows-1 { grid-template-rows: 100%; }
.grid-rows-2 { grid-template-rows: repeat(2, 1fr); }

/* posicao de item dentro do grid */
.col-start-1 { grid-column-start: 1; }
.col-start-2 { grid-column-start: 2; }
.row-start-1 { grid-row-start: 1; }
.row-start-2 { grid-row-start: 2; }
.order-first { order: -1; }
.order-last  { order: 99; }

/* alinhamento do proprio item (self) no grid/flex */
.self-start   { align-self: flex-start; }
.self-center  { align-self: center; }
.self-end     { align-self: flex-end; }
.self-stretch { align-self: stretch; }
.justify-self-start  { justify-self: start; }
.justify-self-center { justify-self: center; }
.justify-self-end    { justify-self: end; }
.place-center { place-items: center; }

/* gaps de grid (mesma escala dos utilitarios) */
.gap-x-1{column-gap:var(--space-1)}.gap-x-2{column-gap:var(--space-2)}.gap-x-3{column-gap:var(--space-3)}.gap-x-4{column-gap:var(--space-4)}
.gap-y-1{row-gap:var(--space-1)}.gap-y-2{row-gap:var(--space-2)}.gap-y-3{row-gap:var(--space-3)}.gap-y-4{row-gap:var(--space-4)}

/* alturas fixas para linhas de cards (paisagem) */
.h-sm  { height: 340px; }
.h-md  { height: 420px; }
.h-lg  { height: 460px; }
.h-xl  { height: 500px; }

/* fracao de altura (para blocos empilhados dentro de um card) */
.h-40 { height: 40%; }
.h-50 { height: 50%; }
.h-60 { height: 60%; }
.h-62 { height: 62%; }
.push-bottom { margin-top: auto; }

/* object-fit / position para imagens dentro de blocos com altura fixa */
.object-cover   { object-fit: cover; }
.object-contain { object-fit: contain; }
.object-lt { object-position: left top; }
.object-lb { object-position: left bottom; }
.object-ct { object-position: center top; }
.object-cb { object-position: center bottom; }

/* ============================================================
   6) BORDERS + RADIUS
   ============================================================ */
.border    { border: 1px solid #E7E4E1; }
.border-0  { border: 0; }
.border-t  { border-top: 1px solid #E7E4E1; }
.border-b  { border-bottom: 1px solid #E7E4E1; }
.border-l  { border-left: 1px solid #E7E4E1; }
.border-r  { border-right: 1px solid #E7E4E1; }
.border-2  { border-width: 2px; }

.rounded-sm { border-radius: 8px; }
.rounded    { border-radius: 16px; }
.rounded-lg { border-radius: 24px; }
.rounded-xl { border-radius: 40px; }
.rounded-pill   { border-radius: 999px; }
.rounded-circle { border-radius: 50%; }



.media_cover_bg { margin-top: auto; overflow: hidden; }
.media_cover_bg img { width: 100%; height: 100%; display: block; object-fit: cover; }