/* ============================================================
   QivoN - a pagina Sobre (gerada por catalogo-sync/gen_sobre.py
   - NAO editar a mao)

   SEGUNDA VERSAO, 17/10/2026. A primeira nao seguiu a referencia:
   fez coluna unica centralizada onde o desenho pede BANDA DE DUAS
   COLUNAS alternando foto e texto. Esta folha existe para a
   estrutura do desenho dele, nao para a minha.

   Carregada SO pela sobre.html. As 6 politicas continuam com o
   css/institucional.css -- documento legal nao precisa de ritmo
   de revista.
   ============================================================ */

/* a grade de 2 colunas com coluna-logo sticky sai */
.sobre-hero-w { display: block; max-width: none; padding: 0; }
.sobre-content { order: 0; }

/* ------------------------------------------------------------
   1. A FAIXA DE CONFIANCA, 4 pilares.

   Eu tinha cortado isto por julgamento proprio, citando a
   repeticao que saiu da home. Na home a mesma promessa aparecia
   TRES vezes em 700px; aqui ela aparece uma. Regra aprendida num
   contexto, aplicada noutro sem remedir.
   ------------------------------------------------------------ */
.sb-trust {
  background: #fff;
  border-bottom: 1px solid var(--border, #E4E1DB);
  padding: 1.6rem 1.5rem;
}
.sb-trust-w {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.sb-pilar {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding-left: 1.5rem;
  border-left: 1px solid var(--border, #E4E1DB);
  color: var(--teal, #63615F);
}
.sb-pilar:first-child { border-left: none; padding-left: 0; }
.sb-pilar strong {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  color: var(--black, #141414);
  letter-spacing: .01em;
}
.sb-pilar span {
  display: block;
  font-size: .75rem;
  color: #5F5C58;
}

/* ------------------------------------------------------------
   2. A BANDA. Duas colunas iguais, a foto sangrando ate a borda.

   `align-items: stretch` e o que faz a foto ter a altura do
   texto ao lado -- sem isso ela colapsa e a banda vira duas
   caixas soltas.
   ------------------------------------------------------------ */
.sb-band {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  background: #fff;
}
.sb-band.sb-creme { background: #FBFAF7; }
.sb-band.sb-dark { background: #141414; color: rgba(255, 255, 255, .80); }

/* a coluna invertida troca a ORDEM visual, nao a do DOM: no
   celular tudo empilha e a foto tem de vir depois do texto em
   qualquer uma das duas, senao metade das bandas abre com um
   retangulo antes de qualquer palavra */
.sb-band.sb-inv .sb-foto { order: 2; }
.sb-band.sb-inv .sb-txt { order: 1; }

.sb-txt {
  padding: 4.5rem 4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 58ch;
}
.sb-eyebrow {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #5F5C58;
  margin-bottom: 1rem;
}
.sb-dark .sb-eyebrow { color: var(--teal-dk, #8D8B86); }

/* a serifada vem do tema; aqui so o tamanho e o respiro */
.sb-h {
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--black, #141414);
  margin: 0 0 1.25rem;
}
.sb-dark .sb-h { color: #fff; }

/* O <p> precisa de declaracao propria: o css/institucional.css
   pinta `.sobre-sec p` e a HERANCA perde para qualquer
   declaracao direta. Medido na v1 -- o paragrafo da banda escura
   saiu em 3,21:1 com a cor so no container. */
.sb-txt p {
  font-size: .95rem;
  line-height: 1.75;
  color: #4A4844;
  margin: 0 0 1rem;
  max-width: none;
}
.sb-dark .sb-txt p { color: rgba(255, 255, 255, .82); }

/* ------------------------------------------------------------
   3. O LUGAR DA FOTO.

   Campo hachurado claro com fio -- le como moldura reservada.
   NAO existe <img> sem src aqui: o `onerror` dos cards deste
   site APAGA a imagem, entao foto faltando nunca da icone
   quebrado, da buraco. Espaco desenhado para estar vazio nao
   tem esse modo de falhar.

   Com a foto: `background-image` neste seletor, e nada mais
   muda.
   ------------------------------------------------------------ */
.sb-foto {
  min-height: 420px;
  background:
    repeating-linear-gradient(-45deg,
      #F2F0EC 0 16px, #F8F6F2 16px 32px);
  background-size: cover;
  background-position: center;
}
.sb-dark .sb-foto {
  background:
    repeating-linear-gradient(-45deg,
      rgba(255, 255, 255, .045) 0 16px,
      rgba(255, 255, 255, .015) 16px 32px);
}
/* BANDA COM FOTO DE VERDADE.
   O `background-image` vem INLINE no markup (uma foto por banda, e o
   gerador confere que o arquivo existe). Aqui so se desliga a hachura,
   senao ela aparece nas bordas do recorte -- `cover` preserva proporcao
   e sobra fundo quando a razao da banda nao bate com a da foto.
   `!important` nao: a regra acima e do mesmo peso e vem antes, entao
   basta vir depois. */
.sb-foto.sb-foto-ok,
.sb-dark .sb-foto.sb-foto-ok {
  background-color: #EFEDE9;
  background-image: none;              /* o inline vence e repoe a foto */
  background-repeat: no-repeat;
  background-size: cover;
  /* CENTRO e o padrao, e o `55%` da banda 1 virou INLINE em 20/10/2026.
     Aquele numero foi escolhido OLHANDO, e so para ela: a foto do dono e
     retrato (1086x1448) num espaco deitado, entao `cover` corta na
     vertical e sobra escolher a janela -- a 28% cortava o rosto na altura
     dos olhos, a 55% entram a placa, a mao e o rosto.
     Enquanto isso foi regra GLOBAL de `.sb-foto-ok`, qualquer foto nova
     herdava um enquadramento calibrado para outra imagem. As tres de
     20/10 ja saem cortadas na proporcao da vaga delas e querem o centro;
     herdar o 55% deslocaria as tres de uma vez, sem erro em lugar nenhum.
     Ver `gen_sobre_fotos.py`. */
  background-position: center;
}

/* ------------------------------------------------------------
   4. OS 4 VALORES, na banda escura.
   ------------------------------------------------------------ */
/* A BANDA ESCURA E MAIS LARGA DO LADO DO TEXTO, e isso e medicao:
   com 1fr/1fr e o texto limitado a 58ch, cada um dos quatro valores
   ficava com ~112px e o texto quebrava palavra a palavra --
   "Fazemos / parte dos / seus / momentos / mais / importantes".
   Seis linhas para uma frase de seis palavras.

   58ch e a medida certa para PARAGRAFO, e errada para quatro
   colunas lado a lado dentro dele. Aqui o limite sai e a banda
   cede largura da foto. */
/* A GRADE E 1fr/1fr EM TODAS AS BANDAS, desde 20/10/2026.
   A `.sb-dark` tinha `1.15fr .85fr` para caber os 4 valores, e isso punha
   a divisoria dela em x=828 enquanto as outras tres dividem em 720 --
   descendo a pagina a linha vertical PULAVA 108px na junção da banda 2
   para a 3. O dono marcou exatamente esse ponto.
   Os 4 valores passam a dividir 720px; se um dia nao couberem, o conserto
   e no `.sb-vals` (duas colunas), nao em desalinhar a pagina inteira. */
.sb-dark .sb-txt { max-width: none; }

.sb-vals {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 2.25rem;
}
.sb-val {
  padding-left: 1rem;
  border-left: 1px solid rgba(255, 255, 255, .16);
  color: var(--teal-dk, #8D8B86);
}
.sb-val:first-child { border-left: none; padding-left: 0; }
.sb-val strong {
  display: block;
  margin: .6rem 0 .3rem;
  font-size: .82rem;
  font-weight: 600;
  color: #fff;
}
.sb-val span {
  display: block;
  font-size: .72rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, .72);
}

/* ------------------------------------------------------------
   5. O BOTAO e os 3 SELOS.
   ------------------------------------------------------------ */
.sb-cta {
  display: inline-block;
  margin-top: .6rem;
  padding: .85rem 1.6rem;
  background: var(--black, #141414);
  color: #fff;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  align-self: flex-start;
  transition: background .15s;
}
.sb-cta:hover { background: #2a2a2a; }
/* NA BANDA ESCURA O BOTAO INVERTE. Ele e `background: #141414` com texto
   branco, que e exatamente a cor da `.sb-dark` -- quando a banda 3 virou
   escura em 20/10/2026 o botao continuou legivel (18,42:1, porque o texto
   e branco) e DEIXOU DE PARECER UM BOTAO: um retangulo preto sobre fundo
   preto vira texto solto.
   Contraste nao pega isto. A medicao olha texto contra fundo, e aqui os
   dois estavam certos; o que sumiu foi a forma, que nenhum piso WCAG
   descreve. */
.sb-dark .sb-cta { background: #fff; color: var(--black, #141414); }
.sb-dark .sb-cta:hover { background: #E8E6E2; }

.sb-selos {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 1.75rem;
}
.sb-selo {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding-left: 1.5rem;
  border-left: 1px solid var(--border, #E4E1DB);
  color: var(--teal, #63615F);
}
.sb-selo:first-child { border-left: none; padding-left: 0; }
.sb-selo strong {
  display: block;
  font-size: .76rem;
  font-weight: 600;
  color: var(--black, #141414);
}
.sb-selo span { display: block; font-size: .72rem; color: #5F5C58; }

/* ------------------------------------------------------------
   6. AS SECOES PRATICAS que a pagina ja tinha.

   Envio, Trocas, Garantia, Atacado, Fale conosco. Nao estao na
   referencia e nao foram apagadas: sao as unicas respostas que a
   pagina da a quem veio procurar prazo, troca e preco de
   atacado. Ficam DEPOIS das bandas, quietas -- sem fundo
   alternado, para nao competir com elas.
   ------------------------------------------------------------ */
.sobre-sec { padding: 2.5rem 1.5rem 0; margin: 0; border: none; }
.sobre-sec > * { max-width: 68ch; margin-left: auto; margin-right: auto; }
.sobre-content > .sobre-sec:last-of-type { padding-bottom: 3.5rem; }

.sobre-logo-col {
  position: static;
  max-width: 420px;
  margin: 0 auto;
  padding: 2.5rem 2rem 3.5rem;
  background: transparent;
  border: none;
  border-top: 1px solid var(--border, #E4E1DB);
}

/* ------------------------------------------------------------
   7. CELULAR. Uma coluna, e a foto SEMPRE depois do texto.
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  .sb-trust-w { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
  .sb-pilar:nth-child(odd) { border-left: none; padding-left: 0; }
  .sb-band { grid-template-columns: 1fr; }
  .sb-txt { padding: 3rem 1.5rem; max-width: none; order: 1; }
  /* PROPORCAO FIXA, NAO ALTURA FIXA (20/10/2026).
     Era `min-height: 260px` com largura fluida, entao a forma da vaga
     dependia da tela: 390x260 = 1,5:1 no celular e 900x260 = 3,46:1 a
     900px -- uma tira de letterbox onde devia haver uma foto. Medido, a
     faixa de cada vaga ia de 0,94 a 3,46, e nenhum corte sobrevive a
     isso: otimizar para a tira estraga o desktop e vice-versa.
     Com `3/2` a vaga empilhada tem SEMPRE a mesma forma, e a 390px ela
     continua dando exatamente os 260px de altura de antes. */
  .sb-foto { aspect-ratio: 3 / 2; min-height: 0; order: 2; }
  .sb-band.sb-inv .sb-foto { order: 2; }
  .sb-band.sb-inv .sb-txt { order: 1; }
  .sb-vals { grid-template-columns: repeat(2, 1fr); gap: 1.5rem 1rem; }
  .sb-val:nth-child(odd) { border-left: none; padding-left: 0; }
}
@media (max-width: 520px) {
  .sb-trust-w { grid-template-columns: 1fr; }
  .sb-pilar { border-left: none; padding-left: 0; }
  .sb-vals { grid-template-columns: 1fr; }
  .sb-val { border-left: none; padding-left: 0; }
}