/* =========================================================================
   IAPSE — sistema visual «soft UI» escuro
   Física do neumorfismo adaptada para fundo escuro: a luz vem de cima à
   esquerda (um brilho branco fraco, não um facho) e a sombra cai embaixo à
   direita. Tudo é moldado da MESMA superfície — não há borda em lugar nenhum.
   Um único arquivo, sem framework, sem build.
   ========================================================================= */

:root{
  /* superfície: o material de que tudo é feito */
  --superficie:#171a1f;
  --superficie-topo:rgba(23,26,31,.86);

  /* tinta */
  --tinta:#e8ecf1;          /* 14,8:1 sobre a superfície */
  --tinta-suave:#9aa4b2;    /*  6,9:1 — passa em AA com folga */
  --tinta-no-acento:#0b0f14;

  /* acento — o verde-água do próprio logo, não o violeta genérico */
  --acento:#37d3b8;         /*  9,5:1 sobre a superfície */
  --acento-2:#6c8cff;

  /* as duas fontes de luz */
  --luz:rgba(255,255,255,.055);
  --sombra:rgba(0,0,0,.70);

  /* as quatro profundidades */
  --extrudado:9px 9px 18px var(--sombra), -9px -9px 18px var(--luz);
  --extrudado-alto:14px 14px 26px rgba(0,0,0,.78), -14px -14px 26px rgba(255,255,255,.075);
  --extrudado-p:5px 5px 11px var(--sombra), -5px -5px 11px var(--luz);
  --afundado:inset 6px 6px 12px var(--sombra), inset -6px -6px 12px var(--luz);
  --afundado-fundo:inset 11px 11px 22px rgba(0,0,0,.80), inset -11px -11px 22px rgba(255,255,255,.06);
  --afundado-p:inset 3px 3px 7px var(--sombra), inset -3px -3px 7px var(--luz);

  --raio-g:32px; --raio:16px; --raio-p:12px;
  --medida:1120px;
  --transicao:300ms ease-out;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
[id]{scroll-margin-top:96px}
body{
  margin:0;
  background:var(--superficie);
  color:var(--tinta);
  font:400 1rem/1.7 "DM Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}

h1,h2,h3,.marca{font-family:"Plus Jakarta Sans","DM Sans","Segoe UI",system-ui,sans-serif;letter-spacing:-.02em;text-wrap:balance}
h1{font-weight:800;font-size:clamp(1.95rem,1.35rem + 2.4vw,3.2rem);line-height:1.1;margin:0 0 1.1rem;max-width:18ch}
h2{font-weight:800;font-size:clamp(1.55rem,1.2rem + 1.5vw,2.4rem);line-height:1.15;margin:0 0 .75rem}
h3{font-weight:700;font-size:1.2rem;line-height:1.3;margin:0 0 .5rem}
p{margin:0 0 1rem;max-width:66ch}
a{color:var(--acento);text-decoration-thickness:1px;text-underline-offset:3px}
img{max-width:100%;height:auto}

.olho{
  display:inline-block;font-size:.76rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--acento);margin:0 0 .9rem;
}
.suave{color:var(--tinta-suave)}

/* ---------- estrutura ---------- */
.faixa{padding-block:clamp(3.5rem,2rem + 6vw,7rem);padding-inline:20px}
.medida{max-width:var(--medida);margin-inline:auto}
.grade{display:grid;gap:clamp(1.25rem,.8rem + 1.6vw,2.5rem)}
.grade > *{min-width:0}
@media (min-width:860px){
  .grade-3{grid-template-columns:repeat(3,1fr)}
  .grade-2{grid-template-columns:repeat(2,1fr)}
}

/* ---------- cabeçalho ---------- */
.topo{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:50;
  background:var(--superficie-topo);backdrop-filter:blur(12px);
  padding:14px 20px;
}
.topo-interno{max-width:var(--medida);margin-inline:auto;display:flex;align-items:center;gap:16px;justify-content:space-between}
.marca{display:inline-flex;align-items:center;min-height:44px;gap:11px;font-weight:800;font-size:1.12rem;color:var(--tinta);text-decoration:none;letter-spacing:.01em}
.marca .selo{
  width:42px;height:42px;display:grid;place-items:center;flex:0 0 auto;
  border-radius:var(--raio-p);background:var(--superficie);box-shadow:var(--extrudado-p);
}
/* A marca da IAPSE entra como MÁSCARA, não como <img>: assim ela toma a cor do
   tema (var(--acento)) e continua nítida em qualquer tamanho. Um <img> ficaria
   preso à cor do arquivo. */
.marca .selo::before{
  content:"";width:23px;height:26px;background:var(--acento);
  -webkit-mask:url(/img/marca.svg) center/contain no-repeat;
          mask:url(/img/marca.svg) center/contain no-repeat;
}
.marca-rodape{
  width:34px;height:38px;margin:0 0 1.1rem;background:var(--tinta-suave);
  -webkit-mask:url(/img/marca.svg) center/contain no-repeat;
          mask:url(/img/marca.svg) center/contain no-repeat;
}
.menu{display:flex;align-items:center;gap:6px;list-style:none;margin:0;padding:0}
.menu a:not(.botao){
  display:inline-flex;align-items:center;min-height:44px;padding:0 14px;
  border-radius:var(--raio-p);color:var(--tinta-suave);text-decoration:none;
  font-size:.94rem;font-weight:500;transition:color var(--transicao),box-shadow var(--transicao);
}
.menu a:not(.botao):hover{color:var(--tinta);box-shadow:var(--extrudado-p)}
.menu a:not(.botao)[aria-current="page"]{color:var(--tinta);box-shadow:var(--afundado-p)}
.abrir-menu{display:none;width:48px;height:48px;border:0;border-radius:var(--raio-p);background:var(--superficie);color:var(--tinta);box-shadow:var(--extrudado-p);font-size:1.25rem;cursor:pointer}
.abrir-menu[aria-expanded="true"]{box-shadow:var(--afundado)}
@media (max-width:820px){
  .abrir-menu{display:grid;place-items:center}
  .menu{
    position:absolute;left:20px;right:20px;top:calc(100% + 10px);
    flex-direction:column;align-items:stretch;gap:4px;padding:12px;
    border-radius:var(--raio-g);background:var(--superficie);box-shadow:var(--extrudado-alto);
  }
  .menu[hidden]{display:none}
  .menu a:not(.botao){min-height:48px}
}

/* ---------- botões ---------- */
.botao{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:52px;padding:0 26px;border:0;cursor:pointer;
  border-radius:var(--raio);font:600 1rem/1 "DM Sans",system-ui,sans-serif;
  background:var(--superficie);color:var(--tinta);box-shadow:var(--extrudado);
  text-decoration:none;transition:transform var(--transicao),box-shadow var(--transicao);
}
.botao:hover{transform:translateY(-2px);box-shadow:var(--extrudado-alto)}
.botao:active{transform:translateY(1px);box-shadow:var(--afundado)}
.botao-primario{background:var(--acento);color:var(--tinta-no-acento);box-shadow:6px 6px 16px rgba(0,0,0,.6), -4px -4px 14px rgba(255,255,255,.06)}
.botao-primario:hover{box-shadow:9px 9px 22px rgba(0,0,0,.66), -6px -6px 18px rgba(255,255,255,.08)}
.botao-primario:active{box-shadow:inset 5px 5px 10px rgba(0,0,0,.35), inset -5px -5px 10px rgba(255,255,255,.18)}

:where(a,button,input,textarea,summary):focus-visible{
  outline:2px solid var(--acento);outline-offset:3px;border-radius:var(--raio-p);
}

/* ---------- cartões ---------- */
.cartao{
  padding:clamp(1.6rem,1.1rem + 1.6vw,2.6rem);
  border-radius:var(--raio-g);background:var(--superficie);box-shadow:var(--extrudado);
  transition:transform var(--transicao),box-shadow var(--transicao);
}
.cartao-vivo:hover{transform:translateY(-3px);box-shadow:var(--extrudado-alto)}
.cartao p:last-child{margin-bottom:0}
.poco{
  width:64px;height:64px;display:grid;place-items:center;margin-bottom:1.4rem;
  border-radius:20px;background:var(--superficie);box-shadow:var(--afundado-fundo);
  color:var(--acento);
}
.poco svg{width:28px;height:28px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- herói ---------- */
.heroi{padding-block:clamp(3rem,1.5rem + 6vw,6.5rem)}
.heroi-grade{display:grid;gap:clamp(2rem,1rem + 4vw,4rem);align-items:center}
@media (min-width:960px){.heroi-grade{grid-template-columns:1.05fr .95fr}}
.heroi p.entrada{font-size:clamp(1.02rem,.97rem + .3vw,1.18rem);color:var(--tinta-suave)}
.acoes{display:flex;flex-wrap:wrap;gap:14px;margin-top:2rem}

/* ---------- a sigla como painel ---------- */
.sigla{padding:clamp(1.5rem,1rem + 1.6vw,2.2rem);border-radius:var(--raio-g);background:var(--superficie);box-shadow:var(--afundado-fundo)}
.sigla-linha{display:flex;gap:10px;justify-content:center;margin-bottom:1.6rem}
.tecla{
  width:clamp(44px,11vw,60px);height:clamp(52px,13vw,70px);display:grid;place-items:center;
  border-radius:var(--raio-p);background:var(--superficie);box-shadow:var(--extrudado-p);
  font:800 clamp(1.3rem,.9rem + 1.4vw,1.85rem)/1 "Plus Jakarta Sans",system-ui,sans-serif;
  color:var(--tinta-suave);
}
.tecla.viva{color:var(--acento);box-shadow:var(--afundado)}
.sigla dl{margin:0;display:grid;gap:12px}
.sigla div{display:flex;gap:14px;align-items:baseline;padding:12px 16px;border-radius:var(--raio);box-shadow:var(--extrudado-p)}
.sigla dt{font:800 1.05rem/1 "Plus Jakarta Sans",system-ui,sans-serif;color:var(--acento);width:1.2em;flex:0 0 auto}
.sigla dd{margin:0;font-size:.97rem;color:var(--tinta-suave)}
.sigla dd b{color:var(--tinta);font-weight:600}

/* ---------- passos (sequência de verdade) ---------- */
.passos{counter-reset:passo;display:grid;gap:1.25rem}
@media (min-width:860px){.passos{grid-template-columns:repeat(3,1fr)}}
.passo{position:relative;padding:2rem 1.75rem 1.75rem;border-radius:var(--raio-g);box-shadow:var(--afundado)}
.passo::before{
  counter-increment:passo;content:counter(passo,decimal-leading-zero);
  position:absolute;top:-14px;left:1.75rem;display:grid;place-items:center;
  width:44px;height:44px;border-radius:50%;background:var(--superficie);box-shadow:var(--extrudado-p);
  font:800 .95rem/1 "Plus Jakarta Sans",system-ui,sans-serif;color:var(--acento);
}
.passo h3{margin-top:1.1rem}
.passo p{margin-bottom:0;color:var(--tinta-suave);font-size:.97rem}

/* ---------- lista com marcador afundado ---------- */
.lista{list-style:none;margin:0;padding:0;display:grid;gap:.85rem}
.lista li{display:flex;gap:.8rem;align-items:flex-start;color:var(--tinta-suave);min-width:0;overflow-wrap:anywhere}
.lista li::before{
  content:"";flex:0 0 auto;width:12px;height:12px;margin-top:.5rem;border-radius:50%;
  background:var(--acento);box-shadow:0 0 0 5px rgba(55,211,184,.10);
}

/* ---------- contato ---------- */
.contato{display:grid;gap:1.25rem}
@media (min-width:720px){.contato{grid-template-columns:repeat(2,1fr)}}
.contato a.cartao{display:block;text-decoration:none;color:var(--tinta)}
.contato a.cartao span{display:block;color:var(--acento);font-size:1.05rem;font-weight:600;margin-top:.35rem;word-break:break-word}

/* ---------- texto corrido (páginas legais) ---------- */
.texto{padding:clamp(1.8rem,1.2rem + 2vw,3.2rem);border-radius:var(--raio-g);box-shadow:var(--extrudado)}
.texto h2{margin-top:0}
.texto h3{margin:2.2rem 0 .6rem;font-size:1.08rem;color:var(--tinta)}
.texto p,.texto li{color:var(--tinta-suave)}
.texto ul{padding-left:1.1rem;display:grid;gap:.5rem;margin:0 0 1rem}
.texto strong{color:var(--tinta)}

/* ---------- vazio honesto ---------- */
.vazio{text-align:center;padding:clamp(2.5rem,2rem + 3vw,4.5rem);border-radius:var(--raio-g);box-shadow:var(--afundado-fundo)}
.vazio p{margin-inline:auto}

/* ---------- rodapé ---------- */
.rodape{padding:clamp(2.5rem,2rem + 2vw,4rem) 20px;box-shadow:var(--afundado)}
.rodape-grade{max-width:var(--medida);margin-inline:auto;display:grid;gap:2rem}
@media (min-width:760px){.rodape-grade{grid-template-columns:1.4fr 1fr}}
.rodape p,.rodape li{font-size:.92rem;color:var(--tinta-suave);line-height:1.8}
.rodape h3{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-suave);font-weight:700}
.rodape ul{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.rodape a{color:var(--tinta);text-decoration:none}
.rodape a:hover{color:var(--acento);text-decoration:underline}
.rodape .fino{margin-top:2rem;padding-top:1.4rem;box-shadow:inset 0 1px 0 rgba(255,255,255,.05);font-size:.85rem}