/* Layout "Galpão": forte e escuro. Foto de ponta a ponta na capa, letra
   larga e estreita em caixa alta nos títulos, número vazado grande em cada
   seção e a faixa de sinalização (listras na cor da marca) marcando as
   pontas. Vem depois do institucional.css e só troca desenho. */

[data-layout="galpao"] .inst {
  --i-fundo: #0F1113;
  --i-papel: #17191C;
  --i-alt: #1D2024;
  --i-tinta: #F2F0EB;
  --i-tinta-2: #B7BAC0;
  --i-tinta-3: #868A91;
  --i-linha: rgba(242, 240, 235, .10);
  --i-linha-forte: rgba(242, 240, 235, .22);
  --i-grade: transparent;
  --i-marca: color-mix(in oklab, var(--cor-marca) 68%, #FFFFFF);
  --i-realce: color-mix(in oklab, var(--cor-marca) 26%, transparent);
  --i-visor: #090A0B;
  --i-sobre-visor: #F2F0EB;
  --i-rodape: #08090A;
  --i-listra: repeating-linear-gradient(-45deg, var(--cor-marca) 0 14px, #0B0C0D 14px 28px);
  --i-sombra: 0 24px 60px -24px rgba(0, 0, 0, .9);
  --i-sombra-leve: 0 14px 30px -16px rgba(0, 0, 0, .8);
  color-scheme: dark;
}
[data-layout="galpao"] body.inst { background-image: none; }

/* Títulos: estreitos, pesados, em caixa alta. */
[data-layout="galpao"] .inst :is(h1, h2) {
  font-stretch: 70%; font-weight: 850; text-transform: uppercase; letter-spacing: -.005em;
}
[data-layout="galpao"] .inst h2 { font-size: clamp(40px, 5.4vw, 76px); line-height: .92; }
[data-layout="galpao"] .inst-apoio { color: var(--i-tinta-2); }

/* Rótulo: o número vazado, grande, e o nome em letra espaçada. */
[data-layout="galpao"] .inst-rotulo {
  display: flex; align-items: flex-end; gap: 14px; padding-bottom: 0; margin-bottom: 16px;
  font: 700 12.5px/1 var(--i-letra); letter-spacing: .16em; text-transform: uppercase; color: var(--i-marca);
}
[data-layout="galpao"] .inst-rotulo::after { display: none; }
[data-layout="galpao"] .inst-rotulo > span {
  font: 850 76px/.78 var(--i-letra); font-stretch: 68%; letter-spacing: 0; color: transparent;
  -webkit-text-stroke: 1.5px var(--i-linha-forte);
}

/* Pílulas: a principal na cor da marca; o contorno some no escuro. */
[data-layout="galpao"] .inst-pilula { font-stretch: 92%; font-weight: 700; letter-spacing: .01em; }
[data-layout="galpao"] .inst-pilula-contorno { background: transparent; }
[data-layout="galpao"] .inst-pilula-vidro {
  color: #FFFFFF; border-color: rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
[data-layout="galpao"] .inst-pilula-vidro:hover { border-color: #FFFFFF; }

/* Topo: preto, sem vidro claro. */
[data-layout="galpao"] .inst-topo { background: rgba(10, 11, 12, .82); border-bottom-color: rgba(255, 255, 255, .08); }
[data-layout="galpao"] .inst-marca-nome { font-stretch: 80%; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; font-size: 17px; }
[data-layout="galpao"] .inst-faixa-demo, [data-layout="galpao"] .inst .troca-layout { background: var(--cor-marca); color: var(--cor-sobre-marca); }
[data-layout="galpao"] .inst .troca-layout a { border-color: color-mix(in oklab, var(--cor-sobre-marca) 40%, transparent); }
[data-layout="galpao"] .inst .troca-layout a[aria-current="true"] { background: var(--cor-sobre-marca); color: var(--cor-marca); border-color: var(--cor-sobre-marca); }
[data-layout="galpao"] .inst-pilula-add.inst-pilula-escolher { background: transparent; color: var(--i-tinta); border-color: var(--i-linha-forte); }
[data-layout="galpao"] .inst-pilula-add.inst-pilula-escolher:hover { background: var(--i-tinta); color: #0F1113; }

/* ---------------------------------------------------------------- capa */
.gp-capa {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: min(90vh, 880px); padding: 0 !important; overflow: hidden; isolation: isolate;
}
.gp-fundo { position: absolute; inset: 0; z-index: -1; }
.gp-fundo img { width: 100%; height: 100%; object-fit: cover; }
.gp-fundo::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(9, 10, 11, .94) 0%, rgba(9, 10, 11, .72) 42%, rgba(9, 10, 11, .18) 100%),
    linear-gradient(0deg, rgba(9, 10, 11, .9) 0%, rgba(9, 10, 11, 0) 42%);
}
.gp-capa-in { padding-top: clamp(96px, 14vh, 160px); padding-bottom: clamp(40px, 6vh, 64px); }
[data-layout="galpao"] .gp-capa h1 {
  max-width: 14ch; margin: 22px 0 22px; font-size: clamp(54px, 7.4vw, 116px); line-height: .88; color: #FFFFFF;
}
[data-layout="galpao"] .gp-capa .inst-capa-linha { color: rgba(255, 255, 255, .8); max-width: 38em; }
[data-layout="galpao"] .gp-capa .inst-estado { background: rgba(10, 11, 12, .6); border-color: rgba(255, 255, 255, .25); color: #FFFFFF; }
[data-layout="galpao"] .gp-capa .inst-estado-detalhe { color: rgba(255, 255, 255, .72); }

/* A faixa de sinalização com o resumo da loja. */
.gp-faixa { position: relative; background: #0A0B0C; }
.gp-faixa::before { content: ""; display: block; height: 12px; background: var(--i-listra); }
.gp-faixa-in { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 auto; }
.gp-faixa-in > div { padding: 22px 24px 24px; border-left: 1px solid rgba(255, 255, 255, .1); min-width: 0; }
.gp-faixa-in > div:first-child { border-left: 0; padding-left: 0; }
.gp-faixa dt { font: 700 11.5px/1 var(--i-letra); letter-spacing: .16em; text-transform: uppercase; color: var(--i-marca); }
.gp-faixa dd { margin: 10px 0 0; font-size: 22px; line-height: 1.1; font-weight: 800; font-stretch: 72%; text-transform: uppercase; color: #FFFFFF; }
.gp-faixa small { display: block; margin-top: 4px; font-size: 14px; font-weight: 400; font-stretch: 100%; text-transform: none; color: rgba(255, 255, 255, .62); }

/* ------------------------------------------------------------- seções */
[data-layout="galpao"] .inst-secao { border-top-color: rgba(255, 255, 255, .07); }
[data-layout="galpao"] #calculadora, [data-layout="galpao"] #empresa, [data-layout="galpao"] #contato { background: #121417; }

/* Catálogo */
[data-layout="galpao"] .inst-filtros { background: color-mix(in oklab, #0F1113 88%, transparent); }
[data-layout="galpao"] .inst-busca { background: #17191C; }
[data-layout="galpao"] .inst-chip { background: transparent; font-weight: 600; }
[data-layout="galpao"] .inst-chip[aria-current="true"] { background: var(--cor-marca); border-color: var(--cor-marca); color: var(--cor-sobre-marca); }
[data-layout="galpao"] .inst-fichas { grid-template-columns: repeat(auto-fill, minmax(262px, 1fr)); gap: 16px; }
[data-layout="galpao"] .inst-ficha { border-radius: 18px; background: #17191C; }
[data-layout="galpao"] .inst-ficha-foto { aspect-ratio: 16 / 11; }
[data-layout="galpao"] .inst-ficha-foto::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 45%;
  background: linear-gradient(0deg, rgba(23, 25, 28, .9), transparent);
}
[data-layout="galpao"] .inst-ficha-cat { color: var(--i-marca); text-transform: uppercase; letter-spacing: .1em; font-size: 11px; }
[data-layout="galpao"] .inst-ficha-nome { font-size: 21px; line-height: 1.05; font-weight: 820; font-stretch: 74%; text-transform: uppercase; letter-spacing: .005em; }
[data-layout="galpao"] .inst-preco b { font-size: 19px; color: #FFFFFF; }
[data-layout="galpao"] .inst-pilula-add { background: var(--i-botao); border-color: var(--i-botao); color: var(--i-sobre-botao); }
[data-layout="galpao"] .inst-pilula-add:hover { background: var(--i-botao-2); border-color: var(--i-botao-2); }
[data-layout="galpao"] .inst-passo { border-color: var(--i-marca); background: transparent; }
[data-layout="galpao"] .inst-selo { background: var(--cor-marca); color: var(--cor-sobre-marca); font-weight: 500; }

/* Quem atende: cartão escuro, nome em caixa alta. */
[data-layout="galpao"] .inst-pessoa { background: #17191C; border-radius: 18px; }
[data-layout="galpao"] .inst-pessoa-nome { font-stretch: 74%; font-weight: 820; text-transform: uppercase; font-size: 20px; }
[data-layout="galpao"] .inst-pessoa-foto { border-radius: 18px; }
[data-layout="galpao"] .inst-pilula-add.inst-pilula-marcar { background: var(--i-botao); border-color: var(--i-botao); color: var(--i-sobre-botao); }

/* Calculadora: chapa escura com a faixa em cima. */
[data-layout="galpao"] .inst-calc { position: relative; overflow: hidden; background: #15171A; background-image: none; border-color: var(--i-linha-forte); padding-top: calc(clamp(14px, 2.4vw, 26px) + 12px); }
[data-layout="galpao"] .inst-calc::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px; background: var(--i-listra); }
[data-layout="galpao"] .inst-calc-aba { background: transparent; font-weight: 600; }
[data-layout="galpao"] .inst-calc-aba[aria-selected="true"] { background: var(--i-tinta); color: #0F1113; }
[data-layout="galpao"] .inst-entrada, [data-layout="galpao"] .inst-campo :is(input, select, textarea) { background: #0F1113; }
[data-layout="galpao"] .inst-calc-resultado { border: 1px solid var(--i-linha); }
[data-layout="galpao"] .inst-calc-lista b { color: var(--i-marca); }

/* Serviços: quatro placas em grade. */
[data-layout="galpao"] .inst-servicos-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
[data-layout="galpao"] .inst-servicos-lista li {
  position: relative; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 16px; padding: 26px 24px 28px;
  border: 1px solid var(--i-linha); border-radius: 20px; background: #17191C;
}
[data-layout="galpao"] .inst-servicos-lista li:last-child { border-bottom: 1px solid var(--i-linha); }
[data-layout="galpao"] .inst-servico-icone { background: var(--cor-marca); border: 0; color: var(--cor-sobre-marca); border-radius: 16px; }
[data-layout="galpao"] .inst-servicos-lista h3 { font-size: 22px; font-weight: 820; font-stretch: 74%; text-transform: uppercase; }
[data-layout="galpao"] .inst-servico-num {
  position: absolute; right: 22px; top: 18px; padding: 0; font: 850 44px/1 var(--i-letra); font-stretch: 68%;
  color: transparent; -webkit-text-stroke: 1px var(--i-linha-forte);
}
[data-layout="galpao"] .inst-foto-moldura { border-radius: 20px; }

/* A empresa */
[data-layout="galpao"] .inst-empresa-texto h2 + p { color: #FFFFFF !important; }
[data-layout="galpao"] .inst-empresa-foto-a, [data-layout="galpao"] .inst-empresa-foto-b { border-radius: 20px; }
[data-layout="galpao"] .inst-empresa-foto-b { border-color: #0F1113; }
[data-layout="galpao"] .inst-empresa-selo { background: var(--cor-marca); color: var(--cor-sobre-marca); }

/* Como funciona: números grandes na cor da marca. */
[data-layout="galpao"] .inst-trilha::before { opacity: .35; }
[data-layout="galpao"] .inst-trilha-num { background: #0F1113; border-color: var(--i-linha-forte); font: 850 20px/1 var(--i-letra); font-stretch: 72%; }
[data-layout="galpao"] .inst-trilha li:first-child .inst-trilha-num { background: var(--cor-marca); border-color: var(--cor-marca); color: var(--cor-sobre-marca); }
[data-layout="galpao"] .inst-trilha h3 { font-size: 22px; font-weight: 820; font-stretch: 74%; text-transform: uppercase; }

/* Onde fica, contato e perguntas */
[data-layout="galpao"] .inst-endereco b { font-stretch: 74%; font-weight: 820; text-transform: uppercase; font-size: 30px; }
[data-layout="galpao"] .inst-mini-titulo { font-stretch: 80%; text-transform: uppercase; letter-spacing: .04em; }
[data-layout="galpao"] .inst-planta { border-radius: 22px; }
[data-layout="galpao"] .inst-canais { background: #17191C; }
[data-layout="galpao"] .inst-canal-icone { background: var(--i-realce); }
[data-layout="galpao"] .inst-qa dt { font-stretch: 80%; font-weight: 800; font-size: 20px; text-transform: uppercase; letter-spacing: .005em; }

/* Chamada: a faixa de sinalização em cima e embaixo. */
[data-layout="galpao"] .inst-chamada {
  position: relative; background: #0A0B0C; background-image: none; color: #FFFFFF;
  padding: clamp(84px, 11vw, 140px) 0;
}
[data-layout="galpao"] .inst-chamada::before, [data-layout="galpao"] .inst-chamada::after {
  content: ""; position: absolute; left: 0; right: 0; height: 14px; background: var(--i-listra);
}
[data-layout="galpao"] .inst-chamada::before { top: 0; }
[data-layout="galpao"] .inst-chamada::after { bottom: 0; }
[data-layout="galpao"] .inst-chamada h2 { font-size: clamp(52px, 8vw, 118px); max-width: 12ch; line-height: .88; }
[data-layout="galpao"] .inst-chamada p { color: rgba(255, 255, 255, .78); }
[data-layout="galpao"] .inst-chamada .inst-pilula-clara { background: var(--i-botao); color: var(--i-sobre-botao); }
[data-layout="galpao"] .inst-chamada .inst-pilula-clara:hover { background: var(--i-botao-2); }
[data-layout="galpao"] .inst-chamada .inst-pilula-vidro { color: #FFFFFF; border-color: rgba(255, 255, 255, .4); background: transparent; }

/* Rodapé */
[data-layout="galpao"] .inst-rodape-nome { font-stretch: 76%; text-transform: uppercase; font-size: 22px; font-weight: 850; }
[data-layout="galpao"] .inst-rodape-titulo { font: 700 11.5px/1 var(--i-letra) !important; letter-spacing: .16em; text-transform: uppercase; color: var(--i-marca) !important; }

/* Lista do orçamento */
[data-layout="galpao"] .inst-orc { background: #141619; }
[data-layout="galpao"] .inst-orc-topo h2 { font-stretch: 72%; text-transform: uppercase; font-size: 34px; }
[data-layout="galpao"] .inst-orc-resumo { background: #0F1113; }

/* ---------------------------------------------------------------- telas */
@media (max-width: 980px) {
  .gp-faixa-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gp-faixa-in > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .gp-faixa-in > div:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .1); }
}
@media (max-width: 720px) {
  .gp-capa { min-height: 0; }
  .gp-capa-in { padding-top: 120px; padding-bottom: 36px; }
  [data-layout="galpao"] .gp-capa h1 { font-size: 52px; margin: 18px 0 16px; }
  .gp-fundo::after {
    background: linear-gradient(0deg, rgba(9, 10, 11, .96) 0%, rgba(9, 10, 11, .82) 55%, rgba(9, 10, 11, .35) 100%);
  }
  .gp-faixa-in > div { padding: 16px 14px 18px; }
  .gp-faixa-in > div:nth-child(odd) { padding-left: 0; }
  .gp-faixa dd { font-size: 19px; }
  [data-layout="galpao"] .inst-rotulo > span { font-size: 58px; }
  [data-layout="galpao"] .inst h2 { font-size: 42px; }
  [data-layout="galpao"] .inst-ficha { display: grid; }
  [data-layout="galpao"] .inst-ficha-foto { aspect-ratio: auto; }
  [data-layout="galpao"] .inst-ficha-foto::after { display: none; }
  [data-layout="galpao"] .inst-ficha-nome { font-size: 18px; }
  [data-layout="galpao"] .inst-servicos-lista { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  [data-layout="galpao"] .inst-servicos-lista li { grid-template-columns: 48px minmax(0, 1fr); padding: 20px 18px; }
  [data-layout="galpao"] .inst-chamada h2 { font-size: 52px; }
  [data-layout="galpao"] .inst-barra { background: rgba(15, 17, 19, .9); }
  [data-layout="galpao"] .inst-marca-nome { font-size: 16px; font-stretch: 72%; }
}