/* ==========================================================================
   Sobre (/sobre) · classes .ab-*
   O layout carrega este arquivo em todas as páginas: tudo usa o prefixo .ab-.
   Ritmo: hero com toro de vidro + cartão de identidade, história (texto + para quem trabalhamos hoje)
   com a linha do tempo real, princípios, processo, integrações + empresa, CTA.
   Cada bloco aparece uma vez: sem faixa de métricas (fica na home) e sem cartões "2022 / hoje" (a linha do tempo conta).
   ========================================================================== */

/* ------------------------------------------------------------ hero */
.ab-hero { padding: 48px var(--pad-x) 52px; overflow: hidden; }
.ab-hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 36px; align-items: center; }
.ab-copy { padding: 6px 0 10px; }
.ab-hero h1 { font-size: 52px; line-height: 1.05; letter-spacing: -0.035em; margin: 0; max-width: 640px; }
.ab-hero h1 .grad { padding-bottom: .06em; }
.ab-hero .lead { margin: 20px 0 0; max-width: 540px; }
.ab-ctas { margin-top: 32px; }

/* visual: toro de vidro atrás de um cartão de identidade (o vidro desfoca o toro), o cartão de titularidade e 1 bolha */
.ab-visual { position: relative; height: 476px; }
.ab-glow { position: absolute; left: 50%; top: 46%; width: 460px; height: 460px; margin: -230px 0 0 -230px; border-radius: 50%; background: radial-gradient(closest-side, rgba(167,139,250,.34), rgba(91,140,255,.12) 62%, transparent); filter: blur(10px); pointer-events: none; }
.ab-orbit { position: absolute; left: 50%; top: 50%; width: 620px; height: 620px; margin: -310px 0 0 -310px; stroke: rgba(124, 92, 255, .17); stroke-width: 1; pointer-events: none; }
.ab-torus {
  position: absolute; z-index: 1; width: 420px; height: auto; right: -18px; top: -4px;
  filter: saturate(.82) brightness(1.04) drop-shadow(0 40px 50px rgba(109, 74, 255, .22));
  animation: floaty 10s ease-in-out infinite;
}
.ab-id {
  position: absolute; z-index: 2; left: -6px; bottom: 10px; width: 300px;
  padding: 18px 18px 16px; border-radius: 24px;
  background: rgba(255,255,255,.5);
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255,255,255,.95);
  box-shadow: var(--inset), 0 30px 60px -30px rgba(76,62,170,.48);
}
.ab-id-top { display: flex; align-items: center; gap: 12px; }
.ab-id-mark { width: 42px; height: 42px; flex: none; border-radius: 13px; display: grid; place-items: center; background: #fff; box-shadow: 0 0 0 1px rgba(124,92,255,.14), 0 8px 18px -12px rgba(76,62,170,.5); }
.ab-id-mark .mark { width: 26px; height: 26px; }
.ab-id-name { display: grid; min-width: 0; line-height: 1.3; }
.ab-id-name strong { font-size: 14.5px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.ab-id-name small { font-size: 12.5px; color: var(--subtle-text); font-weight: 500; }
.ab-id-label { margin: 16px 0 8px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--subtle-text); }
.ab-id-fronts { display: flex; flex-wrap: wrap; gap: 6px 5px; }
.ab-id-fronts li { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px 0 3px; border-radius: 999px; background: rgba(255,255,255,.78); box-shadow: 0 0 0 1px rgba(31,36,55,.05); font-size: 12.5px; font-weight: 600; color: var(--ink); }
.ab-id-fronts .ico-xs { width: 24px; height: 24px; border-radius: 50%; box-shadow: none; }
.ab-id-fronts .ico-xs .icon { width: 12px; height: 12px; }
.ab-id-foot { display: flex; align-items: center; gap: 9px; margin: 14px 0 0; font-size: 13px; font-weight: 500; color: var(--muted); }

/* titularidade: único cartão com texto próprio no visual (link para os termos), no canto do toro */
.ab-fc-own { right: -8px; bottom: 74px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 12px; width: 244px; padding: 14px 16px 14px 14px; color: inherit; transition: background-color .25s, box-shadow .25s var(--ease); }
.ab-fc-txt { display: grid; line-height: 1.25; min-width: 0; }
.ab-fc-own small { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.ab-fc-own strong { margin-top: 3px; padding-right: 18px; font-size: 15.5px; font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; color: var(--ink); }
.ab-fc-own em { margin-top: 6px; font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--violet-strong); }
.ab-fc-go { position: absolute; right: 12px; top: 12px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); background: rgba(255,255,255,.9); box-shadow: 0 0 0 1px rgba(31,36,55,.06); transition: background-color .25s, color .25s; }
.ab-fc-go .icon { width: 13px; height: 13px; }
@media (hover: hover) and (pointer: fine) {
  .ab-fc-own:hover { background: rgba(255,255,255,.86); }
  .ab-fc-own:hover .ab-fc-go { color: #fff; background: var(--ink); }
}
.ab-star { width: 64px; height: 64px; left: 4px; top: 40px; }

/* ------------------------------------------------------------ história */
.ab-story-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 56px; align-items: center; }
.ab-story-copy h2 { max-width: 560px; margin: 0 0 22px; }
.ab-story-copy p:not(.eyebrow) { max-width: 560px; color: var(--muted); font-size: 16px; line-height: 1.7; text-wrap: pretty; }
.ab-story-copy p:not(.eyebrow) + p { margin-top: 12px; }
/* para quem trabalhamos hoje: cartão de vidro com os setores em 2 colunas de linhas compactas */
.ab-today {
  padding: 20px; border-radius: var(--r-card);
  background: var(--glass-card); border: 1px solid #fff; box-shadow: var(--inset), var(--shadow-card);
}
.ab-today-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 2px 14px; }
.ab-today-head h3 { margin: 0; font-size: 16.5px; letter-spacing: -0.02em; }
.ab-today-head .link-arrow { font-size: 13.5px; color: var(--violet-strong); white-space: nowrap; }
.ab-today-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.ab-today-list > li { min-width: 0; }
.ab-sec {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 7px 10px 7px 7px; border-radius: 14px;
  background: rgba(255,255,255,.6); box-shadow: 0 0 0 1px rgba(31,36,55,.05); color: var(--ink);
  font-size: 13.5px; font-weight: 600; line-height: 1.25; letter-spacing: -0.005em;
  transition: background-color .2s, box-shadow .2s, transform .25s var(--ease);
}
.ab-sec .ico-xs { flex: none; }
.ab-sec-name { min-width: 0; text-wrap: balance; }
@media (hover: hover) and (pointer: fine) {
  .ab-sec:hover { background: #fff; transform: translateY(-1px); box-shadow: 0 10px 20px -14px rgba(76,62,170,.5), 0 0 0 1px rgba(124,92,255,.18); }
}
.ab-today-note { margin: 14px 2px 0; font-size: 13.5px; color: var(--muted); }
.ab-today-note .link { white-space: nowrap; }
.ab-tl { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--line); }
.ab-tl-label { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 22px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.ab-tl-label .icon { color: var(--violet); }

/* ------------------------------------------------------------ princípios */
.ab-values { overflow: hidden; }
.ab-orb { width: 150px; right: 52px; top: 34px; opacity: .95; }
.ab-values .section-head { padding-right: 180px; }
.ab-values-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ab-value { padding: 22px 22px 24px; }
.ab-value-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 18px; }
.ab-value .card-icon { margin: 0; }
.ab-value-num { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; color: rgba(31,36,55,.18); }
.ab-value h3 { font-size: 16.5px; margin: 0 0 8px; }
.ab-value p { font-size: 14.5px; text-wrap: pretty; }

/* ------------------------------------------------------------ integrações + a empresa */
.ab-row > .panel { display: flex; flex-direction: column; }
.ab-row > .panel h2 { font-size: 28px; margin: 0; }
.ab-row .app-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ab-row .app-tile { align-content: start; padding-top: 20px; }
.ab-row .app-tile span { white-space: nowrap; font-size: 12px; letter-spacing: -0.005em; }
.ab-int-note { display: flex; align-items: center; gap: 12px; margin: 24px 0 0; font-size: 14.5px; color: var(--muted); }
.ab-int-note .ico { flex: none; }
.ab-company { background: linear-gradient(160deg, rgba(255,255,255,.62), rgba(238,232,255,.55)); }
.ab-company .sub { max-width: 340px; }
.ab-capsule { width: 190px; right: -46px; top: -40px; --rot: -28deg; transform: rotate(var(--rot)); opacity: .9; }
.ab-company .contact-rows { margin-top: 18px; }
.ab-company > .btn { align-self: flex-start; }
.ab-cnpj { display: flex; align-items: center; gap: 8px; margin: auto 0 0; padding-top: 20px; font-size: 13px; color: var(--subtle-text); }
.ab-cnpj .icon { flex: none; color: var(--subtle); }

/* ==========================================================================
   Responsivo
   ========================================================================== */
@media (max-width: 1220px) {
  .ab-hero h1 { font-size: 48px; }
  .ab-visual { height: 440px; }
  .ab-torus { width: 360px; }
  .ab-id { width: 296px; }
  .ab-values-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-story-grid { gap: 40px; }
}
/* hero em 2 colunas estreitas: o cartão de titularidade sobe para o vidro do toro, acima do cartão de identidade (sem se cobrirem) */
@media (min-width: 1081px) and (max-width: 1220px) {
  .ab-fc-own { width: 230px; right: -10px; top: 34px; bottom: auto; }
  .ab-fc-own strong { font-size: 14.5px; }
}
@media (max-width: 1080px) {
  .ab-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .ab-hero h1 { font-size: 46px; }
  .ab-visual { max-width: 560px; width: 100%; margin: 0 auto; }
  .ab-story-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  /* cartão dos setores na largura toda: 5 colunas, ícone acima do nome */
  .ab-today-list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .ab-sec { flex-direction: column; align-items: flex-start; gap: 8px; padding: 10px 10px 12px; }
  /* painéis empilhados: as 10 integrações numa linha só */
  .ab-row .app-tiles { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 8px; }
  .ab-row .app-tile { padding-inline: 2px; }
  .ab-row .app-tile span { font-size: 11.5px; letter-spacing: -0.01em; }
}
@media (max-width: 860px) {
  .ab-row .app-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
  .ab-row .app-tile span { font-size: 12px; }
  .ab-hero h1 { font-size: 40px; }
  .ab-values .section-head { padding-right: 120px; }
  .ab-orb { width: 110px; right: 24px; top: 28px; }
  /* 2 colunas de linhas (3 deixariam um setor sozinho na última linha) */
  .ab-today-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-sec { flex-direction: row; align-items: center; gap: 10px; padding: 7px 10px 7px 7px; }
}
@media (min-width: 721px) and (max-width: 1080px) {
  .ab-company .contact-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
}
@media (max-width: 720px) {
  .ab-hero { padding: 26px var(--pad-x) 28px; }
  .ab-hero h1 { font-size: 35px; line-height: 1.07; }
  .ab-hero .lead { margin-top: 14px; font-size: 16px; }
  .ab-ctas { margin-top: 24px; }
  .ab-ctas .btn { flex: 1 1 auto; }
  .ab-visual { height: 408px; margin-top: 6px; }
  .ab-glow { width: 320px; height: 320px; margin: -160px 0 0 -160px; }
  .ab-orbit { width: 420px; height: 420px; margin: -210px 0 0 -210px; }
  .ab-torus { width: 250px; right: -14px; top: 6px; }
  .ab-id { left: 0; bottom: 4px; width: min(300px, 90%); padding: 14px 14px 12px; border-radius: 20px; }
  .ab-id-mark { width: 36px; height: 36px; border-radius: 11px; }
  .ab-id-mark .mark { width: 22px; height: 22px; }
  .ab-id-name strong { font-size: 13.5px; }
  .ab-id-name small { font-size: 12px; }
  .ab-id-label { margin: 12px 0 7px; padding-top: 10px; }
  .ab-id-fronts { gap: 5px; }
  .ab-id-fronts li { height: 30px; padding-right: 9px; font-size: 12.5px; gap: 6px; }
  .ab-id-fronts .ico-xs { width: 24px; height: 24px; }
  .ab-id-fronts .ico-xs .icon { width: 12px; height: 12px; }
  .ab-id-foot { margin-top: 10px; font-size: 12.5px; }
  /* celular: titularidade no alto, à esquerda do toro (o cartão de identidade ocupa a base) */
  .ab-fc-own { left: 0; right: auto; top: 4px; bottom: auto; width: 222px; padding: 11px 14px 11px 11px; column-gap: 10px; border-radius: 16px; }
  .ab-fc-own .ico-sm { width: 32px; height: 32px; }
  .ab-fc-own strong { font-size: 14.5px; }
  .ab-fc-own em { margin-top: 4px; font-size: 12px; }
  .ab-fc-go { display: none; }
  .ab-star { width: 50px; height: 50px; left: auto; right: 10px; top: 104px; }

  .ab-story-grid { gap: 24px; }
  .ab-story-copy h2 { margin-bottom: 16px; }
  .ab-story-copy p:not(.eyebrow) { font-size: 15.5px; line-height: 1.65; }
  .ab-today { padding: 14px; border-radius: 20px; }
  .ab-today-head { margin-bottom: 12px; }
  .ab-today-head h3 { font-size: 15.5px; }
  .ab-today-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-sec { min-height: 46px; padding: 7px 8px 7px 7px; gap: 8px; font-size: 13px; }
  .ab-tl { margin-top: 32px; padding-top: 24px; }
  .ab-tl-label { margin-bottom: 18px; }
  /* o parcial esconde os projetos no celular; aqui eles aparecem (o rótulo promete "projetos reais"),
     abaixo do ano + título, numa coluna só (a grade de 2 colunas do tablet não cabe em 390 px) */
  .ab-tl .history:not(.history-compact) li { display: block; padding-bottom: 20px; }
  .ab-tl .history .chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

  .ab-values .section-head { padding-right: 84px; }
  .ab-orb { width: 84px; right: 14px; top: 22px; }
  .ab-values-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .ab-value { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; padding: 16px; }
  .ab-value-top { grid-row: span 2; margin: 0; }
  .ab-value .card-icon { width: 40px; height: 40px; }
  .ab-value-num { display: none; }
  .ab-value h3 { font-size: 16px; margin: 2px 0 4px; }
  .ab-value p { font-size: 14px; }

  .ab-row > .panel h2 { font-size: 26px; }
  /* 10 integrações em 2 colunas de linhas (4 colunas deixariam 2 tiles sozinhos na última linha) */
  .ab-row .app-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 22px; }
  .ab-row .app-tile { grid-auto-flow: column; justify-content: start; justify-items: start; align-items: center; align-content: center; gap: 10px; min-height: 52px; padding: 10px 12px; border-radius: 14px; }
  .ab-row .app-tile img, .ab-row .app-tile > .icon { width: 22px; height: 22px; }
  .ab-row .app-tile span { font-size: 13.5px; color: var(--text); text-align: left; }
  .ab-int-note { align-items: flex-start; font-size: 14px; }
  .ab-capsule { width: 120px; right: -30px; top: -26px; }
  .ab-company .sub { padding-right: 56px; }
  .ab-cnpj { align-items: flex-start; }
  .ab-cnpj .icon { margin-top: 2px; }
}
@media (max-width: 380px) {
  .ab-hero h1 { font-size: 31px; }
  .ab-visual { height: 416px; }
  .ab-id { width: 248px; }
  .ab-torus { width: 226px; }
  .ab-fc-own { width: 206px; }
}

/* nomes longos de projeto na linha do tempo (colunas estreitas): chip de 2 linhas com cantos suaves, nunca cortado */
.ab-tl .history .chip { height: auto; min-height: 30px; padding-block: 5px; border-radius: 13px; line-height: 1.25; text-wrap: balance; }