/* ============================================================================
   Página "Sobre nós" — Figma node 7782:383 (frame "Desktop", 1440px)
   ----------------------------------------------------------------------------
   Prefixo .sbr- para não colidir com .svc- (Quem somos) nem com o tema base.
   Todas as medidas vêm literalmente do get_design_context de cada seção.
   Tokens estruturais (--section-px, --content-w, --content-gap) vêm do main.css.
   ========================================================================== */

/* ── 1. HERO — node 7786:463 / container 7786:465 ─────────────────────────── */

.sbr-hero {
  background: #f5f9ff;             /* fill do frame 7786:463 */
  overflow: hidden;
}

/* Header estático dentro do hero: #sticky-header nasce com translateY(-100%)
   e só desce após 10px de rolagem, então o topo ficaria sem menu.
   Mesma estratégia de template-parts/solucoes-hero.php. */
.sbr-hero__header {
  position: relative;
  z-index: 3;
  background: #fff;
  display: flex;
  justify-content: center;
  padding: 16px var(--section-px) 0;
}
.sbr-hero__header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  max-width: var(--content-w);
  padding-bottom: 16px;
}

.sbr-hero__container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--content-gap);          /* 56px */
  padding: 120px var(--section-px);
  overflow: hidden;
}

/* Pattern: node 7643:1010 é uma ELIPSE de 2×2px com fill #6B778C a 15%,
   repetida como PATTERN. Reproduzida com radial-gradient — o mesmo
   tratamento usado em quem-somos.css. */
.sbr-hero__pattern {
  --sbr-dot-size: 2px;
  --sbr-dot-gap: 16px;
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle,
    rgba(107, 119, 140, 0.15) calc(var(--sbr-dot-size) / 2),
    transparent               calc(var(--sbr-dot-size) / 2));
  background-size: var(--sbr-dot-gap) var(--sbr-dot-gap);
  pointer-events: none;
  z-index: 0;
}

.sbr-hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 100%;
  max-width: var(--content-w);
}

.sbr-hero__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 1100px;
  max-width: 100%;
  text-align: center;
}
.sbr-hero__title {
  font-family: 'Trebuchet MS', sans-serif;
  font-weight: 700;
  font-size: 52px;                  /* Heading/H1 */
  line-height: 1.2;
  color: #0c111d;
  margin: 0;
}
.sbr-hero__subtitle {
  font-family: 'Trebuchet MS', sans-serif;
  font-size: 18px;                  /* Body/p 18 */
  line-height: 1.5;
  color: #4a5568;
  opacity: 0.9;
  width: 821px;
  max-width: 100%;
  margin: 0;
}

.sbr-hero__buttons {
  display: flex;
  align-items: flex-start;
  gap: 32px;
}

/* Botões — 7786:1101 (primário) e 7786:1106 (fantasma) */
.sbr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  font-family: 'Trebuchet MS', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .25s cubic-bezier(.2,.7,.3,1),
              box-shadow .25s cubic-bezier(.2,.7,.3,1),
              background-color .25s;
}
.sbr-btn img { display: block; width: 24px; height: 24px; flex-shrink: 0; }

.sbr-btn--primary {
  background: #006fcc;
  color: #fff;
  gap: 12px;
  padding: 18px 24px 18px 32px;
}
.sbr-btn--primary:hover {
  background: #0058a3;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -12px rgba(0, 111, 204, .55);
}

.sbr-btn--ghost {
  background: #fff;
  color: #004a8a;
  gap: 8px;
  padding: 18px 32px;
}
.sbr-btn--ghost:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -14px rgba(12, 17, 29, .30);
}

/* Faixa de imagens — 7798:1520
   Anotação Figma: "Carrossel passando automaticamente".
   5 imagens de 394px + 4 gaps de 16px = 2034px, mais largo que os 1216px
   úteis do container: por isso sangra até a borda e rola em loop. */
.sbr-hero__strip {
  position: relative;
  z-index: 1;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.sbr-hero__track {
  display: flex;
  align-items: center;
  gap: 16px;
  width: max-content;
  animation: sbr-marquee 45s linear infinite;
}
/* Sem pausa no hover: a faixa é decorativa, as fotos não são clicáveis nem
   têm legenda, então parar não serve para ler nada — só quebra o ritmo quando
   o ponteiro passa por cima a caminho de outra coisa. */

.sbr-hero__track img {
  display: block;
  width: 394px;
  height: 222px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: 14px;
}

/* Uma volta = largura de um conjunto (5×394 + 5×16 de gap) = 2050px */
@keyframes sbr-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-2050px); }
}

/* ── 2. ABOUT — node 7786:1116 ────────────────────────────────────────────── */

/* Grid em vez de flex: as colunas do Figma são 527 + 56 + 633 = 1216, e o
   conteúdo tem de PARAR em 1216 e centralizar quando a tela é mais larga que
   1440 — com flex as colunas esticavam até a viewport inteira. */
.sbr-about {
  display: grid;
  grid-template-columns: minmax(0, 527px) minmax(0, 633px);
  justify-content: center;
  align-items: center;
  gap: var(--content-gap);
  padding: 120px var(--section-px);
  background: #fff;
}

.sbr-about__content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}
/* Cabeçalho tag + H2, compartilhado entre about e atuação */
.sbr-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}
.sbr-tag {
  font-family: 'DM Mono', monospace;
  font-size: 14px;                  /* Body/Tag */
  line-height: 1.5;
  color: #004a8a;
  margin: 0;
}
.sbr-h2 {
  font-family: 'Trebuchet MS', sans-serif;
  font-weight: 700;
  font-size: 32px;                  /* Heading/H2 */
  line-height: 1.3;
  color: #0c111d;
  margin: 0;
}
/* Só no about o H2 é travado em 420px (7786:1120); na atuação é w-full. */
.sbr-about .sbr-h2 { width: 420px; max-width: 100%; }

.sbr-about__body p {
  font-family: 'Trebuchet MS', sans-serif;
  font-size: 16px;                  /* Body/p 16 */
  line-height: 1.5;
  color: #4a5568;
  margin: 0 0 16px;
}
.sbr-about__body p:last-child { margin-bottom: 0; }
.sbr-about__body strong { font-weight: 700; }

.sbr-about__media {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 16px;
  width: 633px;
  flex-shrink: 0;
  align-self: stretch;
}
/* `>` obrigatório: o selo mora dentro de .sbr-about__media e tem três <img>
   próprias. Como seletor de descendente, esta regra dava `flex: 1 1 0` ao
   ícone do selo — que é o único filho em fluxo do .sbr-selo (os outros dois
   são absolutos) — e ele crescia de 36px para os 163px do selo, esticado
   porque o SVG traz preserveAspectRatio="none". */
.sbr-about__media > img {
  display: block;
  flex: 1 1 0;
  min-width: 0;
  object-fit: cover;
  border-radius: 14px;
}
.sbr-about__img--tall  { align-self: stretch; height: auto; }
.sbr-about__img--short { height: 282px; }

/* Selo circular — 7798:1687 (165px, centro deslocado 132px abaixo do meio) */
.sbr-selo {
  position: absolute;
  left: 50%;
  top: calc(50% + 132px);
  transform: translate(-50%, -50%);
  width: 165px;
  height: 165px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #008dff;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(2px 3px 4px rgba(0,0,0,.05))
          drop-shadow(8px 12px 7px rgba(0,0,0,.04))
          drop-shadow(19px 27px 10px rgba(0,0,0,.03));
  z-index: 2;
}
.sbr-selo__ring {                    /* texto em arco, gira devagar */
  position: absolute;
  inset: 0;
  animation: sbr-spin 26s linear infinite;
}
.sbr-selo__ring text {
  font-family: 'DM Mono', monospace;
  font-size: 9.5px;
  fill: #4a5568;
  letter-spacing: .06em;
}
.sbr-selo__stroke {                  /* circunferência interna 7798:1688 */
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 105.174px; height: 105.174px;
}
.sbr-selo__arc {                     /* ticks decorativos 7798:1727 */
  position: absolute;
  left: calc(50% + 1.65px);
  top: calc(50% - 40.21px);
  transform: translate(-50%, -50%);
  width: 123.272px; height: 42.117px;
}
.sbr-selo__icon {
  position: relative;
  z-index: 4;
  width: 36.34px;
  height: 48.126px;
}
@keyframes sbr-spin { to { transform: rotate(360deg); } }

/* ── 3. ATUAÇÃO — node 7786:1180 ──────────────────────────────────────────── */

/* Mesmo motivo do .sbr-about: 580 + 56 + 580 = 1216, travado e centralizado.
   O grid também torna dispensável o truque de flex-basis que era necessário
   para contornar o padding do painel virando tamanho-base mínimo. */
.sbr-atuacao {
  display: grid;
  grid-template-columns: minmax(0, 580px) minmax(0, 580px);
  justify-content: center;
  align-items: center;
  gap: var(--content-gap);
  padding: 120px var(--section-px);
  background: #fff;
}

/* Painel esquerdo 7786:1181 — anotação Figma:
   "[Ideia do cliente] Os cards podem aparecer de forma suave conforme a pessoa
   rola a página, e também ter um leve efeito ao passar o mouse" */
.sbr-atuacao__panel,
.sbr-atuacao__content { min-width: 0; }

.sbr-atuacao__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 32px;
  background: #f5f9ff;
  /* inset em vez de `border`: com altura automática a borda somaria 2px que o
     traço do Figma não soma (traço interno). Mesmo motivo em .sbr-item. */
  box-shadow: inset 0 0 0 1px #e6f4ff;
  border-radius: 14px;
  overflow: hidden;
}
.sbr-atuacao__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* Véus de topo e base — 7798:1600 e 7798:1599 (106px cada) */
.sbr-atuacao__panel::before,
.sbr-atuacao__panel::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 106px;
  pointer-events: none;
  z-index: 2;
}
.sbr-atuacao__panel::before {
  top: 0;
  background: linear-gradient(180deg, #f5f9ff 0%, rgba(245,249,255,0) 100%);
}
.sbr-atuacao__panel::after {
  bottom: 0;
  background: linear-gradient(180deg, rgba(245,249,255,0) 0%, #f5f9ff 100%);
}

.sbr-item {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 287px;
  padding: 16px;
  background: #fff;
  border-radius: 14px;
  backdrop-filter: blur(43.95px);
  box-shadow: inset 0 0 0 1px #f1f4f8;
  transition: transform .3s cubic-bezier(.2,.7,.3,1),
              box-shadow .3s cubic-bezier(.2,.7,.3,1);
}
.sbr-item--raised {
  box-shadow: inset 0 0 0 1px #f1f4f8,
              5px 3px 6px rgba(0,0,0,.05),
              20px 11px 11px rgba(0,0,0,.04),
              44px 24px 15px rgba(0,0,0,.03);
}
.sbr-item:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: inset 0 0 0 1px #f1f4f8,
              0 14px 30px -14px rgba(12,17,29,.22);
}
.sbr-item p {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  font-family: 'Trebuchet MS', sans-serif;
  font-size: 14px;                  /* Body/p 14 */
  line-height: 1.5;
  color: #4a5568;
}
.sbr-item__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background: #006fcc;
  border-radius: 12px;
  overflow: hidden;
}
.sbr-item__icon img { display: block; width: 16px; height: 16px; }
/* O ícone da Dynatrace (7798:1594) não tem plaqueta azul: é o SVG inteiro */
.sbr-item__icon--bare { background: none; border-radius: 0; width: 39.813px; }
.sbr-item__icon--bare img { width: 39.813px; height: 40px; }

.sbr-atuacao__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}
.sbr-atuacao__body { width: 566px; max-width: 100%; }
.sbr-atuacao__body p {
  font-family: 'Trebuchet MS', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #4a5568;
  margin: 0 0 16px;
}
.sbr-atuacao__body p:last-child { margin-bottom: 0; }
.sbr-atuacao__body strong { font-weight: 700; }

/* ── 4. STATS — node 7786:1187 ────────────────────────────────────────────── */

.sbr-stats {
  display: flex;
  flex-direction: column;
  align-items: center;          /* trava o conteúdo em 1216 e centraliza */
  justify-content: center;
  gap: var(--content-gap);
  padding: 0 var(--section-px) 120px;   /* topo vem do padding-top do cabeçalho */
  background: #fff;
}
.sbr-stats__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: var(--content-w);
  text-align: center;
  padding-top: 120px;
  border-top: 1px solid #c5ceda;
}
.sbr-stats__head .sbr-h2 { width: 476px; max-width: 100%; }

.sbr-stats__grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  width: 100%;
  max-width: var(--content-w);
}
.sbr-stats__col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.sbr-stats__col--left  { text-align: right; }
.sbr-stats__col--left  .sbr-stat { align-items: flex-end; }
.sbr-stats__col--right .sbr-stat { align-items: flex-start; }

.sbr-stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  width: 100%;
  padding-bottom: 32px;
  border-bottom: 1px solid #eaecf0;
}
.sbr-stat__num {
  width: 100%;
  margin: 0;
  font-family: 'Trebuchet MS', sans-serif;
  font-weight: 700;
  font-size: 40px;
  line-height: 1.5;
  color: #006fcc;
}
.sbr-stat__label {
  width: 100%;
  margin: 0;
  font-family: 'Trebuchet MS', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #6b778c;
}

/* A coluna da direita usa `text-box-trim: trim-both` no Figma (7786:1346,
   7786:1385, 7786:1384): a caixa do número é cortada na altura das maiúsculas,
   29px em vez dos 60px do line-height cheio. `text-box-trim` só existe do
   Chrome 133 em diante, então reproduzimos com line-height equivalente
   (40px × 0.725 ≈ 29px) — mesmo resultado em todos os navegadores. */
.sbr-stats__col--right .sbr-stat__num { line-height: 0.725; }

/* Último bloco da direita tem altura fixa de 132px no Figma (7786:1348). */
.sbr-stats__col--right .sbr-stat:last-child { height: 132px; }

/* Globo central 460×460 (Figma 7786:1343). O canvas é desenhado por
   assets/js/globe.js, que lê a largura de #rike-globe-wrap para dimensionar
   o buffer — por isso o wrap precisa ter tamanho próprio. */
.sbr-stats__globo {
  width: 460px;
  height: 460px;
  flex-shrink: 0;
}
.sbr-stats__globo #rike-globe-wrap {
  position: relative;
  width: 100%;
  height: 100%;
}
.sbr-stats__globo #rike-globe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
}

/* ── 5. SETORES — node 7803:1750 ──────────────────────────────────────────── */

.sbr-setores {
  display: flex;
  flex-direction: column;
  align-items: center;          /* trava o conteúdo em 1216 e centraliza */
  justify-content: center;
  gap: var(--content-gap);
  padding: 120px var(--section-px);
  background: #f5f9ff;
}
.sbr-setores__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: var(--content-w);
}

/* Grid do Figma: repeat(5, minmax(0,1fr)) SEM gap — os cards se encostam.
   Usamos flex para permitir a expansão no hover exigida pela anotação
   "Durante o hover, expandir o card (ver no protótipo)". */
.sbr-setores__grid {
  display: flex;
  width: 100%;
  max-width: var(--content-w);
}
.sbr-setor {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 480px;
  padding: 24px;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: flex-grow .45s cubic-bezier(.2,.7,.3,1);
}
.sbr-setor > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
  transition: transform .6s cubic-bezier(.2,.7,.3,1);
}
.sbr-setor::after {                  /* véu do Figma: transparente até 50% */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(25,40,61,0) 50%, #19283d 100%);
  pointer-events: none;
}
.sbr-setor__num,
.sbr-setor__title { position: relative; z-index: 1; margin: 0; }

.sbr-setor__num {
  font-family: 'DM Mono', monospace;
  font-size: 14px;
  line-height: 1.5;
  color: #fff;
  transition: color .35s;
}
.sbr-setor__title {
  font-family: 'Trebuchet MS', sans-serif;
  font-weight: 700;
  font-size: 20px;                  /* Heading/H4 */
  line-height: 1.4;
  color: #fff;
}

.sbr-setores__grid:hover .sbr-setor:hover      { flex-grow: 1.7; }
.sbr-setores__grid:hover .sbr-setor:hover > img{ transform: scale(1.06); }
.sbr-setores__grid:hover .sbr-setor:hover .sbr-setor__num { color: #008dff; }

/* ── Entrada por rolagem ──────────────────────────────────────────────────── */

.sbr-fade {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s cubic-bezier(.2,.7,.3,1),
              transform .6s cubic-bezier(.2,.7,.3,1);
}
.sbr-fade.visible { opacity: 1; transform: none; }

/* .sbr-item e .sbr-setor acumulam .sbr-fade. Como .sbr-fade vem depois neste
   arquivo e tem a mesma especificidade (0,2,0), ela vencia tanto o `transition`
   quanto o `transform` do hover — o efeito simplesmente não acontecia.
   Reescritos aqui com especificidade maior e as transições somadas. */
.sbr-item.sbr-fade {
  transition: opacity .6s cubic-bezier(.2,.7,.3,1),
              transform .6s cubic-bezier(.2,.7,.3,1),
              box-shadow .3s cubic-bezier(.2,.7,.3,1);
}
.sbr-item.sbr-fade:hover { transform: translateY(-3px) scale(1.02); }

.sbr-setor.sbr-fade {
  transition: opacity .6s cubic-bezier(.2,.7,.3,1),
              transform .6s cubic-bezier(.2,.7,.3,1),
              flex-grow .45s cubic-bezier(.2,.7,.3,1);
}

/* Rede de segurança: sem JavaScript o conteúdo não pode ficar invisível. */
@media (scripting: none) {
  .sbr-fade { opacity: 1; transform: none; }
}

/* ── Acessibilidade: respeitar quem pediu menos movimento ─────────────────── */

@media (prefers-reduced-motion: reduce) {
  .sbr-hero__track,
  .sbr-selo__ring { animation: none !important; }
  .sbr-fade { opacity: 1; transform: none; transition: none; }
  .sbr-btn,
  .sbr-item,
  .sbr-setor,
  .sbr-setor > img { transition: none !important; }
  .sbr-item:hover { transform: none; }
  .sbr-setores__grid:hover .sbr-setor:hover { flex-grow: 1; }
}