/* =========================================================================
   AKROS — base: reset, ambiente, navegação, utilitários
   ========================================================================= */

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  font-family:var(--sans);
  font-size:16px;line-height:1.55;color:var(--body);
  background:#A9BFCF;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
::selection{background:rgba(10,128,226,.22);color:var(--ink)}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:calc(4px * var(--r))}

/* estado congelado: usado para saltar capítulos sem animar a transição */
.instant *,.instant *::before,.instant *::after{animation:none!important;transition:none!important}

/* ---------- ambiente de fundo (fixo, atrás de tudo) ---------- */
.ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
/* Cores amostradas da imagem de referencia. O fundo pálido de antes era o
   que apagava a rede: sem esse azul fechado à direita o branco nao salta. */
.ambient__wash{
  position:absolute;inset:0;
  background:
    radial-gradient(62% 58% at -8% -12%, #DEEFF8 0%, rgba(222,239,248,0) 62%),
    radial-gradient(72% 92% at 108% 56%, #526880 0%, rgba(82,104,128,0) 62%),
    linear-gradient(107deg,
      var(--bg-a) 0%, #BED2E0 24%, #A3BACA 52%, #859BB0 74%, var(--bg-d) 96%);
}
.ambient__blob{position:absolute;border-radius:50%;filter:blur(120px);will-change:transform}
.ambient__blob--a{
  width:min(58vw,900px);aspect-ratio:1;top:-22%;left:52%;
  background:radial-gradient(circle,rgba(255,255,255,.85),rgba(255,255,255,0) 66%);
  animation:drift-a 26s ease-in-out infinite;
}
.ambient__blob--b{
  width:min(52vw,820px);aspect-ratio:1;bottom:-30%;left:-14%;
  background:radial-gradient(circle,rgba(120,158,196,.40),rgba(120,158,196,0) 68%);
  animation:drift-b 33s ease-in-out infinite;
}
.ambient__blob--c{
  width:min(40vw,620px);aspect-ratio:1;top:34%;right:-12%;
  background:radial-gradient(circle,rgba(10,128,226,.16),rgba(10,128,226,0) 70%);
  animation:drift-a 38s ease-in-out infinite reverse;
}
@keyframes drift-a{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-6vw,4vh,0) scale(1.12)}}
@keyframes drift-b{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(5vw,-4vh,0) scale(1.08)}}

.ambient__grain{
  position:absolute;inset:-120%;opacity:.025;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 5.2s steps(5) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}25%{transform:translate(-2.5%,1.8%)}
  50%{transform:translate(1.8%,-2.4%)}75%{transform:translate(-1.6%,-1.6%)}100%{transform:translate(0,0)}
}
.ambient__vignette{
  position:absolute;inset:0;
  background:radial-gradient(ellipse 118% 82% at 46% 4%, transparent 44%, rgba(58,84,110,.30) 100%);
}

/* ---------- navegação ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  height:var(--nav-h);display:flex;align-items:center;
  padding:0 var(--gutter);
  transition:height .4s var(--ease),background .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
/* 07/10, 23h15, «diminui um pouco a espessura da header»: a barra que
   aparece ao rolar foi de 66 para 56 px. Por cima da hero (sem fundo) ela
   segue com --nav-h (68): a hero não muda. */
.nav.is-stuck{
  height:56px;
  background:rgba(240,246,251,.72);
  -webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);
  border-bottom-color:rgba(10,31,69,.08);
  box-shadow:0 10px 30px -22px rgba(12,34,58,.6);
}
.nav__inner{width:100%;max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;gap:24px}
/* na barra fina o miolo encolhe junto, senão o «Entrar» encosta nas bordas */
.nav.is-stuck .brand__mark{width:40px}
.nav.is-stuck .nav__link{padding-top:7px;padding-bottom:7px}
.nav.is-stuck .nav__cta{padding-top:8px;padding-bottom:8px}
.nav .brand__mark{transition:width .4s var(--ease)}
.nav .nav__link{transition:color .3s var(--ease),padding .4s var(--ease)}
.nav .nav__cta{transition:transform .35s var(--ease-pop),box-shadow .35s var(--ease),background .3s,padding .4s var(--ease)}

.brand{display:inline-flex;align-items:center;gap:11px;flex:none}
.brand__mark{display:block;width:46px;height:auto;flex:none}
.brand__lockup{display:flex;flex-direction:column;gap:6px}
.brand__byline{font-size:10px;line-height:1.2;letter-spacing:.02em;color:#425C73;white-space:nowrap}
.brand__byline b{font-size:10px;letter-spacing:.07em;color:#147CB8;font-weight:700}
.brand__word{
  font-family:Georgia,"Times New Roman",serif;font-weight:700;color:var(--ink);
  font-size:19px;letter-spacing:.13em;line-height:1;
}
.brand__dot{
  display:none;
  width:5px;height:5px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 3px rgba(10,128,226,.16);
  transform:translateY(-2px);
}

.nav__menu{
  margin-left:auto;margin-right:auto;position:relative;
  display:flex;align-items:center;gap:clamp(4px,.9vw,18px);padding:4px;
}
.nav__pill{
  position:absolute;top:4px;height:calc(100% - 8px);left:0;width:0;
  border-radius:calc(100px * var(--r));background:rgba(255,255,255,.7);
  border:1px solid rgba(10,31,69,.13);
  opacity:0;transform-origin:center;
  transition:transform .48s var(--ease),width .48s var(--ease),opacity .3s var(--ease);
  pointer-events:none;
}
.nav__link{
  position:relative;z-index:1;font-size:14.5px;color:var(--muted);
  padding:9px 17px;border-radius:calc(100px * var(--r));white-space:nowrap;
  transition:color .3s var(--ease);
}
.nav__link:hover,.nav__link[aria-current="page"]{color:var(--ink)}

.nav__cta{
  flex:none;font-size:14.5px;font-weight:500;color:var(--ink);
  background:rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.9);
  padding:10px 22px;border-radius:calc(100px * var(--r));
  box-shadow:0 10px 24px -14px rgba(12,34,58,.55),inset 0 1px 0 #fff;
  transition:transform .35s var(--ease-pop),box-shadow .35s var(--ease),background .3s;
}
.nav__cta:hover{transform:translateY(-1.5px);box-shadow:0 16px 32px -14px rgba(12,34,58,.6),inset 0 1px 0 #fff}
.nav__cta:active{transform:translateY(0)}

.nav__burger{display:none;flex:none;margin-left:auto;width:42px;height:42px;border-radius:calc(12px * var(--r));
  border:1px solid var(--line);background:rgba(255,255,255,.6);align-items:center;justify-content:center}
.nav__burger i{display:block;width:16px;height:1.5px;background:var(--ink);position:relative}
.nav__burger i::before,.nav__burger i::after{content:"";position:absolute;left:0;width:16px;height:1.5px;background:var(--ink)}
.nav__burger i::before{top:-5px}.nav__burger i::after{top:5px}

@media (max-width:1080px){
  .nav__menu{display:none}
  .nav__cta{display:none}
  .nav__burger{display:inline-flex}
}

/* ---------- entradas ---------- */
.js [data-enter]{opacity:0;transform:translateY(16px);filter:blur(7px)}
[data-enter].is-in{
  opacity:1;transform:none;filter:blur(0);
  transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease);
  transition-delay:var(--d,0s);
}

.mask-line{display:block;overflow:hidden}
.mask-line > i{display:block;font-style:normal}
.js .mask-line > i{transform:translateY(112%);filter:blur(9px)}
.is-in .mask-line > i,.mask-line.is-in > i{
  transform:none;filter:blur(0);
  transition:transform 1.05s var(--ease),filter 1.05s var(--ease);
  transition-delay:var(--d,0s);
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  [data-enter]{opacity:1!important;transform:none!important;filter:none!important}
  .mask-line > i{transform:none!important;filter:none!important}
}


/* ---------- painel de menu (telas estreitas) ---------- */
.nav__burger i{transition:transform .3s var(--ease),background .2s}
.nav__burger i::before,.nav__burger i::after{transition:transform .35s var(--ease-pop),top .35s var(--ease)}
.nav__burger[aria-expanded="true"] i{background:transparent}
.nav__burger[aria-expanded="true"] i::before{top:0;transform:rotate(45deg)}
.nav__burger[aria-expanded="true"] i::after{top:0;transform:rotate(-45deg)}

.drawer{
  position:fixed;top:0;left:0;right:0;z-index:55;
  padding:calc(var(--nav-h) + 8px) var(--gutter) 26px;
  background:rgba(240,246,251,.9);
  -webkit-backdrop-filter:blur(26px) saturate(160%);backdrop-filter:blur(26px) saturate(160%);
  border-bottom:1px solid rgba(10,31,69,.09);
  box-shadow:0 30px 60px -30px rgba(12,34,58,.55);
  transform:translateY(-102%);
  transition:transform .5s var(--ease);
}
.drawer.is-open{transform:none}
.drawer__list{display:flex;flex-direction:column}
.drawer__list a{
  padding:13px 2px;font-size:17px;color:var(--ink);
  border-bottom:1px solid rgba(10,31,69,.07);
}
.drawer__list a:first-letter{text-transform:uppercase}
.drawer__cta{
  display:block;margin-top:20px;text-align:center;
  font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:#fff;padding:15px 24px;border-radius:calc(100px * var(--r));
  background:linear-gradient(103deg,var(--accent-lo),var(--accent) 48%,var(--accent-hi));
  box-shadow:var(--sh-btn);
}
@media (min-width:1081px){.drawer{display:none}}

/* ---------- sem movimento: as seções ficam empilhadas ---------- */
@media (prefers-reduced-motion:reduce){
  .scene--curtain{height:auto}
  .hero{position:relative;height:auto;min-height:100svh}
  .pipeline{margin-top:0;transform:none;border-radius:0;box-shadow:none}
  .cortina__seam,.cortina__grip{display:none}
  .drawer{transition:none}
}

/* ---------- seção escondida na aba Site do Sentinel (js/conteudo.js) ----------
   O `hidden` sozinho perde para o display de quem estiliza a seção ou o link do
   menu; a marca vence sempre. O mosaico continua lendo o `hidden`. */
[data-site-oculta]{display:none!important}