/* =====================================================================================================
 * site.css — o visual das páginas PÚBLICAS do Elucira (landing, acesso, guia, privacidade, status, 404).
 *
 * Pedido do Castro (15/10/2026): a landing parecia "página de IA". A identidade continua a do Elucira
 * (verde #163D3B e creme #F5F2EC), agora com profundidade: tinta escura, papel, latão de selo, títulos
 * com serifa (cara de documento, de relatório) e rótulos em mono (número de caso, protocolo).
 * Referência de interação: galdur.com.br — movimento que responde à pessoa, sem virar enfeite.
 *
 * Só vale dentro de `body.site` — as telas internas (painel, campo) seguem com produto.css/ui.css.
 * Fontes locais, OFL (assets/fontes/OFL-*.txt). Nenhuma requisição externa.
 * ===================================================================================================== */

@font-face{font-family:"Newsreader Display";src:url("/assets/fontes/newsreader-display.woff2") format("woff2");font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader Display";src:url("/assets/fontes/newsreader-display-italic.woff2") format("woff2");font-weight:400 600;font-style:italic;font-display:swap}
@font-face{font-family:"Geist";src:url("/assets/fontes/geist-latin.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("/assets/fontes/geist-mono-latin.woff2") format("woff2");font-weight:400 600;font-style:normal;font-display:swap}

.site{
  --s-tinta:#0f2523;
  --s-tinta-2:#163d3b;
  --s-tinta-3:#1c4743;
  --s-musgo:#336452;
  --s-salvia:#a3bcae;
  --s-papel:#f5f2ec;      /* creme: texto e detalhes SOBRE a tinta */
  --s-fundo:#ffffff;      /* a base da página: branco (Castro, 15/10/2026) */
  --s-papel-2:#ece5d8;
  --s-papel-3:#e3d9c7;
  --s-folha:#ffffff;
  --s-grafite:#18312f;
  --s-cinza:#56665f;
  --s-latao:#c99a4b;
  --s-latao-2:#e3bd72;
  --s-latao-escuro:#8a6224;
  --s-linha-escura:rgba(226,214,186,.14);
  --s-linha-papel:rgba(24,49,47,.13);
  --s-serif:"Newsreader Display","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --s-sans:"Geist","Segoe UI",system-ui,-apple-system,sans-serif;
  --s-mono:"Geist Mono",ui-monospace,"Cascadia Mono","SF Mono",Menlo,Consolas,monospace;
  --s-raio:20px;
  --topo-h:78px; /* o cabeçalho flutua sobre a capa escura de cada página: a primeira seção reserva esta altura */
  --s-saida:cubic-bezier(.22,.8,.3,1);
  --s-mola:cubic-bezier(.34,1.4,.64,1);
  /* os tokens do produto passam a apontar para a paleta do site — quem usa var(--el-*) aqui herda o novo visual */
  --el-bg:var(--s-fundo);
  --el-surface:var(--s-folha);
  --el-ink:var(--s-grafite);
  --el-muted:var(--s-cinza);
  --el-primary:var(--s-tinta-2);
  --el-accent:var(--s-musgo);
  --el-line:var(--s-linha-papel);
  --el-soft:var(--s-papel-2);
  --el-font:var(--s-sans);
  margin:0;
  background:var(--s-fundo);
  color:var(--s-grafite);
  font:400 16px/1.65 var(--s-sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.site *,.site *::before,.site *::after{box-sizing:border-box}
.site ::selection{background:var(--s-latao-2);color:var(--s-tinta)}
.site h1,.site h2,.site h3,.site h4,.site p{margin-top:0}
.site a{color:inherit}
.site img,.site svg,.site video,.site canvas{display:block;max-width:100%}

/* ---------------------------------------------------------------------------------- container e ritmo */
.site .s-conteiner{width:min(1240px,calc(100% - 64px));margin-inline:auto}
@media(max-width:620px){.site .s-conteiner{width:calc(100% - 40px)}}

/* superfícies: TINTA (escuro, com relevo de terreno) e PAPEL (claro, com grão de papel) */
.site .s-escuro{
  position:relative;
  background:
    radial-gradient(70% 60% at 85% 10%,rgba(201,154,75,.12),transparent 60%),
    radial-gradient(60% 70% at 0% 100%,rgba(51,100,82,.32),transparent 65%),
    var(--s-tinta);
  color:var(--s-papel);
  isolation:isolate;
}
.site{ /* o relevo (curvas de nível) das superfícies de tinta — também usado pela tela de acesso */
  --s-relevo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520' viewBox='0 0 520 520'%3E%3Cg fill='none' stroke='%23e2d6ba' stroke-opacity='.09' stroke-width='1'%3E%3Cpath d='M-20 120c80-40 160 30 250-10s170-60 310 10'/%3E%3Cpath d='M-20 160c90-30 150 40 250 0s180-50 310 20'/%3E%3Cpath d='M-20 200c100-20 140 50 250 10s190-40 310 30'/%3E%3Cpath d='M-20 300c70 30 170-20 260 20s170 50 280-10'/%3E%3Cpath d='M-20 340c80 20 160-30 260 10s180 60 280 0'/%3E%3Cpath d='M-20 380c90 10 150-40 260 0s190 70 280 10'/%3E%3Cpath d='M-20 440c60-20 180 20 270-10s170-40 270 10'/%3E%3C/g%3E%3C/svg%3E");
}
.site .s-escuro::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:var(--s-relevo);
  background-size:520px 520px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 30%,#000 30%,transparent 85%);mask-image:radial-gradient(120% 90% at 50% 30%,#000 30%,transparent 85%);
}
.site .s-papel{
  position:relative;background:var(--s-fundo);color:var(--s-grafite);isolation:isolate;
}
/* sem o grão de papel: no fundo branco ele só acinzentava (Castro, 15/10/2026). Fica desligado, à mão se voltar. */
.site .s-papel::before{
  content:none;position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.55;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .29 0 0 0 0 .22 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------------------------------ tipografia */
.site .s-titulo,.site h1,.site h2{font-family:var(--s-serif);font-weight:500;letter-spacing:-.02em;line-height:1.02;text-wrap:balance}
.site h3,.site h4{font-family:var(--s-sans);letter-spacing:-.01em}
.site .el-label,.site .s-rotulo{
  display:inline-flex;align-items:center;gap:10px;margin:0 0 18px;
  font:500 11.5px/1.4 var(--s-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--s-musgo);
}
.site .el-label::before,.site .s-rotulo::before{content:"";width:22px;height:1px;background:currentColor;opacity:.7}
.site .s-escuro .el-label,.site .s-escuro .s-rotulo{color:var(--s-latao-2)}
.site .s-mono{font-family:var(--s-mono)}

/* ------------------------------------------------------------------------------------------- botões */
.site .el-button{
  position:relative;min-height:52px;display:inline-flex;align-items:center;justify-content:center;gap:14px;
  padding:14px 22px;border-radius:999px;border:1px solid var(--s-tinta-2);
  background:var(--s-tinta-2);color:var(--s-papel);
  font:600 15px/1.2 var(--s-sans);letter-spacing:-.005em;text-decoration:none;cursor:pointer;
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 10px 24px -14px rgba(15,37,35,.7);
  transition:transform .35s var(--s-mola),background .25s,box-shadow .3s,border-color .25s,color .25s;
  overflow:hidden;isolation:isolate;
}
.site .el-button::after{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .7s var(--s-saida);
}
.site .el-button:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.1) inset,0 16px 30px -16px rgba(15,37,35,.75)}
.site .el-button:hover::after{transform:translateX(120%)}
.site .el-button:active{transform:translateY(0) scale(.985)}
.site .el-button--secondary{background:transparent;color:var(--s-tinta-2);box-shadow:none}
.site .el-button--secondary:hover{background:rgba(22,61,59,.06);box-shadow:none}
.site .s-escuro .el-button{background:var(--s-latao);border-color:var(--s-latao);color:var(--s-tinta);box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 14px 30px -16px rgba(201,154,75,.8)}
.site .s-escuro .el-button:hover{background:var(--s-latao-2);border-color:var(--s-latao-2)}
.site .s-escuro .el-button--secondary{background:transparent;color:var(--s-papel);border-color:rgba(245,242,236,.42);box-shadow:none}
.site .s-escuro .el-button--secondary:hover{background:rgba(245,242,236,.08);border-color:var(--s-papel)}
.site .button-arrow{width:19px;height:19px;flex:none;transition:transform .35s var(--s-mola)}
.site .el-button:hover .button-arrow,.site a:hover>.button-arrow{transform:translateX(4px)}
.site .el-button:focus-visible,.site a:focus-visible,.site summary:focus-visible,.site button:focus-visible{outline:3px solid var(--s-latao);outline-offset:4px}
.site .s-escuro :focus-visible{outline-color:var(--s-latao-2)}

/* ------------------------------------------------------------------------------------------ marca */
.site .el-brand{display:inline-flex;align-items:center;gap:11px;color:inherit;font:600 23px/1 var(--s-sans);letter-spacing:-.035em;text-decoration:none}
.site .el-brand img{width:32px;height:32px}

/* --------------------------------------------------------------------------------------- cabeçalho */
.site .skip{position:absolute;left:16px;top:-120px;z-index:60;padding:12px 16px;border-radius:12px;background:var(--s-papel);color:var(--s-tinta);font:600 14px/1.2 var(--s-sans);text-decoration:none;box-shadow:0 10px 30px -10px rgba(0,0,0,.5)}
.site .skip:focus{top:12px}
.site .site-topo{
  position:sticky;top:0;z-index:50;color:var(--s-papel);margin-bottom:calc(var(--topo-h) * -1);
  transition:background .35s,box-shadow .35s,backdrop-filter .35s;
}
.site .site-topo.rolou{background:rgba(12,31,29,.8);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);box-shadow:0 1px 0 var(--s-linha-escura)}
.site .site-topo-linha{height:var(--topo-h);display:flex;align-items:center;justify-content:space-between;gap:24px}
.site .site-nav{display:flex;align-items:center;gap:24px;font:500 14px/1 var(--s-sans)}
.site .site-nav a{text-decoration:none;color:rgba(245,242,236,.82);position:relative;padding:8px 0;transition:color .2s}
.site .site-nav a:not(.login)::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--s-latao-2);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--s-saida)}
.site .site-nav a:not(.login):hover{color:var(--s-papel)}
.site .site-nav a:not(.login):hover::after{transform:scaleX(1)}
.site .site-nav .login{
  display:inline-flex;align-items:center;gap:10px;padding:11px 18px;border-radius:999px;color:var(--s-tinta);
  background:var(--s-papel);font-weight:600;transition:background .25s,transform .3s var(--s-mola)
}
.site .site-nav .login:hover{background:#fff;transform:translateY(-1px)}
.site .s-pausa{
  display:inline-flex;align-items:center;gap:9px;min-height:40px;padding:8px 14px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(245,242,236,.22);background:transparent;color:rgba(245,242,236,.82);font:500 12.5px/1 var(--s-sans);
  transition:border-color .2s,color .2s,background .2s
}
.site .s-pausa:hover{border-color:rgba(245,242,236,.5);color:var(--s-papel)}
.site .s-pausa svg{width:14px;height:14px}
.site .s-pausa .icone-retomar{display:none}
.site .s-pausa[aria-pressed="true"] .icone-pausar{display:none}
.site .s-pausa[aria-pressed="true"] .icone-retomar{display:block}
/* o rótulo da pausa só aparece com folga; abaixo disso fica o ícone (o nome acessível continua no texto oculto) */
@media(max-width:1240px){.site .s-pausa span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.site .s-pausa{width:40px;padding:0;justify-content:center}}
/* sem espaço para tudo: saem os atalhos de seção (a página continua rolável); ficam o guia, a pausa e o acesso */
@media(max-width:1100px){.site .site-nav a[href^="#"]{display:none}.site .site-nav{gap:18px}}
.site .site-nav .login{white-space:nowrap}
@media(max-width:620px){.site{--topo-h:66px}.site .site-topo-linha{gap:12px}.site .site-nav a:not(.login){display:none}.site .site-nav{gap:10px}.site .site-nav .login{padding:10px 15px;font-size:13.5px}.site .el-brand{font-size:21px}.site .el-brand img{width:28px;height:28px}}
@media(max-width:430px){.site .site-nav .login .button-arrow{display:none}}
@media(max-width:350px){.site .site-nav .login{padding:9px 12px;font-size:12.5px}.site .el-brand{font-size:19px;gap:8px}}

/* --------------------------------------------------------------------------------------- rodapé */
.site .site-rodape{padding:56px 0 44px}
.site .site-rodape-linha{display:grid;grid-template-columns:auto 1fr auto auto auto;align-items:center;gap:28px}
.site .site-rodape p{margin:0;font-size:13px;color:rgba(245,242,236,.7)}
.site .site-rodape a{text-decoration:none;color:rgba(245,242,236,.85);font-size:13.5px}
.site .site-rodape a:hover{color:var(--s-latao-2)}
.site .site-rodape .el-brand{color:var(--s-papel);font-size:22px}
.site .site-rodape .el-brand img{width:28px;height:28px}
.site .site-rodape-fim{margin-top:34px;padding-top:22px;border-top:1px solid var(--s-linha-escura);display:flex;justify-content:space-between;gap:20px;font:500 11px/1.5 var(--s-mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(245,242,236,.45)}
@media(max-width:820px){.site .site-rodape-linha{grid-template-columns:1fr 1fr;gap:18px 24px}.site .site-rodape-linha>p:first-of-type{grid-column:1/-1;order:-1}.site .site-rodape-linha>.el-brand{grid-column:1/-1;order:-2}}
@media(max-width:620px){.site .site-rodape-fim{flex-direction:column}}

/* --------------------------------------------------------------------- revelação ao rolar (movimento.js) */
/* A entrada é ANIMAÇÃO de `translate`/`scale` + opacidade, não transição de `transform`: assim o `transform` e a
 * `transition` próprios de cada cartão (o levantar no hover) continuam valendo depois que ele aparece. */
.site.s-anima [data-revela]:not(.revelado){opacity:0}
.site.s-anima [data-revela].revelado{animation:s-revela 1s var(--s-saida) both;animation-delay:calc(var(--i,0) * 90ms)}
.site.s-anima [data-revela="esquerda"].revelado{animation-name:s-revela-esquerda}
.site.s-anima [data-revela="escala"].revelado{animation-name:s-revela-escala}
@keyframes s-revela{from{opacity:0;translate:0 28px}to{opacity:1;translate:none}}
@keyframes s-revela-esquerda{from{opacity:0;translate:-32px 0}to{opacity:1;translate:none}}
@keyframes s-revela-escala{from{opacity:0;scale:.965}to{opacity:1;scale:none}}
.site .s-linhas>.s-linha{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.site .s-linhas>.s-linha>span{display:inline-block}
.site.s-anima .s-linhas>.s-linha>span{transform:translateY(105%);transition:transform 1.1s var(--s-saida);transition-delay:calc(var(--i,0) * 120ms + 120ms)}
.site.s-anima .s-linhas.revelado>.s-linha>span{transform:none}

/* ----------------------------------------------------------------- movimento pausado / movimento reduzido */
/* Pausado: nada anima — nem os laços (onda do áudio, pulsos) nem as entradas. É `animation:none`, e NÃO
 * `animation-play-state:paused`: pausar congelaria cada entrada no primeiro quadro, com opacidade 0 — o formulário do
 * /login/ (que também lê a escolha guardada) e o texto de cada etapa ficariam invisíveis para quem pausou. */
html[data-movimento="pausado"] .site *,html[data-movimento="pausado"] .site *::before,html[data-movimento="pausado"] .site *::after{animation:none!important}
html[data-movimento="pausado"] .site [data-revela]{opacity:1!important;translate:none!important;scale:none!important}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  .site *,.site *::before,.site *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .site [data-revela],.site .s-linhas>.s-linha>span{opacity:1!important;transform:none!important;translate:none!important;scale:none!important}
  .site .s-pausa{display:none}
}