/* ==========================================================================
   LAYOUT — container, grid de 12 colunas, espaçamentos e fundos de seção
   ========================================================================== */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}

/* grid de 12 colunas — .cA-B = da coluna A até antes da B
   ATENÇÃO: no mobile, todo filho direto de .g12 cuja classe COMEÇA com "c"
   ocupa a linha inteira (ver media query abaixo). Coloque a classe de coluna primeiro. */
.g12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
.c1-5{grid-column:1/6}.c1-6{grid-column:1/7}.c1-7{grid-column:1/8}.c1-8{grid-column:1/9}
.c5-13{grid-column:5/13}.c6-13{grid-column:6/13}.c7-13{grid-column:7/13}.c8-13{grid-column:8/13}

/* cabeçalho padrão de seção (marcador + título à esquerda, lede à direita).
   Cada seção ajusta margin-bottom/row-gap no próprio arquivo. */
.sec-hd{margin-bottom:clamp(32px,4vw,54px);row-gap:18px}

/* espaçamento vertical de seção */
.pad-s{padding:clamp(56px,6vw,86px) 0}
.pad{padding:clamp(76px,9vw,124px) 0}
.pad-l{padding:clamp(96px,13vw,176px) 0}

/* fundos — a ordem destas regras importa (.deep precisa vir depois de .ins/footer) */
.dark{background:var(--bg-dark);color:var(--on-dark-1)}
#hero{background:var(--ink-hero)}
#tecnologia{background:var(--ink-tech)}
#cases{background:var(--ink-case)}
.ins{background:var(--ink-ins)}
footer{background:var(--ink-foot)}
.deep{background:var(--bg-deep);color:var(--on-dark-1)}
.soft{background:var(--bg-soft)}
.dark h1,.dark h2,.dark h3,.deep h1,.deep h2,.deep h3{color:#fff}

@media (max-width:1024px){
  .g12>[class^="c"]{grid-column:1/13}
}