/* ==========================================================================
   CV Renan Donadeli - Especialista em IA
   Direcao de arte: DESCIDA. Rolar a pagina e afundar no oceano.
   O fundo escurece de forma continua, a luz do sol some por volta dos 1.000 m
   e o destaque vira bioluminescencia. A secao de limites fica na fossa.
   O fechamento sobe de volta pra superficie.
   Sem framework, sem build. Uma folha, um script, um JSON.
   ========================================================================== */

:root{
  /* agua: o JS interpola --agua conforme a profundidade */
  --agua:      #0b3b57;
  --agua-fundo:#04203a;

  /* superficie */
  --sol:       #9fe8f2;
  --raso:      #4fb8d8;

  /* bioluminescencia: so aparece de verdade no escuro */
  --bio:       #5ff0d0;
  --bio-suave: #7ee8fa;

  --ink:       #e6f6fa;
  --muted:     #9dc0cf;
  --dim:       #628ba0;
  --linha:     rgba(126, 232, 250, .14);
  --linha-forte:rgba(126, 232, 250, .28);
  --vidro:     rgba(8, 40, 60, .38);

  --coral:     #ff8069;

  --serif: "Fraunces", Georgia, serif;
  --sans:  "Inter", system-ui, -apple-system, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, Menlo, monospace;

  --wrap: 1080px;
  --pad: clamp(1.25rem, 4vw, 2.5rem);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }

body{
  background:var(--agua);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background-color .4s linear;
}

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); position:relative; z-index:2; }

.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ==========================================================================
   Camadas de agua (fixas, atras de tudo)
   ========================================================================== */

/* neve marinha: particulas descendo devagar */
#neve{
  position:fixed; inset:0; z-index:0;
  pointer-events:none; opacity:.55;
}

/* feixes de luz que atravessam a superficie, somem ao afundar */
.caustica{
  position:fixed; inset:0 0 auto 0; height:75vh; z-index:0;
  pointer-events:none;
  opacity:var(--luz, 1);
  background:
    radial-gradient(ellipse 55% 45% at 22% -8%, rgba(159,232,242,.20), transparent 62%),
    radial-gradient(ellipse 42% 55% at 68% -14%, rgba(126,232,250,.14), transparent 60%),
    radial-gradient(ellipse 30% 40% at 90% -6%,  rgba(95,240,208,.10), transparent 58%);
  animation:mare 14s ease-in-out infinite alternate;
  transition:opacity .5s linear;
}
@keyframes mare{
  0%   { transform:translate3d(-2%,0,0) scale(1);    }
  100% { transform:translate3d(3%,1.5%,0) scale(1.07); }
}

/* escurecimento progressivo por cima da agua */
.abismo{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse 120% 80% at 50% 120%, rgba(0,0,0,.55), transparent 62%);
}

/* ==========================================================================
   Tipografia
   ========================================================================== */

h1{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.3rem, 1.4rem + 3.4vw, 4.2rem);
  line-height:1.02; letter-spacing:-.03em;
}

/* cartão de identidade: retrato + nome + cargos */
.cartao{
  display:flex; align-items:center; gap:clamp(1.2rem, 3vw, 2.4rem);
  margin-block:1.8rem 2.2rem; flex-wrap:wrap;
}
.retrato{
  position:relative; flex:none;
  width:clamp(104px, 13vw, 168px); aspect-ratio:1;
  border-radius:50%; overflow:hidden;
  border:1px solid var(--linha-forte);
  box-shadow:0 0 0 6px rgba(95,240,208,.06), 0 0 60px rgba(95,240,208,.14);
}
.retrato img{ width:100%; height:100%; object-fit:cover; display:block; }
.retrato .mono-inicial{
  display:none; position:absolute; inset:0;
  align-items:center; justify-content:center;
  font-family:var(--serif); font-size:2.6rem; color:var(--bio);
  background:var(--vidro);
}
.retrato.sem-foto .mono-inicial{ display:flex; }

.ident .cargos{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.9rem; }
.ident .cargos span{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--bio);
  border:1px solid var(--linha-forte); border-radius:999px; padding:.28rem .8rem;
}
.ident .local{ font-family:var(--mono); font-size:.68rem; color:var(--dim); margin-top:.8rem; letter-spacing:.1em; }

/* a manchete de venda vem depois do rosto, não antes */
.manchete{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2rem, 1.2rem + 3.4vw, 4rem);
  line-height:1.06; letter-spacing:-.025em;
  margin-bottom:1.8rem; max-width:20ch;
}
.manchete em{
  font-style:normal; color:var(--sol);
  text-shadow:0 0 42px rgba(159,232,242,.4);
}

h2{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.9rem, 1.2rem + 2.9vw, 3.5rem);
  line-height:1.08; letter-spacing:-.02em;
  margin-bottom:1.5rem; max-width:26ch;   /* 22ch quebrava "uso." sozinho na linha */
}

h3.sub{
  font-family:var(--mono); font-size:.72rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--bio); margin-bottom:1.5rem;
}

.eyebrow{
  font-family:var(--mono); font-size:.73rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--bio-suave);
}

.lede, .ato-lede{
  font-size:clamp(1.05rem, 1rem + .35vw, 1.28rem);
  line-height:1.62; color:var(--muted); max-width:62ch;
}
/* o texto de apresentação vem em parágrafos separados */
.lede .par{ display:block; }
.lede .par + .par{ margin-top:1.1rem; }
.lede .par:first-child{ color:var(--ink); }

/* etiqueta de zona: profundidade + nome cientifico da camada */
.zona{
  display:flex; align-items:baseline; gap:.9rem; flex-wrap:wrap;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--dim); margin-bottom:1.4rem;
}
.zona .m{
  color:var(--bio); font-size:.9rem; letter-spacing:.04em;
  border:1px solid var(--linha-forte); border-radius:999px;
  padding:.2rem .7rem;
}

/* nota de mergulho: fato real da zona, em corpo miúdo, como extra pra quem repara */
.fato{
  font-family:var(--mono); font-size:.63rem; line-height:1.7;
  letter-spacing:.04em; color:var(--dim);
  max-width:52ch; margin:-.7rem 0 1.8rem;
  padding-left:.9rem; border-left:1px solid var(--linha);
}
.fato::before{ content:"fato "; color:var(--bio); opacity:.65; }

/* ==========================================================================
   HUD de mergulho (computador de pulso)
   ========================================================================== */

/* O HUD vive FORA da coluna de conteudo. A conta: metade da sobra de tela
   menos a largura do proprio HUD, com folga. Se nao couber, ele some. */
.hud{
  position:fixed; z-index:40;
  right:max(1.25rem, calc(50vw - var(--wrap)/2 - 9.5rem));
  top:50%; transform:translateY(-50%);
  width:120px;
  font-family:var(--mono);
  opacity:0; transition:opacity .6s ease;
}
.hud.on{ opacity:1; }

.hud .prof{
  font-size:1.9rem; line-height:1; color:var(--bio);
  letter-spacing:-.02em; font-variant-numeric:tabular-nums;
  text-shadow:0 0 26px rgba(95,240,208,.45);
}
.hud .prof span{ font-size:.7rem; letter-spacing:.1em; color:var(--dim); margin-left:.2rem; }
.hud .nome{
  font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin-top:.45rem; min-height:2.2em; line-height:1.5;
}

/* regua vertical com marcacao das zonas */
.hud .regua{ margin-top:1rem; position:relative; height:180px; border-left:1px solid var(--linha); }
.hud .marca{
  position:absolute; left:-1px; width:9px; height:1px;
  background:var(--linha-forte);
}
.hud .marca.on{ background:var(--bio); width:16px; box-shadow:0 0 10px rgba(95,240,208,.7); }
.hud .bolha{
  position:absolute; left:-4px; width:7px; height:7px; border-radius:50%;
  background:var(--bio); box-shadow:0 0 0 4px rgba(95,240,208,.14), 0 0 16px rgba(95,240,208,.6);
  transition:top .12s linear;
}
.hud .pressao{ font-size:.6rem; letter-spacing:.1em; color:var(--dim); margin-top:.9rem; }

/* controle da luz dentro do computador de mergulho */
.hud-luz{
  display:flex; align-items:center; gap:.55rem;
  margin-top:1.1rem; padding:.5rem .7rem .5rem .55rem;
  background:transparent; border:1px solid var(--linha);
  border-radius:999px; cursor:pointer; width:100%;
  font-family:var(--mono); font-size:.58rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); text-align:left;
  transition:border-color .3s ease, color .3s ease, box-shadow .35s ease;
}
.hud-luz:hover{ border-color:var(--linha-forte); color:var(--ink); }
.hud-luz .rotulo{ line-height:1.3; }
.hud-luz.on{ border-color:var(--bio); color:var(--bio); box-shadow:0 0 22px rgba(95,240,208,.22); }

/* o bulbo apagado pulsa devagar para o olho achar o controle sem legenda */
.bulbo{
  width:9px; height:9px; border-radius:50%; flex:none;
  background:var(--dim); box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
  transition:background .3s ease, box-shadow .3s ease;
  animation:respira 3.6s ease-in-out infinite;
}
.on .bulbo{
  background:var(--bio);
  box-shadow:0 0 0 3px rgba(95,240,208,.18), 0 0 18px var(--bio);
  animation:none;
}
@keyframes respira{ 0%,100%{ opacity:.45 } 50%{ opacity:1 } }

.dica-luz{
  display:block; margin-top:.5rem;
  font-family:var(--mono); font-size:.55rem; letter-spacing:.08em;
  color:var(--bio-suave); opacity:.85;
  transition:opacity .8s ease;
}
.dica-luz.sumiu{ opacity:0; pointer-events:none; }

/* onde o HUD não cabe, a luz vira um controle flutuante */
.luz-flutuante{
  position:fixed; z-index:41; right:1.1rem; bottom:1.1rem;
  width:46px; height:46px; border-radius:50%;
  display:none; align-items:center; justify-content:center;
  background:rgba(4,26,42,.72); border:1px solid var(--linha-forte);
  cursor:pointer; backdrop-filter:blur(6px);
  transition:box-shadow .35s ease, border-color .3s ease;
}
.luz-flutuante.on{ border-color:var(--bio); box-shadow:0 0 30px rgba(95,240,208,.4); }
.luz-flutuante .bulbo{ width:12px; height:12px; }

@media (max-width:1430px){
  .hud{ display:none; }
  .luz-flutuante{ display:flex; }
}
/* ==========================================================================
   Superficie (abertura)
   ========================================================================== */

.hero{
  position:relative; min-height:100svh;
  display:flex; align-items:center;
  padding-block:clamp(5rem, 12vh, 9rem);
}

.boot{
  font-family:var(--mono); font-size:.75rem; line-height:1.95;
  color:var(--dim); min-height:5.8rem; margin-bottom:2.4rem; white-space:pre-wrap;
}
.boot b{ color:var(--bio); font-weight:500; }
.boot i{ color:var(--sol); font-style:normal; }
.boot .cursor{ color:var(--bio); animation:pisca 1s step-end infinite; }
@keyframes pisca{ 50%{ opacity:0 } }

.metrics{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(196px,1fr));
  gap:1px; background:var(--linha);
  border:1px solid var(--linha); border-radius:10px; overflow:hidden;
  margin-top:3.4rem; backdrop-filter:blur(6px);
}
.metrics > div{ background:var(--vidro); padding:1.5rem 1.35rem; }
.metrics dt{
  font-family:var(--serif); font-size:clamp(2.1rem,1.6rem + 2vw,3.1rem);
  line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums;
  color:var(--sol);
}
.metrics .rotulo{
  font-family:var(--mono); font-size:.67rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--bio); margin-top:.65rem;
}
.metrics dd{ font-size:.85rem; color:var(--muted); margin-top:.4rem; line-height:1.45; }
.metrics .prova{
  font-family:var(--mono); font-size:.6rem; color:var(--dim);
  margin-top:.6rem; letter-spacing:.02em; overflow-wrap:anywhere;
}

.scroll-hint{
  display:inline-flex; align-items:center; gap:.8rem; margin-top:3.2rem;
  font-family:var(--mono); font-size:.71rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); text-decoration:none;
  transition:color .3s ease;
}
.scroll-hint:hover{ color:var(--bio); }
.scroll-hint svg{ animation:afunda 2.6s ease-in-out infinite; }
@keyframes afunda{ 0%,100%{ transform:translateY(0); opacity:.6 } 50%{ transform:translateY(7px); opacity:1 } }

/* ==========================================================================
   Atos (zonas)
   ========================================================================== */

.ato{ position:relative; padding-block:clamp(5rem, 13vh, 9rem); }
.ato::before{
  content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg, transparent, var(--linha-forte) 22%, var(--linha-forte) 78%, transparent);
}

.mecanismo{ margin:2.2rem 0; padding-left:1.5rem; border-left:2px solid var(--coral); }
.mecanismo span{
  font-family:var(--serif); font-size:clamp(1.4rem,1.1rem + 1.2vw,2.2rem);
  line-height:1.2; color:var(--ink);
}

.cta-cedo{
  margin-top:3.5rem; display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap;
  border-top:1px solid var(--linha); padding-top:2rem;
}
.cta-cedo a{
  display:inline-flex; background:var(--bio); color:#022;
  border-radius:6px; padding:.8rem 1.5rem; text-decoration:none;
  font-size:.9rem; font-weight:600; box-shadow:0 0 24px rgba(95,240,208,.24);
  transition:box-shadow .3s ease;
}
.cta-cedo a:hover{ box-shadow:0 0 40px rgba(95,240,208,.42); }
.cta-cedo span{ font-size:.86rem; color:var(--dim); max-width:38ch; }

.cards{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
  gap:1px; background:var(--linha);
  border:1px solid var(--linha); border-radius:10px; overflow:hidden;
  margin-top:3.4rem;
}
.cards article{
  background:var(--vidro); padding:1.8rem 1.55rem;
  backdrop-filter:blur(6px);
  transition:background .4s ease, box-shadow .4s ease;
}
.cards article:hover{ background:rgba(12,58,84,.5); box-shadow:inset 0 0 40px rgba(95,240,208,.07); }
.cards h3{
  font-family:var(--sans); font-size:1rem; font-weight:600;
  margin-bottom:.65rem; display:flex; align-items:center; gap:.6rem;
}
.cards h3::before{
  content:""; width:6px; height:6px; border-radius:50%; flex:none;
  background:var(--bio); box-shadow:0 0 0 3px rgba(95,240,208,.14), 0 0 14px var(--bio);
  animation:pulsa 3.4s ease-in-out infinite;
}
@keyframes pulsa{ 0%,100%{ opacity:.55 } 50%{ opacity:1 } }
.cards p{ font-size:.91rem; color:var(--muted); line-height:1.6; }

/* grafico de atividade */
.grafico{ margin-top:3.4rem; position:relative; }
.grafico figcaption{ margin-bottom:1.2rem; }
.grafico .g-resumo{ font-size:.95rem; color:var(--muted); max-width:56ch; }
.grafico .g-resumo b{ color:var(--ink); font-weight:600; }
.g-legenda{ list-style:none; display:flex; gap:1.4rem; margin-bottom:1rem; }
.g-legenda li{
  display:flex; align-items:center; gap:.5rem;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted);
}
.g-legenda i, .g-dica i{ width:9px; height:9px; border-radius:2px; flex:none; }
.g-plot svg{ width:100%; height:clamp(210px, 26vh, 300px); display:block; overflow:visible; }
.g-grade{ stroke:var(--linha); stroke-width:1; }
.g-eixo{ fill:var(--dim); font-family:var(--mono); font-size:11px; }
.g-pico{ fill:var(--ink); font-family:var(--mono); font-size:12px; font-weight:500; }
.g-alvo{ cursor:crosshair; }
.g-alvo:hover{ fill:rgba(126,232,250,.05); }
.g-dica{
  position:absolute; bottom:4.6rem; transform:translateX(-50%);
  background:rgba(3,20,32,.94); border:1px solid var(--linha-forte); border-radius:6px;
  padding:.6rem .8rem; pointer-events:none; white-space:nowrap; z-index:3;
  display:flex; flex-direction:column; gap:.2rem;
  font-family:var(--mono); font-size:.7rem; color:var(--muted);
  backdrop-filter:blur(4px);
}
.g-dica[hidden]{ display:none; }
.g-dica b{ color:var(--ink); font-size:.75rem; }
.g-dica span{ display:flex; align-items:center; gap:.45rem; }
.g-dica em{ font-style:normal; color:var(--bio); margin-top:.15rem; }
.g-tabela{ margin-top:1.4rem; }
.g-tabela summary{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--dim); cursor:pointer;
}
.g-tabela summary:hover{ color:var(--bio); }
.g-tabela table{ border-collapse:collapse; margin-top:1rem; font-size:.8rem; }
.g-tabela th, .g-tabela td{
  border:1px solid var(--linha); padding:.32rem .8rem; text-align:right;
  font-family:var(--mono); color:var(--muted);
}
.g-tabela th{ color:var(--bio); font-weight:500; }
.g-tabela td:first-child, .g-tabela th:first-child{ text-align:left; }

/* projetos */
.projetos{
  margin-top:3rem; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:1px; background:var(--linha);
  border:1px solid var(--linha); border-radius:10px; overflow:hidden;
}
.proj{ background:var(--vidro); padding:1.9rem 1.7rem; backdrop-filter:blur(5px); display:flex; flex-direction:column; }
.proj header{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.proj .cat{
  font-family:var(--mono); font-size:.64rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--bio);
}
.proj h3{
  font-family:var(--serif); font-weight:400; font-size:1.65rem;
  line-height:1.1; margin-top:.4rem; color:var(--sol);
}
.proj .link{
  flex:none; font-family:var(--mono); font-size:.68rem; color:var(--bio);
  text-decoration:none; border:1px solid var(--linha-forte);
  border-radius:999px; padding:.3rem .75rem; white-space:nowrap;
  transition:box-shadow .3s ease;
}
.proj .link:hover{ box-shadow:0 0 20px rgba(95,240,208,.28); }
.proj .frase{ font-size:.93rem; color:var(--muted); line-height:1.58; margin-top:1.1rem; }
.proj .nums{ list-style:none; display:flex; flex-wrap:wrap; gap:1.6rem; margin-top:1.5rem; }
.proj .nums b{
  display:block; font-family:var(--serif); font-size:1.75rem;
  line-height:1; color:var(--ink); letter-spacing:-.02em;
}
.proj .nums span{
  display:block; font-family:var(--mono); font-size:.62rem; letter-spacing:.08em;
  color:var(--dim); margin-top:.35rem; max-width:16ch; line-height:1.4;
}
.proj .tags{ margin-top:1.5rem; }
.proj details{ margin-top:1.3rem; border-top:1px solid var(--linha); padding-top:1rem; }
.proj summary{
  font-family:var(--mono); font-size:.64rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--dim); cursor:pointer;
}
.proj summary:hover{ color:var(--bio); }
.proj details p{ font-size:.88rem; color:var(--muted); line-height:1.6; margin-top:.9rem; }
.proj .nda{
  font-family:var(--mono); font-size:.66rem; color:var(--dim);
  border-left:2px solid var(--linha-forte); padding-left:.7rem; margin-top:.8rem;
}
.tags{ display:flex; flex-wrap:wrap; gap:.4rem; }
.tags span{
  font-family:var(--mono); font-size:.65rem; color:var(--dim);
  border:1px solid var(--linha); border-radius:999px; padding:.22rem .65rem;
}

/* governanca */
.gov{ margin-top:3.4rem; display:grid; grid-template-columns:repeat(auto-fit,minmax(238px,1fr)); gap:1.5rem; }
.gov article{ border-top:1px solid var(--linha); padding-top:1.15rem; }
.gov h3{ font-size:.94rem; font-weight:600; margin-bottom:.45rem; }
.gov p{ font-size:.89rem; color:var(--muted); }
.gov .n{ font-family:var(--mono); font-size:.66rem; color:var(--bio); letter-spacing:.16em; display:block; margin-bottom:.65rem; }

/* simulador de gates */
.gt{ margin-top:3.6rem; }
.gt-acoes{ display:flex; flex-wrap:wrap; gap:.55rem; margin-bottom:2rem; }
.gt-acoes button{
  background:var(--vidro); color:var(--muted);
  border:1px solid var(--linha); border-radius:999px;
  padding:.5rem 1rem; font-family:var(--sans); font-size:.83rem;
  cursor:pointer; backdrop-filter:blur(4px);
  transition:border-color .25s ease, color .25s ease, background .25s ease;
}
.gt-acoes button:hover:not(:disabled){ border-color:var(--bio); color:var(--ink); }
.gt-acoes button.on{ border-color:var(--bio); color:var(--ink); background:rgba(95,240,208,.08); }
.gt-acoes button:disabled{ opacity:.45; cursor:wait; }
.gt-fluxo{
  list-style:none; display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:1px;
  background:var(--linha); border:1px solid var(--linha);
  border-radius:10px; overflow:hidden;
}
.gt-fluxo li{ background:var(--vidro); padding:1.15rem 1.1rem; transition:background .3s ease, box-shadow .3s ease; }
.gt-fluxo b{ display:block; font-size:.9rem; font-weight:600; margin-bottom:.3rem; }
.gt-fluxo small{ font-size:.78rem; color:var(--dim); line-height:1.45; display:block; }
.gt-luz{
  display:block; width:7px; height:7px; border-radius:50%;
  background:var(--linha-forte); margin-bottom:.7rem;
  transition:background .3s ease, box-shadow .3s ease;
}
.gt-fluxo .gt-ativo{ background:rgba(95,240,208,.07); }
.gt-fluxo .gt-ativo .gt-luz{ background:var(--bio-suave); box-shadow:0 0 0 4px rgba(126,232,250,.16); }
.gt-fluxo .gt-ok .gt-luz{ background:var(--bio); box-shadow:0 0 10px rgba(95,240,208,.5); }
.gt-fluxo .gt-tratado .gt-luz{ background:#c07636; box-shadow:0 0 10px rgba(192,118,54,.5); }
.gt-fluxo .gt-barrado{ background:rgba(255,128,105,.09); box-shadow:inset 0 0 0 1px rgba(255,128,105,.35); }
.gt-fluxo .gt-barrado .gt-luz{ background:var(--coral); box-shadow:0 0 12px rgba(255,128,105,.6); }
.gt-saida{
  margin-top:1.4rem; border-radius:8px; padding:1.1rem 1.25rem;
  border:1px solid var(--linha); background:var(--vidro); backdrop-filter:blur(4px);
}
.gt-saida b{ display:block; font-size:.93rem; margin-bottom:.35rem; }
.gt-saida p{ font-size:.89rem; color:var(--muted); }
.gt-saida.gt-parou{ border-color:rgba(255,128,105,.4); }
.gt-saida.gt-parou b{ color:var(--coral); }
.gt-saida.gt-passou{ border-color:rgba(95,240,208,.4); }
.gt-saida.gt-passou b{ color:var(--bio); }

/* camada pessoal */
.eu{
  margin-top:3rem; display:grid;
  grid-template-columns:repeat(auto-fit, minmax(258px,1fr)); gap:1px;
  background:var(--linha); border:1px solid var(--linha);
  border-radius:10px; overflow:hidden;
}
.eu article{ background:var(--vidro); padding:1.8rem 1.6rem; backdrop-filter:blur(5px); }
.eu b{
  display:block; font-family:var(--mono); font-size:.68rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--bio); margin-bottom:.8rem; font-weight:500;
}
.eu p{ font-size:.93rem; color:var(--muted); line-height:1.62; }

/* trajetoria */
.split{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:4rem; margin-top:3rem; }
.timeline{ list-style:none; }
.timeline li{ border-left:1px solid var(--linha); padding:0 0 2rem 1.7rem; position:relative; }
.timeline li:last-child{ padding-bottom:0; }
.timeline li::before{
  content:""; position:absolute; left:-4px; top:.55rem; width:7px; height:7px;
  border-radius:50%; background:var(--bio); box-shadow:0 0 12px rgba(95,240,208,.6);
}
.timeline .per{ font-family:var(--mono); font-size:.69rem; letter-spacing:.1em; color:var(--dim); }
.timeline h4{ font-family:var(--serif); font-weight:400; font-size:1.32rem; margin-block:.28rem .12rem; }
.timeline .emp{ font-size:.87rem; color:var(--bio-suave); margin-bottom:.45rem; }
.timeline p{ font-size:.89rem; color:var(--muted); }
.formacao{ list-style:none; display:flex; flex-direction:column; gap:1.05rem; }
.formacao li{ border-left:1px solid var(--linha); padding-left:1.05rem; }
.formacao b{ font-weight:600; font-size:.94rem; display:block; }
.formacao span{ font-size:.84rem; color:var(--muted); }
.stack{ display:flex; flex-direction:column; gap:1.9rem; }
.stack .grupo b{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--bio); display:block; margin-bottom:.85rem;
}
.stack ul{ list-style:none; display:flex; flex-wrap:wrap; gap:.4rem; }
.stack li{
  font-size:.81rem; color:var(--muted);
  border:1px solid var(--linha); border-radius:4px; padding:.28rem .62rem;
  transition:border-color .3s ease, color .3s ease;
}
.stack li:hover{ border-color:var(--linha-forte); color:var(--ink); }

/* maquina de fit */
.fit-form{ margin-top:3rem; max-width:820px; }
.fit-form textarea{
  width:100%; background:rgba(4,26,42,.55); color:var(--ink);
  border:1px solid var(--linha); border-radius:8px;
  padding:1.05rem 1.15rem; font-family:var(--sans); font-size:.94rem; line-height:1.6;
  resize:vertical; transition:border-color .25s ease, box-shadow .25s ease;
  backdrop-filter:blur(6px);
}
.fit-form textarea:focus{
  outline:none; border-color:var(--bio);
  box-shadow:0 0 0 4px rgba(95,240,208,.09), 0 0 30px rgba(95,240,208,.12);
}
.fit-form textarea::placeholder{ color:var(--dim); }
.fit-actions{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:1rem; flex-wrap:wrap; }
.counter{ font-family:var(--mono); font-size:.69rem; color:var(--dim); }
#fit-submit{
  background:var(--bio); color:#022; border:0; border-radius:6px;
  padding:.8rem 1.6rem; font-family:var(--sans); font-size:.89rem; font-weight:600;
  cursor:pointer; box-shadow:0 0 26px rgba(95,240,208,.28);
  transition:box-shadow .3s ease, transform .15s ease, opacity .25s ease;
}
#fit-submit:hover:not(:disabled){ box-shadow:0 0 40px rgba(95,240,208,.45); }
#fit-submit:active:not(:disabled){ transform:translateY(1px); }
#fit-submit:disabled{ opacity:.4; cursor:not-allowed; box-shadow:none; }
.fit-out{
  margin-top:2rem; max-width:820px;
  border:1px solid var(--linha); border-radius:8px; background:var(--vidro);
  padding:1.7rem; font-size:.94rem; line-height:1.7; backdrop-filter:blur(6px);
}
.fit-out h4{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--bio); margin-bottom:.55rem;
}
.fit-out h4 + p{ color:var(--muted); margin-bottom:1.35rem; }
.fit-out .aviso{ color:var(--dim); font-family:var(--mono); font-size:.71rem; line-height:1.8; }

/* logistica e fechamento */
.logistica{ margin-top:3.5rem; }
.logistica dl{
  margin-top:1.6rem; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1px;
  background:var(--linha); border:1px solid var(--linha); border-radius:10px; overflow:hidden;
}
.logistica dl > div{ background:var(--vidro); padding:1.4rem 1.4rem; backdrop-filter:blur(4px); }
.logistica dt{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--bio); margin-bottom:.55rem;
}
.logistica dd{ font-size:.9rem; color:var(--muted); line-height:1.6; }

.closing{ padding-block:clamp(5rem,14vh,10rem); }
.contato{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.4rem; }
.contato.final{ margin-top:3rem; }
.contato a{
  display:inline-flex; align-items:center; gap:.6rem;
  border:1px solid var(--linha); border-radius:6px;
  padding:.82rem 1.4rem; text-decoration:none; color:var(--ink);
  font-size:.91rem; backdrop-filter:blur(6px);
  transition:border-color .25s ease, background .25s ease;
}
.contato a:hover{ border-color:var(--bio); background:rgba(95,240,208,.06); }
.contato a.primary{
  background:var(--bio); color:#022; border-color:var(--bio); font-weight:600;
  box-shadow:0 0 26px rgba(95,240,208,.28);
}
.contato a.primary:hover{ background:var(--bio); box-shadow:0 0 40px rgba(95,240,208,.45); }

/* escuridao recortada e feixe da lanterna */
.escuro{
  position:fixed; inset:0; z-index:3; pointer-events:none;
  background:rgba(0,5,11,.82);
  opacity:0; transition:opacity 1s ease;
  --lx:50%; --ly:50%;
  -webkit-mask-image:radial-gradient(circle 300px at var(--lx) var(--ly),
    transparent 0%, transparent 26%, rgba(0,0,0,.55) 58%, #000 100%);
  mask-image:radial-gradient(circle 300px at var(--lx) var(--ly),
    transparent 0%, transparent 26%, rgba(0,0,0,.55) 58%, #000 100%);
}
body.com-luz .escuro{ opacity:1; }
.facho{
  position:fixed; left:0; top:0; width:600px; height:600px; z-index:4;
  pointer-events:none; opacity:0;
  background:radial-gradient(circle closest-side,
    rgba(190,250,255,.26), rgba(120,220,245,.10) 38%, transparent 70%);
  transition:opacity .8s ease;
  will-change:transform, opacity;
  mix-blend-mode:screen;
}
body.com-luz .facho{ opacity:1; animation:bateria 5.5s ease-in-out infinite; }
@keyframes bateria{
  0%,100%{ filter:brightness(1) }
  38%    { filter:brightness(1.14) }
  52%    { filter:brightness(.9) }
  71%    { filter:brightness(1.06) }
}
body.com-luz{ --linha:rgba(126,232,250,.24); --linha-forte:rgba(126,232,250,.44); }
body.com-luz .abismo{ opacity:.35; transition:opacity 1s ease; }

.segredo{
  margin-top:3rem; max-width:44ch;
  font-family:var(--serif); font-size:clamp(1.3rem,1.1rem + .9vw,1.9rem);
  line-height:1.35; color:var(--sol);
  opacity:0; transform:translateY(8px);
  transition:opacity 1.2s ease .3s, transform 1.2s ease .3s;
}
body.com-luz .segredo{ opacity:1; transform:none; }

.lanterna{ margin-top:3.5rem; display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.lanterna button{
  background:transparent; color:var(--bio);
  border:1px solid var(--linha-forte); border-radius:999px;
  padding:.7rem 1.5rem; font-family:var(--mono); font-size:.74rem;
  letter-spacing:.14em; text-transform:uppercase; cursor:pointer;
  transition:box-shadow .35s ease, background .35s ease, color .35s ease;
}
.lanterna button:hover{ box-shadow:0 0 26px rgba(95,240,208,.3); }
.lanterna button.on{
  background:var(--bio); color:#022; border-color:var(--bio);
  box-shadow:0 0 44px rgba(95,240,208,.5);
}
.lanterna span{ font-size:.8rem; color:var(--dim); }

.rodape{ padding-block:3rem; border-top:1px solid var(--linha); position:relative; z-index:2; }
.rodape p{ font-size:.79rem; color:var(--dim); max-width:70ch; }
.rodape .assinatura{ margin-top:.75rem; font-family:var(--mono); font-size:.69rem; }

/* ==========================================================================
   Responsividade
   ========================================================================== */

@media (max-width:900px){
  .split{ grid-template-columns:1fr; gap:3rem; }
}
@media (max-width:760px){
  .cartao{ gap:1rem; }
  .proj .nums{ gap:1.1rem; }
  .cta-cedo{ flex-direction:column; align-items:flex-start; gap:.9rem; }
  .g-plot svg{ height:200px; }
}

/* ==========================================================================
   Revelacao por rolagem
   ========================================================================== */

:where(.reveal, .cards article, .proj, .gov article, .eu article,
       .timeline li, .stack .grupo, .formacao li){
  opacity:0; transform:translateY(22px); filter:blur(3px);
  transition:opacity .9s cubic-bezier(.16,1,.3,1),
             transform .9s cubic-bezier(.16,1,.3,1),
             filter .9s cubic-bezier(.16,1,.3,1);
}
.is-in{ opacity:1; transform:none; filter:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  :where(.reveal, .cards article, .proj, .gov article, .eu article,
         .timeline li, .stack .grupo, .formacao li){
    opacity:1; transform:none; filter:none; transition:none;
  }
  .caustica, .scroll-hint svg, .cards h3::before, body.com-luz .facho{ animation:none; }
  #neve{ display:none; }
}

@media print{
  /* ------------------------------------------------------------------
     Currículo em papel. Objetivos, nesta ordem:
     1. o robô do ATS precisa extrair texto e palavra-chave
     2. o humano precisa ler em 30 segundos
     3. quem se interessar precisa achar o link do site
     ------------------------------------------------------------------ */
  @page{ size:A4; margin:14mm 15mm; }

  :root{
    --ink:#111; --muted:#333; --dim:#555;
    --linha:#d8d8d8; --linha-forte:#999; --vidro:#fff;
    --sol:#0b4a63; --bio:#0b6b7a; --coral:#a33;
  }
  body{ background:#fff; color:#111; font-size:10pt; line-height:1.45; }

  /* fora: tudo que é atmosfera, interação ou navegação */
  #neve, .caustica, .abismo, .escuro, .facho, .hud, .luz-flutuante,
  .boot, .scroll-hint, .zona, .fato, .quote, .gt, .grafico,
  .fit-form, .fit-out, #ato-6, .lanterna, .segredo, .cta-cedo,
  .rodape .assinatura, .proj details, .g-tabela{ display:none !important; }

  .ato, .hero{ padding-block:0 0; min-height:0; page-break-inside:auto; }
  .ato::before{ display:none; }
  .wrap{ max-width:none; padding:0; }
  main{ display:block; }

  /* cabeçalho: retrato, nome, cargos e contato numa faixa só */
  .cartao{ margin:0 0 6mm; gap:6mm; align-items:flex-start; }
  .retrato{ width:26mm; border:1px solid #ccc; box-shadow:none; }
  h1{ font-size:22pt; margin:0; }
  .ident .cargos{ margin-top:2mm; gap:2mm; }
  .ident .cargos span{ border-color:#bbb; color:#0b6b7a; font-size:7.5pt; padding:.5mm 2mm; }
  .ident .local{ margin-top:1.5mm; font-size:7.5pt; }

  .lede{ font-size:10pt; max-width:none; }
  .lede .par:first-child{ font-weight:600; }

  /* números em linha, sem caixa */
  .metrics{ display:flex; gap:0; border:0; margin:5mm 0; page-break-inside:avoid; }
  .metrics > div{ padding:0 6mm 0 0; background:none; }
  .metrics dt{ font-size:16pt; color:#111; }
  .metrics .rotulo{ font-size:7pt; color:#555; margin-top:1mm; letter-spacing:.06em; }
  .metrics dd, .metrics .prova{ display:none; }

  h2{ font-size:13pt; margin:6mm 0 3mm; max-width:none;
      border-bottom:1px solid #ccc; padding-bottom:1.5mm; page-break-after:avoid; }
  h3.sub{ font-size:8pt; color:#0b6b7a; margin-bottom:2.5mm; }
  .ato-lede{ font-size:9.5pt; max-width:none; margin-bottom:3mm; }

  /* projetos: cartão vira bloco de texto corrido */
  .projetos{ display:block; border:0; background:none; }
  .proj{ background:none; padding:0 0 4mm; page-break-inside:avoid; }
  .proj header{ display:block; }
  .proj h3{ font-size:11pt; color:#111; margin:0; display:inline; }
  .proj .cat{ font-size:7.5pt; color:#555; display:inline; }
  .proj .cat::after{ content:" · "; }
  .proj .link{ border:0; padding:0; color:#0b6b7a; font-size:8pt; }
  .proj .frase{ font-size:9.5pt; margin-top:1.5mm; }
  .proj .nums{ gap:5mm; margin-top:2mm; }
  .proj .nums b{ font-size:11pt; display:inline; }
  .proj .nums span{ display:inline; font-size:8pt; margin-left:1.5mm; }
  .proj .nums li{ display:inline-block; }
  .tags{ margin-top:2mm; gap:1.5mm; }
  .tags span{ border-color:#ccc; color:#444; font-size:7.5pt; padding:.3mm 1.8mm; }

  /* operação e governança viram listas compactas: é aqui que mora palavra-chave */
  .cards{ display:block; border:0; background:none; }
  .cards article{ background:none; padding:0 0 2mm; page-break-inside:avoid; }
  .cards h3{ font-size:9.5pt; display:inline; }
  .cards h3::before{ display:none; }
  .cards h3::after{ content:" — "; }
  .cards p{ display:inline; font-size:9pt; }
  .gov{ display:block; margin-top:3mm; }
  .gov article{ border:0; padding:0 0 1.5mm; page-break-inside:avoid; }
  .gov .n{ display:none; }
  .gov h3{ font-size:9.5pt; display:inline; }
  .gov h3::after{ content:" — "; }
  .gov p{ display:inline; font-size:9pt; }

  /* trajetória e formação, o miolo do currículo */
  .split{ display:block; margin-top:3mm; }
  .timeline li{ padding:0 0 3mm 4mm; page-break-inside:avoid; border-color:#ddd; }
  .timeline li::before{ background:#0b6b7a; }
  .timeline h4{ font-size:10.5pt; margin:.5mm 0; }
  .timeline .per{ font-size:8pt; }
  .timeline .emp{ font-size:9pt; color:#0b6b7a; font-weight:600; margin-bottom:1mm; }
  .timeline p{ font-size:9pt; }
  .formacao li{ border-color:#ddd; }
  .stack{ margin-top:4mm; gap:3mm; }
  .stack ul{ gap:1.5mm; }
  .stack li{ border-color:#ccc; color:#333; font-size:8pt; padding:.3mm 1.8mm; }

  .eu{ display:block; border:0; background:none; }
  .eu article{ background:none; padding:0 0 2mm; }
  .eu b{ font-size:8pt; display:inline; }
  .eu b::after{ content:" — "; }
  .eu p{ display:inline; font-size:9pt; }

  /* fechamento: o link do site é o que puxa pro trabalho vivo */
  .logistica dl{ display:flex; border:0; background:none; gap:6mm; }
  .logistica dl > div{ background:none; padding:0; }
  .logistica dt{ font-size:7.5pt; }
  .logistica dd{ font-size:9pt; }
  .contato{ gap:3mm; margin-top:3mm; }
  .contato a{ border:0; padding:0; font-size:9.5pt; color:#0b6b7a; text-decoration:underline; }
  .contato a.primary{ background:none; color:#0b6b7a; font-weight:600; }
  #btn-pdf{ display:none; }

  :where(.reveal, .cards article, .proj, .gov article, .gaps article,
         .timeline li, .stack .grupo, .formacao li){ opacity:1; transform:none; filter:none; }
  a{ color:#0b6b7a; }
  .rodape{ border-top:1px solid #ccc; padding-top:3mm; margin-top:4mm; }
  .rodape p{ font-size:7.5pt; }
}