/* =========================================================
   12/10/2026 · "O que fazemos" e "Onde atuamos" (versão C, escolhida pelo Anderson)
   13/10: nomes da lista menores que o título da dobra (pedido do Anderson); texto de abertura no eixo do título.
   Linhas de fora a fora: número, nome grande e palavras-chave à direita (inspirado na referência dele).
   Fundo com poucas palavras enormes e discretas (45 vw, 4%). Textos de abertura sem aspas (13/10).
   Testes das outras versões (B lateral, D aspas) em _arquivo/testes-antigos/2026-10-12-o-que-fazemos-versoes-B-C-D.
   ========================================================= */
.ab{position:relative;isolation:isolate;overflow:clip;color:#fff;background:#190027;padding:var(--section-y) 0;
  --ab-size:45vw;--ab-ink:.018}   /* 12/10: bem mais suave (era .04): o fundo não briga com o texto */
.ab--mercados{background:#0b0412}

/* palavras do fundo */
.ab__bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%)}
.ab__row{position:absolute;left:0;white-space:nowrap;font-size:var(--ab-size);font-weight:700;line-height:.9;letter-spacing:-.045em;color:rgba(214,190,255,var(--ab-ink));will-change:transform}
.ab__row.is-line{color:transparent;-webkit-text-stroke:1px rgba(214,190,255,calc(var(--ab-ink) * 2.2))}
.ab__row span{padding-right:.3em}

.ab__pin{position:relative;z-index:1}

/* cabeçalho: símbolo das aspas no círculo, título e texto centralizados */
.ab__head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(18px,2vw,28px);padding:0 var(--gutter)}
.ab__mark{position:relative;display:grid;place-items:center;width:clamp(52px,4.2vw,66px);aspect-ratio:1;border:1px solid rgba(255,255,255,.45);border-radius:50%;margin-bottom:clamp(6px,1vw,16px)}
.ab__mark.is-drawn{border-color:transparent}
.ab__ring{position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);overflow:visible;transform:rotate(-90deg)}
.ab__ring circle{fill:none;stroke:rgba(255,255,255,.45);stroke-width:1px;vector-effect:non-scaling-stroke}
.ab__mark > svg:not(.ab__ring){width:46%;height:auto;overflow:visible}
.ab__mark > svg:not(.ab__ring) path{fill:var(--green);stroke:var(--green);stroke-width:1.4px;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.ab__title{font-size:var(--t-titulo);font-weight:300;line-height:1.08;letter-spacing:-.025em;color:#fff}
.ab__title strong{font-weight:700}
.ab__aside{position:relative}   /* 13/10: sem as aspas ao lado do texto (pedido do Anderson) */
.ab__lead{width:min(520px,100%);font-size:var(--p-size);font-weight:300;line-height:var(--p-leading);letter-spacing:var(--p-tracking);color:rgba(255,255,255,.82);text-wrap:pretty}

/* linhas */
.ab__list{list-style:none;margin:clamp(48px,6vw,96px) 0 0;padding:0;border-bottom:1px solid rgba(255,255,255,.22)}
.ab__item{--line:1;position:relative;display:grid;grid-template-columns:clamp(48px,5.6vw,104px) minmax(0,1fr) auto;align-items:center;column-gap:clamp(10px,1.4vw,24px);padding:clamp(14px,1.5vw,26px) var(--gutter)}
.ab__item::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:rgba(255,255,255,.22);transform-origin:left;transform:scaleX(var(--line))}
.ab__num{font-size:clamp(18px,2vw,32px);font-weight:300;line-height:1;color:#fff}
.ab__name{display:block;font-size:clamp(28px,3.4vw,52px);font-weight:700;letter-spacing:-.04em;line-height:1;white-space:nowrap;color:#fff}
.ab__desc{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}   /* o texto segue na página (leitura e Google), sem aparecer */
.ab__tags{display:flex;flex-direction:column;align-items:flex-end;text-align:right;font-size:9px;font-weight:600;letter-spacing:.14em;line-height:1.45;text-transform:uppercase;color:rgba(255,255,255,.86)}
.ab__num,.ab__name,.ab__tags{transition:color .6s cubic-bezier(.16,.7,.2,1)}
.ab__item.is-on .ab__num{color:var(--green)}
.ab__item.is-dim .ab__num,.ab__item.is-dim .ab__name{color:rgba(255,255,255,.26)}   /* esmaece pela cor: a entrada usa a opacidade */
.ab__item.is-dim .ab__tags{color:rgba(255,255,255,.3)}


@media(max-width:900px){
  .ab__item{grid-template-columns:clamp(30px,8vw,44px) minmax(0,1fr);row-gap:8px}
  .ab__name{font-size:clamp(22px,6vw,30px);white-space:normal}
  .ab__tags{grid-column:2;flex-direction:row;flex-wrap:wrap;align-items:flex-start;justify-content:flex-start;text-align:left;gap:2px 12px;font-size:8.5px}
}
@media(max-width:720px){.ab__head,.ab__item{padding-left:var(--inset);padding-right:var(--inset)}.ab__aside{align-self:stretch}.ab__lead{width:auto;text-align:left}}   /* celular: texto alinhado à esquerda, de margem a margem */

/* 12/10: máscara das palavras com folga (a entrada sobe de dentro dela): acentos e letras que descem (g, ç) não são cortados */
.ab__name > div,.ab__title > div,.ab__title strong > div{padding:.14em 0 .26em!important;margin:-.14em 0 -.26em!important}

/* 13/10/2026 (pedido do Anderson): palavras-chave 20% maiores e itens com mais respiro (mais harmônico com os nomes) */
.ab__item{padding-top:clamp(17px,1.8vw,31px);padding-bottom:clamp(17px,1.8vw,31px)}
.ab__tags{font-size:10.8px;line-height:1.6}
@media(max-width:900px){.ab__tags{font-size:10.2px;gap:3px 14px}}