/* SOBRE NÓS: só o que esta página precisa, tudo com o prefixo .sobre-.
   A linguagem das propostas da Sett (nov/2026): o Ponto grande com rosto, adesivos com sombra dura,
   crachás com fita, balões e o pontilhado. Fontes, cores e espaços vêm das variáveis do site. */

/* ------------------------------------------------ abertura */
.sobre-subtitulo { margin: 0 0 calc(var(--coluna-gap) / 3); font: 600 clamp(1.3rem, 2.4vw, 2.1rem)/1.1 var(--display); letter-spacing: -.04em; }
.sobre-planeta { margin: 0; }
.sobre-planeta img { display: block; width: 100%; height: auto; }

@media (min-width: 1024px) {
  /* o Ponto grande sai pelo canto, como nas capas das propostas; a seção recorta */
  :root main > section.sobre-abertura { overflow: clip; }
  :root .pg-servico .ab .sobre-planeta {
    grid-column: 2; grid-row: 1 / span 4; align-self: start; justify-self: start;
    /* cresce até a borda, sem nunca passar da altura da seção */
    width: min(calc((100% + var(--margem)) * 1.12), calc(100 * var(--svh) - var(--topo) - var(--secao-base))); margin-top: calc(-1 * var(--abertura-titulo));
  }
}
@media (min-width: 801px) and (max-width: 1023px) {
  .sobre-planeta { width: min(100%, 26rem, max(120px, calc(100 * var(--svh) - var(--topo) - 26rem))); margin: calc(var(--coluna-gap) / 2) auto 0; }
}
@media (max-width: 800px) {
  /* celular: o Ponto fica com a altura que sobra na tela */
  .sobre-planeta { flex: 1 1 0; min-height: 0; width: 100%; margin-top: calc(var(--coluna-gap) / 2); }
  .sobre-planeta img { height: 100%; object-fit: contain; }
}

/* ------------------------------------------------ peças em comum */
/* adesivo: cartão claro com sombra dura embaixo */
.sobre-frente {
  border: 1px solid var(--campo-fio); border-radius: 18px; background: var(--paper);
  box-shadow: 3px 5px 0 color-mix(in srgb, var(--campo-texto) 18%, var(--campo-fundo));
}

/* balão: o Ponto falando */
.sobre-balao { display: flex; align-items: center; gap: calc(var(--coluna-gap) / 2); }
.sobre-balao img { flex: none; width: clamp(44px, 5vw, 60px); height: auto; }
.sobre-balao p {
  margin: 0; padding: .7em 1.1em; border-radius: 16px; background: var(--cyan); color: var(--ink);
  font-size: 1rem; font-weight: 500; line-height: 1.38; text-align: left;
}
/* a ponta do balão, apontando para o Ponto */
.sobre-balao p::before {
  content: ""; float: left; width: 0; height: 0; margin: .25em 0 0 calc(-1.1em - 9px);
  border-block: 7px solid transparent; border-right: 10px solid var(--cyan);
}

/* ------------------------------------------------ o que fazemos */
.sobre-frentes { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(var(--coluna-gap) / 2); margin: calc(var(--coluna-gap) / 2) 0 0; padding: 0; list-style: none; }
.sobre-frente { display: flex; align-items: center; gap: calc(var(--coluna-gap) / 2); padding: calc(var(--coluna-gap) / 2.4); text-align: left; }
.sobre-frente img { flex: none; width: clamp(46px, 13vw, 64px); height: auto; }
.sobre-frente h3 { margin: 0; font: 600 1.06rem/1.15 var(--display); letter-spacing: -.03em; }
.sobre-frente p { margin: .25em 0 0; font-size: .875rem; line-height: 1.36; color: var(--campo-texto-2); }
.sobre-frente p::first-letter { text-transform: uppercase; }
.sobre-frente:nth-child(odd) { rotate: -.5deg; }
.sobre-frente:nth-child(even) { rotate: .5deg; }

@media (min-width: 768px) {
  .sobre-frentes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sobre-frente:last-child { grid-column: 1 / -1; }
  .sobre-frente h3 { font-size: 1.2rem; }
  .sobre-frente p { font-size: .95rem; }
}
@media (min-width: 1024px) {
  .sobre-frentes { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .sobre-frente { flex-direction: column; align-items: flex-start; }
  .sobre-frente:last-child { grid-column: auto; }
  .sobre-frente img { width: clamp(64px, 6vw, 88px); }
  .sobre-frente:nth-child(odd) { rotate: -1.2deg; }
  .sobre-frente:nth-child(even) { rotate: 1deg; }
}
@media (hover: hover) and (pointer: fine) {
  .sobre-frente { transition: rotate var(--t-ui) var(--curva); }
  .sobre-frente:hover { rotate: 0deg; }
}

/* ------------------------------------------------ quem faz: 1 coluna no celular, 2 no tablet e 3 a partir de 1024px */
.sobre-quem .sobre-balao { margin-top: calc(var(--coluna-gap) / 2); }
.sobre-crachas { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(var(--coluna-gap) + 26px) calc(var(--coluna-gap) / 2); margin-top: calc(var(--coluna-gap) + 26px); }
.sobre-cracha { min-width: 0; padding: calc(var(--coluna-gap) / 2) calc(var(--coluna-gap) / 1.6); border-radius: 18px; text-align: left; box-shadow: 3px 6px 0 color-mix(in srgb, var(--ink) 55%, var(--campo-texto)); }
/* a fita e o prendedor saem do alto do cartão */
.sobre-cracha::before { content: ""; display: block; width: 4.1rem; height: 2.75rem; margin: calc(-1 * (var(--coluna-gap) / 2) - 32px) auto 8px; background: url('/sobre-nos/fita.svg') center / contain no-repeat; }
.sobre-cracha-topo { display: grid; justify-items: center; gap: .35em; text-align: center; }
.sobre-cracha-topo img { width: 4.25rem; height: auto; }
.sobre-cracha h3 { margin: 0; font: 600 1.35rem/1.1 var(--display); letter-spacing: -.03em; }
.sobre-cargo { margin: .15em 0 0; color: var(--campo-realce); font-size: .85rem; font-weight: 600; }
.sobre-rotulo { margin: 1em 0 .4em; color: var(--campo-realce); font: 600 .72rem/1.2 var(--display); letter-spacing: .14em; text-transform: uppercase; }
.sobre-trajetoria { margin: 0; padding-left: 1.05em; font-size: .875rem; line-height: 1.4; }
.sobre-trajetoria li + li { margin-top: .35em; }
.sobre-trajetoria li::marker { color: var(--campo-realce); }
.sobre-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; padding: 0; list-style: none; }
.sobre-chips li { max-width: 100%; padding: .22em .7em; border-radius: 999px; background: color-mix(in srgb, var(--cyan) 26%, var(--paper)); font-size: .76rem; font-weight: 500; line-height: 1.3; }
.sobre-chips li::first-letter { text-transform: uppercase; }
.sobre-nota { margin: .5em 0 0; font-size: .85rem; line-height: 1.4; }
.sobre-rotulo + .sobre-nota { margin-top: 0; }

/* do tablet em diante os três crachás cabem numa tela: título e balão na mesma linha, o Ponto ao lado do nome e letra que acompanha a altura */
@media (min-width: 768px) {
  :root main .sobre-quem > div { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--coluna-gap); align-content: start; align-items: center; }
  :root main .sobre-quem > div > .section-title { grid-column: 1; white-space: nowrap; }
  :root main .sobre-quem > div > .sobre-balao { grid-column: 2; margin-top: 0; }
  :root main .sobre-quem > div > .sobre-crachas { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px calc(var(--coluna-gap) / 2.5); margin-top: 30px; }
  :root main > section.sobre-quem.section-grid:not(.hero):not(.ab):not(.port-hero) { padding-block: clamp(14px, calc(2.2 * var(--svh)), 32px) clamp(16px, calc(2.6 * var(--svh)), 40px); }
  .sobre-cracha { font-size: clamp(.76rem, min(calc(1.55 * var(--svh)), 1.6vw), 1.15rem); padding: .9em 1.15em; }
  .sobre-cracha::before { width: 3.4rem; height: 2.25rem; margin: calc(-1em - 26px) auto 4px; }
  .sobre-cracha-topo { display: flex; align-items: center; gap: .8em; text-align: left; }
  .sobre-cracha-topo img { width: 3.2em; }
  .sobre-cracha h3 { font-size: 1.4em; }
  .sobre-cargo { font-size: max(.92em, .75rem); }
  .sobre-rotulo { margin: .75em 0 .3em; font-size: max(.72em, .7rem); }
  .sobre-trajetoria { font-size: 1em; line-height: 1.32; }
  .sobre-trajetoria li + li { margin-top: .2em; }
  .sobre-chips { gap: .3em; }
  .sobre-chips li { padding: .1em .55em; font-size: .86em; }
  .sobre-nota { font-size: .96em; line-height: 1.34; }
  /* tablet: o terceiro crachá ocupa a linha inteira, com os grupos lado a lado */
  .sobre-cracha:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: calc(var(--coluna-gap) / 1.5); }
  .sobre-cracha:last-child::before, .sobre-cracha:last-child > .sobre-cracha-topo { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  :root main .sobre-quem > div > .sobre-crachas { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 30px; }
  .sobre-cracha:last-child { grid-column: auto; display: block; }
}

/* ------------------------------------------------ como trabalhamos */
:root main > section.sobre-fim.section-grid:not(.hero):not(.ab):not(.port-hero) { grid-template-rows: minmax(0, 1fr) auto; align-content: stretch; padding-bottom: 0; overflow: clip; }
.sobre-fim > div { align-self: start; }
@media (min-width: 801px) { .sobre-fim > div { align-self: center; } }
.sobre-olhares { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(var(--coluna-gap) / 3); margin: calc(var(--coluna-gap) / 3) 0 0; padding: 0; list-style: none; }
.sobre-olhar { display: flex; align-items: center; gap: calc(var(--coluna-gap) / 3); }
.sobre-olhar img { flex: none; width: clamp(40px, 11vw, 56px); height: auto; }
.sobre-olhar p {
  flex: 1 1 auto; margin: 0; padding: .55em .9em; border: 1px solid var(--campo-fio); border-radius: 14px; background: var(--paper);
  box-shadow: 3px 4px 0 color-mix(in srgb, var(--campo-texto) 18%, var(--campo-fundo));
  font: 600 1rem/1.15 var(--display); letter-spacing: -.02em; text-align: left;
}
.sobre-olhar p::first-letter { text-transform: uppercase; }
.sobre-fim .sobre-balao { margin-top: calc(var(--coluna-gap) / 2); }
.sobre-acao { margin-top: calc(var(--coluna-gap) / 2); }
@media (max-width: 800px) { .sobre-acao { display: flex; justify-content: center; } }

/* em degraus sobre o pontilhado, como nas propostas */
@media (min-width: 768px) {
  .sobre-olhares { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; background: url('/sobre-nos/caminho.svg') center top / 100% clamp(70px, 8vw, 96px) no-repeat; }
  .sobre-olhar { flex-direction: column; align-items: flex-start; }
  .sobre-olhar img { width: clamp(56px, 5vw, 76px); }
  .sobre-olhar p { align-self: stretch; }
  .sobre-olhar:nth-child(1) { margin-top: clamp(24px, 3vw, 44px); }
  .sobre-olhar:nth-child(2) { margin-top: clamp(10px, 1.4vw, 22px); }
}

/* as nuvens levam a última seção até o rodapé, e os três Pontos sentam nelas */
.sobre-nuvens {
  align-self: end; display: flex; justify-content: center; align-items: flex-end; gap: calc(var(--coluna-gap) / 3);
  margin: calc(var(--coluna-gap) / 3) calc(-1 * var(--margem)) 0; padding-bottom: clamp(20px, 4.5vw, 64px);
  background: url('/sobre-nos/nuvens.svg') center bottom / 100% clamp(44px, 8vw, 120px) no-repeat;
}
.sobre-nuvens img { width: clamp(36px, 4.4vw, 60px); height: auto; }
.sobre-nuvens img:nth-child(2) { margin-bottom: 8px; }

/* ------------------------------------------------ celular baixo (classes do tela.js) */
.ate-760 .sobre-frentes { gap: 8px; margin-top: 12px; }
.ate-760 .sobre-frente { padding: 8px 12px; gap: 12px; }
.ate-760 .sobre-frente h3 { font-size: 1rem; }
.ate-760 .sobre-frente p { margin-top: .1em; font-size: .8125rem; line-height: 1.3; }
.ate-760 .sobre-frente img { width: 2.6rem; }
.ate-760 .sobre-olhares { margin-top: 6px; gap: 6px; }
.ate-760 .sobre-olhar img { width: 2.1rem; }
.ate-760 .sobre-olhar p { padding: .4em .8em; font-size: .9rem; }
.ate-760 .sobre-fim .sobre-balao, .ate-760 .sobre-acao { margin-top: 10px; }
.ate-760 .sobre-balao p { font-size: .875rem; }
.ate-760 .sobre-nuvens { padding-bottom: 14px; background-size: 100% 34px; }
.ate-760 .sobre-nuvens img { width: 1.9rem; }