/* ==========================================================================
   Régis Henrique Munhoz da Cruz
   Identidade pessoal — Finance, Data & AI
   Paleta BAPOS: preto quente, dourado da marca e branco.
   Dourado = experiência profissional · Branco/prata = formação acadêmica
   ========================================================================== */

:root{
  /* base — preto quente do site da BAPOS */
  --preto:     #0A0000;
  --preto-2:   #120E09;
  --preto-3:   #1C1610;
  --card:      #141009;
  --linha:     rgba(255,255,255,.10);
  --linha-2:   rgba(255,255,255,.20);

  /* dourado da marca */
  --ouro:      #D4AF37;
  --champanhe: #F5D798;
  --bronze:    #8B6F34;
  --ouro-vd:   rgba(212,175,55,.13);
  --ouro-ln:   rgba(212,175,55,.42);

  /* branco/prata — formação acadêmica */
  --prata:     #F2EEE6;
  --prata-2:   #C9C2B4;
  --prata-vd:  rgba(242,238,230,.10);

  --t1: rgba(255,255,255,.96);
  --t2: rgba(246,242,235,.66);
  --t3: rgba(246,242,235,.42);

  /* o gradiente oficial da BAPOS */
  --grad:      linear-gradient(17deg,#F5D798 0%,#8B6F34 64%);
  --grad-luz:  linear-gradient(17deg,#FFE9B8 0%,#A0803C 64%);
  --grad-prata:linear-gradient(17deg,#FFFFFF 0%,#A9A296 64%);

  --f-tit: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-txt: "Inter", "Helvetica Neue", Arial, sans-serif;
  --f-mono:"JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --gut: clamp(18px, 4.5vw, 44px);
  --sec: clamp(72px, 10vw, 150px);
  --max: 1180px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --out:  cubic-bezier(.16,1,.3,1);
  --topo-h: 66px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:90px;
  overflow-x:clip; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; background:var(--preto); color:var(--t1);
  font-family:var(--f-txt); font-size:17px; line-height:1.65; letter-spacing:-.008em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}
img,svg,canvas{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
h1,h2,h3,h4{ margin:0; font-family:var(--f-tit); font-weight:800; line-height:1.04; letter-spacing:-.032em; }
p{ margin:0 0 1.1em; } p:last-child{ margin-bottom:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
::selection{ background:var(--ouro); color:#0A0000; }
:focus-visible{ outline:2px solid var(--ouro); outline-offset:3px; border-radius:6px; }

/* ---------------------------------------------------------- layout */
.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gut); }
.wrap-largo{ max-width:1320px; }
.sec{ padding-block:var(--sec); position:relative; overflow:clip; }
.sec-sm{ padding-block:clamp(56px,7vw,96px); position:relative; overflow:clip; }
.faixa-2{ background:var(--preto-2); }
.acima{ position:relative; z-index:2; }

.brilho{ position:absolute; z-index:0; pointer-events:none; border-radius:50%; filter:blur(10px); }
.brilho-ouro{ background:radial-gradient(circle at center, rgba(212,175,55,.16), transparent 66%); }
.b-td{ width:min(120vw,900px); aspect-ratio:1; top:-26%; right:-16%; }
.b-be{ width:min(110vw,760px); aspect-ratio:1; bottom:-30%; left:-14%; }

/* malha técnica de fundo */
.malha{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(var(--linha) 1px,transparent 1px),
                   linear-gradient(90deg,var(--linha) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 65% 55% at 50% 30%,#000 5%,transparent 72%);
  mask-image:radial-gradient(ellipse 65% 55% at 50% 30%,#000 5%,transparent 72%); }

/* ---------------------------------------------------------- tipografia */
.display{ font-size:clamp(2.3rem,6.4vw,4.6rem); line-height:1.0; letter-spacing:-.04em; }
.h1{ font-size:clamp(1.95rem,4.4vw,3.2rem); letter-spacing:-.035em; }
.h2{ font-size:clamp(1.6rem,3.2vw,2.35rem); letter-spacing:-.03em; }
.h3{ font-size:clamp(1.18rem,2vw,1.5rem); letter-spacing:-.026em; line-height:1.18; }
.h4{ font-size:1.05rem; font-weight:700; letter-spacing:-.018em; line-height:1.3; }

.lead{ font-size:clamp(1.05rem,1.5vw,1.26rem); line-height:1.6; color:var(--t2); letter-spacing:-.012em; }
.corpo{ font-size:1.04rem; line-height:1.74; color:var(--t2); }
.pequeno{ font-size:.88rem; line-height:1.6; color:var(--t3); }

.olho{ font-family:var(--f-mono); font-size:.72rem; font-weight:500; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ouro); display:inline-flex; align-items:center; gap:10px;
  margin:0 0 20px; }
.olho::before{ content:""; width:24px; height:1px; background:var(--grad); flex:none; }

.g-ouro{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* palavra-chave destacada (bom para leitura e para o Google) */
.chave{ color:var(--t1); font-weight:600; box-shadow:inset 0 -.42em 0 var(--ouro-vd); }

/* ---------------------------------------------------------- botões */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.55em; padding:15px 28px;
  border-radius:12px; font-size:.93rem; font-weight:700; line-height:1; min-height:50px;
  position:relative; overflow:hidden;
  transition:transform .32s var(--ease), box-shadow .32s var(--ease), border-color .3s, color .3s, background-color .3s; }
.btn:hover{ transform:translateY(-2px); }
.btn .ic{ flex:none; transition:transform .32s var(--ease); }
.btn:hover .ic{ transform:translateX(3px); }
.btn-ouro{ background:var(--grad); color:#0A0000; box-shadow:0 10px 28px -12px rgba(212,175,55,.7); }
.btn-ouro:hover{ box-shadow:0 16px 38px -12px rgba(212,175,55,.85); }
.btn-linha{ border:1px solid var(--linha-2); color:var(--t1); }
.btn-linha:hover{ border-color:var(--ouro); color:var(--champanhe); }
.btns{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }

/* ---------------------------------------------------------- topo */
.topo{ position:sticky; top:0; z-index:90; border-bottom:1px solid transparent;
  transition:background-color .35s var(--ease), border-color .35s; }
.topo.colado{ background:rgba(5,7,13,.86); backdrop-filter:saturate(170%) blur(18px);
  -webkit-backdrop-filter:saturate(170%) blur(18px); border-bottom-color:var(--linha); }
.topo-in{ display:flex; align-items:center; justify-content:space-between; height:var(--topo-h); gap:18px; }
.marca{ display:inline-flex; align-items:center; gap:11px; font-family:var(--f-tit); font-weight:800;
  font-size:1.02rem; letter-spacing:-.02em; white-space:nowrap; }
.marca > span:last-child{ white-space:nowrap; }
.marca-sigla{ width:36px; height:36px; border-radius:10px; background:var(--grad); color:#0A0000;
  display:grid; place-items:center; font-size:.82rem; letter-spacing:-.04em; flex:none; }
.marca-foto{ width:36px; height:36px; border-radius:50%; object-fit:cover; flex:none;
  box-shadow:0 0 0 1.5px var(--ouro-ln), 0 0 0 4px rgba(212,175,55,.10);
  transition:box-shadow .35s var(--ease); }
.marca:hover .marca-foto{ box-shadow:0 0 0 1.5px var(--ouro), 0 0 0 5px rgba(212,175,55,.18); }
.marca small{ display:block; font-family:var(--f-mono); font-size:.58rem; font-weight:400;
  letter-spacing:.14em; text-transform:uppercase; color:var(--t3); margin-top:3px; }
.menu{ display:flex; align-items:center; gap:clamp(14px,2vw,26px); }
.menu a{ font-size:.86rem; font-weight:500; color:var(--t2); white-space:nowrap; position:relative;
  padding-block:6px; transition:color .25s; }
.menu a::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; border-radius:2px;
  background:var(--grad); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease); }
.menu a:hover{ color:#fff; } .menu a:hover::after{ transform:scaleX(1); }
.topo-dir{ display:flex; align-items:center; gap:12px; }

/* seletor de idioma */
.idiomas{ display:inline-flex; align-items:center; gap:2px; padding:4px; border-radius:11px;
  border:1px solid var(--linha); background:rgba(255,255,255,.03); }
.idiomas a{ display:inline-flex; align-items:center; gap:6px; padding:7px 11px; border-radius:8px;
  font-family:var(--f-mono); font-size:.72rem; font-weight:500; letter-spacing:.06em; color:var(--t3);
  transition:background-color .25s, color .25s; }
.idiomas a:hover{ color:var(--t1); background:rgba(255,255,255,.06); }
.idiomas a[aria-current="true"]{ background:var(--grad); color:#0A0000; font-weight:700; }
.bandeira{ width:17px; height:12px; border-radius:2px; flex:none; }

.hamb{ display:none; width:44px; height:44px; align-items:center; justify-content:center;
  border-radius:11px; color:#fff; }
.hamb span{ display:block; width:20px; height:2px; background:currentColor; position:relative; transition:background-color .2s; }
.hamb span::before,.hamb span::after{ content:""; position:absolute; left:0; width:20px; height:2px;
  background:currentColor; transition:transform .3s var(--ease); }
.hamb span::before{ top:-6px; } .hamb span::after{ top:6px; }
.aberto .hamb span{ background:transparent; }
.aberto .hamb span::before{ transform:translateY(6px) rotate(45deg); }
.aberto .hamb span::after{ transform:translateY(-6px) rotate(-45deg); }
.gaveta{ position:fixed; inset:var(--topo-h) 0 auto 0; background:rgba(5,7,13,.98);
  backdrop-filter:blur(18px); border-bottom:1px solid var(--linha); padding:10px var(--gut) 26px;
  display:none; z-index:89; }
.aberto .gaveta{ display:block; animation:baixa .34s var(--out); }
.gaveta a{ display:block; padding:14px 0; font-size:1.08rem; font-weight:700; letter-spacing:-.02em;
  border-bottom:1px solid var(--linha); }
@keyframes baixa{ from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:none} }
@media (max-width:1040px){ .menu{ display:none; } .hamb{ display:flex; } }
@media (max-width:700px){ .idiomas a span{ display:none; } .idiomas a{ padding:7px 9px; } }
@media (max-width:640px){ .marca > span:last-child{ display:none; } .topo-in{ gap:10px; } }

/* ---------------------------------------------------------- revelação */
.rev{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--out), transform .8s var(--out); }
.rev.vis{ opacity:1; transform:none; }
.d1{transition-delay:.07s}.d2{transition-delay:.14s}.d3{transition-delay:.21s}
.d4{transition-delay:.28s}.d5{transition-delay:.35s}
@media (prefers-reduced-motion: reduce){ .rev{ opacity:1; transform:none; transition:none; } }

/* ---------------------------------------------------------- capa */
.capa{ position:relative; overflow:hidden; padding-block:clamp(48px,7vw,86px) clamp(56px,8vw,104px); }
.capa-grade{ display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(30px,5vw,64px); align-items:center; }
@media (max-width:900px){ .capa-grade{ grid-template-columns:1fr; } }
.capa h1{ margin-bottom:6px; }
.capa .cargo{ font-family:var(--f-mono); font-size:clamp(.82rem,1.5vw,1rem); letter-spacing:.08em;
  text-transform:uppercase; margin:16px 0 0; }
.capa .lead{ max-width:52ch; margin-top:22px; }
.capa .btns{ margin-top:34px; }

.retrato{ position:relative; border-radius:20px; padding:2px; background:var(--grad);
  box-shadow:0 30px 70px -36px rgba(212,175,55,.45); }
.retrato img{ border-radius:18px; width:100%; height:auto; display:block; }
.retrato-tag{ position:absolute; left:50%; bottom:16px; transform:translateX(-50%);
  background:rgba(5,7,13,.9); backdrop-filter:blur(8px); border:1px solid var(--linha-2);
  border-radius:999px; padding:8px 16px; font-family:var(--f-mono); font-size:.68rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--champanhe); white-space:nowrap; }

/* linha de instituições */
.instituicoes{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:30px; }
.inst{ width:46px; height:46px; border-radius:11px; overflow:hidden; border:1px solid var(--linha);
  background:#fff; flex:none; transition:transform .3s var(--ease), border-color .3s; }
.inst img{ width:100%; height:100%; object-fit:cover; }
.inst:hover{ transform:translateY(-3px); border-color:var(--ouro); }
.instituicoes .rotulo{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--t3); width:100%; margin-bottom:2px; }

/* ---------------------------------------------------------- números */
.numeros{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
/* no tablet, quatro colunas de número ficam estreitas demais */
@media (max-width:900px){ .numeros{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.num{ border:1px solid var(--linha); border-radius:16px; padding:22px 20px; background:var(--card);
  transition:border-color .35s, transform .35s var(--ease); }
.num:hover{ border-color:var(--ouro); transform:translateY(-3px); }
.num b{ display:block; font-family:var(--f-tit); font-weight:800; font-size:clamp(2rem,3.8vw,2.9rem);
  line-height:1; letter-spacing:-.04em; margin-bottom:10px; font-variant-numeric:tabular-nums;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.num-rot{ display:block; font-size:.92rem; font-weight:700; color:var(--t1); line-height:1.25;
  margin-bottom:6px; }
.num-det{ display:block; font-size:.8rem; color:var(--t3); line-height:1.45; }

/* Destaques: conquistas com numero forte */
.destaques{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px;
  margin-top:clamp(20px,2.4vw,28px); }
@media (max-width:860px){ .destaques{ grid-template-columns:minmax(0,1fr); } }
.destaque{ position:relative; border:1px solid var(--linha); border-radius:16px;
  padding:26px 24px; background:linear-gradient(160deg,rgba(212,175,55,.07),transparent 62%),var(--card);
  transition:border-color .35s, transform .35s var(--ease); }
.destaque:hover{ border-color:var(--ouro); transform:translateY(-3px); }
.destaque b{ display:block; font-family:var(--f-tit); font-weight:800; font-size:1.55rem;
  letter-spacing:-.035em; line-height:1; margin-bottom:14px;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.destaque h3{ margin-bottom:8px; }
.destaque p{ font-size:.87rem; line-height:1.55; color:var(--t3); }

/* ---------------------------------------------------------- linha do tempo
   Eixo em escala de tempo real: a grade tem uma linha por mês, de jan/2013
   a dez/2026. Cada marco recebe --r (linha inicial / linha final) e --c
   (coluna), calculados no gerador a partir das datas. Por isso duas coisas
   que aconteceram juntas aparecem na mesma altura. */
.tl-filtros{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:clamp(24px,3vw,36px); }
.tl-filtro{ padding:9px 18px; border-radius:999px; border:1px solid var(--linha); font-size:.84rem;
  font-weight:600; color:var(--t2); transition:background-color .28s, color .28s, border-color .28s; }
.tl-filtro:hover{ border-color:var(--linha-2); color:#fff; }
.tl-filtro.on{ background:var(--grad); border-color:transparent; color:#0A0000; }
.tl-filtro.on.prata{ background:var(--grad-prata); color:#0A0000; }

.tl-legenda{ display:flex; flex-wrap:wrap; gap:18px; justify-content:center;
  margin-bottom:clamp(20px,2.4vw,30px); font-size:.78rem; color:var(--t3); }
.tl-legenda span{ display:inline-flex; align-items:center; gap:7px; }
.tl-legenda i{ width:9px; height:9px; border-radius:50%; border:2px solid var(--ouro); }
.tl-legenda .lg-form i{ border-color:var(--prata); }
.tl-legenda .lg-cert i{ border-color:var(--t3); }

.tl{ display:grid; position:relative; column-gap:0; }
.tl-item{ grid-row:var(--r); grid-column:var(--c); position:relative;
  padding:0 clamp(8px,1vw,14px) 10px; min-width:0; }
.tl-item.oculto{ display:none; }

/* eixo central, com as marcas de ano */
.tl-eixo{ grid-column:var(--c); grid-row:1 / -1; position:relative;
  display:grid; grid-template-rows:subgrid; justify-items:center; }
.tl-eixo::before{ content:""; position:absolute; left:50%; top:0; bottom:0; width:2px;
  margin-left:-1px; background:linear-gradient(180deg,transparent,var(--ouro-ln) 6%,
  var(--ouro-ln) 94%,transparent); }
.tl-ano{ grid-row:var(--r); position:relative; z-index:2; font-family:var(--f-mono);
  font-size:.7rem; font-weight:500; letter-spacing:.08em; color:var(--t3);
  background:var(--preto-2); border:1px solid var(--linha); border-radius:999px;
  padding:3px 9px; align-self:start; margin-top:-9px;
  transition:color .3s, border-color .3s; }

/* traço até o eixo + marcador da duração */
.tl-item::before{ content:""; position:absolute; top:19px; width:14px; height:1px;
  background:var(--linha-2); }
.tl-item::after{ content:""; position:absolute; top:10px; bottom:2px; width:3px;
  border-radius:3px; background:var(--ouro); opacity:.5; transition:opacity .3s; }
.tl-item::first-line{}
.tl-item:hover::after{ opacity:1; }
.tl-item[data-col="exp"]::before{ right:0; }
.tl-item[data-col="exp"]::after{ right:-3px; }
.tl-item[data-col="form"]::before{ left:0; }
.tl-item[data-col="form"]::after{ left:-3px; background:var(--prata); }
.tl-item[data-col="cert"]::before{ display:none; }
.tl-item[data-col="cert"]::after{ left:-3px; background:var(--t3); }

/* cartões */
.card-tl{ border:1px solid var(--linha); border-radius:14px; padding:clamp(13px,1.4vw,16px);
  background:var(--card); position:relative;
  transition:border-color .3s, transform .3s var(--ease), box-shadow .3s; }
.card-tl:hover{ border-color:var(--ouro-ln); transform:translateY(-2px); }
[data-col="form"] .card-tl:hover{ border-color:var(--prata-2); }
.card-topo{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom:9px; }
.card-tl .periodo{ font-family:var(--f-mono); font-size:.67rem; letter-spacing:.06em;
  color:var(--ouro); white-space:nowrap; }
[data-col="form"] .card-tl .periodo{ color:var(--prata); }
[data-col="cert"] .card-tl .periodo{ color:var(--t3); }
.card-tl .h4{ margin-bottom:3px; font-size:.97rem; line-height:1.24; }
.card-tl .org{ font-size:.84rem; color:var(--t2); font-weight:600; margin-bottom:8px; display:block; }
.card-tl ul li{ position:relative; padding-left:15px; margin-bottom:4px; font-size:.855rem;
  line-height:1.5; color:var(--t2); }
.card-tl ul li::before{ content:""; position:absolute; left:0; top:.62em; width:7px; height:1.5px;
  border-radius:2px; background:var(--ouro); }
[data-col="form"] .card-tl ul li::before{ background:var(--prata); }
.card-tl .logo-org{ width:38px; height:38px; border-radius:9px; overflow:hidden; background:#fff;
  flex:none; display:grid; place-items:center; }
.card-tl .logo-org img{ width:100%; height:100%; object-fit:contain; }
.logo-txt{ background:var(--grad) !important; color:#0A0000; font-family:var(--f-tit);
  font-weight:800; font-size:.78rem; letter-spacing:-.02em; }
[data-col="form"] .logo-txt{ background:var(--grad-prata) !important; }
.card-tl .tags{ display:flex; flex-wrap:wrap; gap:5px; margin-top:9px; }
.card-tl .tag{ font-family:var(--f-mono); font-size:.61rem; letter-spacing:.03em; padding:3px 8px;
  border-radius:6px; background:var(--ouro-vd); color:var(--champanhe); }
[data-col="form"] .card-tl .tag{ background:var(--prata-vd); color:var(--prata); }
.marco{ box-shadow:0 0 0 1px var(--ouro-vd), 0 18px 46px -30px rgba(212,175,55,.55); }

/* vários cargos na mesma empresa */
.cargos{ margin-top:12px; padding-left:20px; position:relative; }
.cargos::before{ content:""; position:absolute; left:4px; top:6px; bottom:8px; width:0;
  border-left:2px dashed rgba(212,175,55,.45); }
.tl-cargo{ position:relative; padding-bottom:12px; }
.tl-cargo:last-child{ padding-bottom:0; }
.tl-cargo::before{ content:""; position:absolute; left:-20px; top:6px; width:9px; height:9px;
  border-radius:50%; background:var(--preto-2); border:2px solid var(--ouro); }
.tl-cargo-periodo{ font-family:var(--f-mono); font-size:.63rem; letter-spacing:.06em;
  color:var(--t3); display:block; margin-bottom:2px; }
.tl-cargo .h4{ font-size:.9rem; margin-bottom:5px; }
.tl-cargo ul li{ padding-left:14px; font-size:.82rem; }
.tl-cargo ul li::before{ width:6px; }

/* certificações: cartão compacto com o símbolo do emissor e a prova */
.card-cert{ padding:11px 12px; }
.cert-linha{ display:flex; align-items:flex-start; gap:10px; }
.cert-txt{ min-width:0; }
.card-cert .h4{ font-size:.85rem; line-height:1.22; }
.card-cert .org{ font-size:.76rem; margin-bottom:2px; }
.card-cert .periodo{ font-size:.64rem; }
.card-cert .logo-org{ width:34px; height:34px; border-radius:8px; }
.cert-foto{ display:block; margin-top:9px; width:100%; border-radius:8px; overflow:hidden;
  border:1px solid var(--linha); position:relative; transition:border-color .3s; }
.cert-foto img{ width:100%; height:auto; display:block; filter:saturate(.9); }
.cert-foto:hover{ border-color:var(--ouro); }

/* miniatura de local (escritório) dentro de um cartão de experiência */
.mini-foto{ display:block; position:relative; margin-top:11px; width:100%; border-radius:10px;
  overflow:hidden; border:1px solid var(--linha); transition:border-color .3s; }
.mini-foto img{ width:100%; height:auto; display:block; }
.mini-foto:hover{ border-color:var(--ouro); }
.mini-foto .lupa{ position:absolute; right:8px; bottom:8px; width:26px; height:26px;
  border-radius:50%; display:grid; place-items:center; background:rgba(10,0,0,.72);
  color:var(--champanhe); backdrop-filter:blur(6px); }
.mini-foto .lupa svg{ width:14px; height:14px; }

/* janela de ampliação (não ocupa a tela toda) */
.lupa-fundo{ position:fixed; inset:0; z-index:200; display:none; place-items:center;
  background:rgba(5,3,0,.82); backdrop-filter:blur(6px); padding:24px; }
.lupa-fundo.aberta{ display:grid; }
.lupa-cx{ max-width:min(760px,86vw); max-height:84vh; background:var(--card); border-radius:16px;
  border:1px solid var(--linha-2); padding:12px; box-shadow:0 40px 90px -40px #000;
  animation:sobe .3s var(--out) both; }
.lupa-cx img{ max-width:100%; max-height:70vh; width:auto; height:auto; border-radius:9px; margin-inline:auto; }
.lupa-cx figcaption{ font-size:.82rem; color:var(--t2); text-align:center; margin-top:10px; }
.lupa-fechar{ position:absolute; top:18px; right:18px; width:40px; height:40px; border-radius:50%;
  background:var(--card); border:1px solid var(--linha-2); color:var(--t1); display:grid;
  place-items:center; font-size:1.2rem; }
@keyframes sobe{ from{ opacity:0; transform:translateY(12px) scale(.98); } }

/* celular: vira uma coluna só, em ordem cronológica */
@media (max-width:900px){
  .tl{ display:flex; flex-direction:column; gap:12px; padding-left:22px; }
  .tl-item{ grid-row:auto; grid-column:auto; padding:0; }
  .tl-item::before{ display:none; }
  .tl-item::after{ left:-22px; right:auto; top:14px; bottom:0; }
  .tl-item[data-col="exp"]::after{ right:auto; left:-22px; }
  .tl-eixo{ display:none; }
  .tl::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
    background:var(--ouro-ln); }
}

/* ---------------------------------------------------------- capitulos
   Blocos centrados na pagina, com a ilustracao alternando de lado. */
.caps{ max-width:1080px; margin-inline:auto; }
.cap{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  gap:clamp(24px,4vw,58px); align-items:center;
  padding-block:clamp(34px,4.4vw,62px); border-bottom:1px solid var(--linha); }
.cap:last-child{ border-bottom:0; }
.cap:nth-child(even) .cap-arte{ order:2; }

.cap-arte{ margin:0; border:1px solid var(--linha); border-radius:18px; overflow:hidden;
  background:linear-gradient(165deg,rgba(212,175,55,.07),transparent 64%),var(--preto-2);
  transition:border-color .45s var(--ease), transform .45s var(--ease); }
.cap:hover .cap-arte{ border-color:var(--ouro-ln); transform:translateY(-3px); }
.cap-arte .arte{ width:100%; height:auto; display:block; }
/* foto real no lugar do desenho: mesma moldura, um pouco menor */
.cap-arte-foto{ position:relative; width:74%; max-width:370px; margin-inline:auto;
  border-color:var(--ouro-ln); background:var(--preto-2); }
.cap-arte-foto img{ width:100%; height:auto; display:block; aspect-ratio:3/4; object-fit:cover; }
.cap-arte-foto figcaption{ position:absolute; left:0; right:0; bottom:0; padding:36px 16px 13px;
  font-size:.79rem; line-height:1.4; color:rgba(255,255,255,.94);
  background:linear-gradient(180deg,transparent,rgba(10,0,0,.9)); }
@media (max-width:820px){ .cap-arte-foto{ width:min(100%,320px); } }

/* qualquer marca da BAPOS é clicável e leva ao site da empresa */
.pra-bapos{ display:inline-flex; border-radius:10px; transition:transform .3s var(--ease); }
.pra-bapos:hover{ transform:translateY(-2px); }
.pra-bapos .cap-logo{ filter:none; }

.cap-txt{ max-width:58ch; }
.cap-n{ font-family:var(--f-mono); font-size:.74rem; letter-spacing:.2em; color:var(--ouro);
  display:inline-flex; align-items:center; gap:9px; margin-bottom:12px; }
.cap-n::before{ content:""; width:22px; height:1px; background:var(--grad); }
.cap h3{ margin-bottom:14px; }
.cap .frase{ font-family:var(--f-tit); font-weight:800; font-size:clamp(1.06rem,1.8vw,1.32rem);
  letter-spacing:-.026em; line-height:1.3; margin-top:18px; padding-left:18px;
  border-left:2px solid var(--ouro); color:var(--t1); }
.cap-logos{ display:flex; flex-wrap:wrap; gap:9px; margin-top:20px; }
.cap-logos:empty{ display:none; }
.cap-logo{ width:34px; height:34px; border-radius:8px; overflow:hidden; background:#fff;
  display:grid; place-items:center; filter:grayscale(.35) opacity(.85);
  transition:filter .35s var(--ease); }
.cap:hover .cap-logo{ filter:none; }
.cap-logo img{ width:100%; height:100%; object-fit:contain; }

@media (max-width:820px){
  .cap{ grid-template-columns:1fr; gap:22px; }
  .cap:nth-child(even) .cap-arte{ order:0; }
  .cap-txt{ max-width:none; }
}

/* ---------------------------------------------------------- pilares */
.pilares{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
@media (max-width:900px){ .pilares{ grid-template-columns:minmax(0,1fr); } }
.pilar{ border:1px solid var(--linha); border-radius:18px; padding:clamp(24px,3vw,32px);
  background:var(--card); transition:border-color .4s, transform .4s var(--ease); }
.pilar:hover{ border-color:var(--ouro); transform:translateY(-4px); }
.pilar-ic{ width:52px; height:52px; border-radius:14px; display:grid; place-items:center;
  margin-bottom:20px; background:var(--grad); }
.pilar:nth-child(2) .pilar-ic{ background:var(--grad); }
.pilar:nth-child(3) .pilar-ic{ background:var(--grad); }
.pilar-ic svg{ width:24px; height:24px; stroke:#0A0000; fill:none; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round; }
.pilar h3{ margin-bottom:12px; }
.chips{ display:flex; flex-wrap:wrap; gap:7px; margin-top:18px; }
.chip{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.03em; padding:6px 11px;
  border-radius:7px; border:1px solid var(--linha); color:var(--t2);
  transition:border-color .25s, color .25s, background-color .25s; }
.chip:hover{ border-color:var(--ouro); color:var(--champanhe); background:var(--ouro-vd); }

.idiomas-bloco{ margin-top:22px; padding:24px; border:1px solid var(--linha);
  border-radius:16px; background:var(--card); }
.idi-grade{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
@media (max-width:700px){ .idi-grade{ grid-template-columns:minmax(0,1fr); gap:18px; } }
.idi-topo{ display:flex; align-items:center; gap:11px; margin-bottom:11px; }
.idi-topo .bandeira{ width:26px; height:19px; border-radius:3px; flex:none;
  box-shadow:0 0 0 1px var(--linha); }
.idi b{ display:block; font-size:.98rem; font-weight:700; line-height:1.2; }
.idi small{ display:block; font-size:.78rem; color:var(--t3); margin-top:3px; }
.idi-barra{ height:5px; border-radius:99px; background:rgba(255,255,255,.08); overflow:hidden; }
.idi-barra span{ display:block; height:100%; border-radius:99px; background:var(--grad);
  transform-origin:left; transform:scaleX(0); transition:transform 1.1s var(--out) .15s; }
.idiomas-bloco.vis .idi-barra span{ transform:scaleX(1); }

.certs{ display:flex; align-items:center; gap:22px; margin-top:22px; padding:22px 24px;
  border:1px solid var(--linha); border-radius:16px; background:var(--card); }
.certs > img{ width:64px; height:64px; border-radius:12px; flex:none; background:#fff; }
.certs-rot{ display:block; font-family:var(--f-mono); font-size:.68rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--t3); margin-bottom:12px; }
.certs .chips{ margin-top:0; }
@media (max-width:620px){ .certs{ flex-direction:column; align-items:flex-start; gap:16px; } }

/* ---------------------------------------------------------- contato */
.contato-grade{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
@media (max-width:760px){ .contato-grade{ grid-template-columns:minmax(0,1fr); } }
.contato-card{ border:1px solid var(--linha); border-radius:16px; padding:24px; background:var(--card);
  display:flex; flex-direction:column; gap:8px; transition:border-color .35s, transform .35s var(--ease); }
.contato-card:hover{ border-color:var(--ouro); transform:translateY(-3px); }
.contato-card .rot{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--t3); }
.contato-card .val{ font-size:1rem; font-weight:600; word-break:break-word; }
.contato-card .ir{ margin-top:auto; padding-top:10px; color:var(--ouro);
  transition:transform .35s var(--ease); display:inline-flex; }
.contato-card:hover .ir{ transform:translateX(4px); }

/* ---------------------------------------------------------- botão flutuante
   Atalho discreto para o LinkedIn, sempre à mão. */
.flutua{ position:fixed; right:clamp(16px,2.4vw,28px); bottom:clamp(16px,2.4vw,28px); z-index:120;
  width:52px; height:52px; border-radius:50%; display:grid; place-items:center;
  background:var(--grad); color:#0A0000;
  box-shadow:0 12px 30px -12px rgba(212,175,55,.75), 0 0 0 1px rgba(10,0,0,.35);
  transition:transform .32s var(--ease), box-shadow .32s var(--ease); }
.flutua svg{ width:23px; height:23px; }
.flutua:hover{ transform:translateY(-3px) scale(1.06);
  box-shadow:0 18px 40px -12px rgba(212,175,55,.9), 0 0 0 1px rgba(10,0,0,.35); }
.flutua::before{ content:""; position:absolute; inset:-5px; border-radius:50%;
  border:1px solid var(--ouro-ln); opacity:0; transition:opacity .32s; }
.flutua:hover::before{ opacity:1; }
@media (prefers-reduced-motion: reduce){ .flutua{ transition:none; } }
@media (max-width:600px){ .flutua{ width:46px; height:46px; } .flutua svg{ width:20px; height:20px; } }

/* ---------------------------------------------------------- rodapé */
.rodape{ border-top:1px solid var(--linha); padding-block:44px 30px; background:var(--preto-2); }
.rodape-in{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px 30px;
  font-size:.82rem; color:var(--t3); align-items:center; }
.rodape a:hover{ color:var(--champanhe); }

/* ---------------------------------------------------------- utilidades */
.centro{ text-align:center; }
.cab{ max-width:820px; margin-bottom:clamp(38px,5vw,64px); }
.cab-centro{ margin-inline:auto; text-align:center; }
.cab-centro .olho{ justify-content:center; }
.cab .lead{ margin-top:18px; }
.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}
.mt-40{margin-top:40px}.mt-48{margin-top:48px}.mt-64{margin-top:64px}
.pular{ position:absolute; left:-9999px; top:0; background:var(--grad); color:#0A0000;
  padding:10px 18px; border-radius:0 0 10px 0; z-index:200; font-weight:700; font-size:.9rem; }
.pular:focus{ left:0; }
.progresso{ position:fixed; top:0; left:0; height:3px; background:var(--grad); width:0; z-index:100;
  transition:width .1s linear; }

@media (max-width:560px){
  .capa .cargo{ letter-spacing:.05em; }
  .num{ padding:18px 16px; }
  .card-tl .logo-org, .card-tl .sigla{ width:36px; height:36px; margin-left:10px; }
}

/* ==========================================================================
   Celular
   Ajustes de toque, ritmo vertical e respiro. A estrutura já vira uma coluna
   nas regras acima; aqui é o acabamento para a tela da mão.
   ========================================================================== */
@media (max-width:700px){
  /* seções mais curtas: em 360px, 72px de respiro em cada ponta é demais */
  :root{ --sec:56px; }
  .sec-sm{ padding-block:46px; }

  /* nenhuma palavra longa pode empurrar a página para o lado */
  body{ overflow-wrap:break-word; }

  /* ----------------------------------------------------------- topo */
  .topo-in{ gap:8px; }
  .marca-foto{ width:38px; height:38px; }
  /* área de toque de 44px sem mudar o desenho do avatar */
  .marca{ position:relative; }
  .marca::after{ content:""; position:absolute; inset:-4px -6px; }

  .idiomas a{ min-height:42px; min-width:44px; display:inline-flex;
    align-items:center; justify-content:center; padding:0 10px; position:relative; }
  .idiomas a::after{ content:""; position:absolute; inset:-1px -3px; }
  .hamb{ width:44px; height:44px; }

  /* --------------------------------------------------- tipografia
     Em coluna estreita, entrelinha de 1,74 vira uma escada. Aperta um
     pouco o corpo e o texto rende mais tela sem ficar apertado. */
  body{ font-size:16px; }
  .corpo{ font-size:1rem; line-height:1.62; }
  .lead{ font-size:1.02rem; line-height:1.52; }
  .display{ font-size:clamp(2.1rem,9.2vw,2.6rem); line-height:1.02; }
  .h1{ font-size:clamp(1.7rem,6.4vw,2rem); }
  .h2{ font-size:clamp(1.45rem,5.4vw,1.7rem); }
  .h3{ font-size:1.22rem; }
  .cab{ margin-bottom:26px; }
  .cab .lead{ margin-top:12px; }
  .olho{ margin-bottom:14px; font-size:.68rem; letter-spacing:.16em; }
  p{ margin-bottom:.9em; }

  /* ----------------------------------------------------------- capa */
  .capa{ padding-top:34px; }
  .retrato img{ aspect-ratio:4/5; object-fit:cover; object-position:50% 18%; }
  .instituicoes{ gap:9px; }
  .btns .btn{ flex:1 1 auto; justify-content:center; }

  /* ----------------------------------------------------- linha do tempo */
  .tl-filtro{ min-height:42px; padding:0 16px; display:inline-flex; align-items:center; }
  .tl-filtros{ gap:7px; margin-bottom:18px; }
  .tl-legenda{ gap:12px 16px; margin-bottom:20px; font-size:.74rem; }
  .tl{ gap:10px; }
  .card-tl{ padding:12px 13px; }
  .card-tl .h4{ font-size:.95rem; }
  .card-tl ul li{ font-size:.845rem; line-height:1.46; margin-bottom:3px; }
  .card-tl .tag{ font-size:.66rem; padding:3px 7px; }
  .card-tl .tags{ gap:4px; margin-top:8px; }
  .cargos{ margin-top:10px; padding-left:17px; }
  .tl-cargo{ padding-bottom:10px; }
  .tl-cargo::before{ left:-17px; }
  .tl-cargo ul li{ font-size:.81rem; }
  .cert-foto img{ max-height:130px; object-fit:cover; object-position:top; }

  /* ----------------------------------------------------- capítulos */
  .cap{ padding-block:26px; gap:16px; }
  .cap-arte-desenho .arte{ aspect-ratio:16/9; object-fit:cover; }
  .cap-n{ margin-bottom:9px; }
  .cap h3{ margin-bottom:10px; }
  .cap-arte-foto{ width:min(100%,300px); }
  .cap .frase{ margin-top:14px; padding-left:14px; font-size:1.02rem; }
  .cap-logos{ margin-top:16px; gap:8px; }
  /* logos de capítulo: alvo de toque confortável sem aumentar o selo */
  .pra-bapos{ position:relative; }
  .pra-bapos::after{ content:""; position:absolute; inset:-5px; }

  /* ----------------------------------------------------- números e pilares */
  .num{ padding:16px 14px; }
  .pilar{ padding:20px 18px; }
  .pilar .corpo{ font-size:.96rem; }
  .chip{ font-size:.7rem; padding:4px 9px; }
  .chips{ gap:6px; }
  .destaques{ gap:12px; }

  /* ----------------------------------------------------- contato e rodapé */
  .contato-card{ padding:20px 18px; }
  .rodape-in{ gap:10px; }
  .rodape a{ display:inline-block; padding-block:6px; }
  /* o botão flutuante não pode ficar por cima da última linha do rodapé */
  .rodape{ padding-bottom:calc(74px + env(safe-area-inset-bottom, 0px)); }

  /* ----------------------------------------------------- ampliar foto */
  .lupa-fundo{ padding:16px; }
  .lupa-cx{ max-width:94vw; max-height:86dvh; padding:9px; }
  .lupa-cx img{ max-height:72dvh; }
  .lupa-fechar{ top:12px; right:12px; }
}

/* telas bem estreitas */
@media (max-width:380px){
  :root{ --gut:16px; }
  .marca > span:last-child{ display:none; }
  .idiomas a{ padding:0 7px; min-width:38px; }
  .cap-arte-foto{ width:100%; }
  .numeros{ gap:10px; }
}

/* respeita a barra inferior do iPhone */
.flutua{ bottom:calc(clamp(16px,2.4vw,28px) + env(safe-area-inset-bottom, 0px)); }