/* ============================================================
   CINI SYSTEMS — BASE
   Direção "sanduíche": miolo claro, faixas escuras onde o
   azul-noite trabalha (hero, chamada final, rodapé, telas).

   Os mesmos nomes de variável são redefinidos dentro de .escuro.
   Todo componente usa var() e se adapta sozinho aos dois contextos.
   ============================================================ */

:root{
  /* ---- contexto claro (padrão) ---- */
  --fundo:#F4F7FB;
  --superficie:#FFFFFF;
  --superficie-2:#E9EEF6;
  --linha:#DBE3EE;
  --linha-forte:#C1CEE0;

  --texto:#0F1B2E;
  --texto-2:#4A5870;
  --texto-3:#6F7E95;

  --ouro:#C9A227;        /* preenchimento, borda, detalhe */
  --ouro-txt:#8A6810;    /* dourado quando vira letra */
  --ouro-fundo:rgba(201,162,39,.13);
  --ouro-borda:rgba(201,162,39,.48);

  --ok:#14684A;      --ok-fundo:#E2F2EA;      --ok-borda:#B7DECB;
  --atencao:#8A6810; --atencao-fundo:#FAEFD6; --atencao-borda:#E8D19A;
  --risco:#A8322A;   --risco-fundo:#FBE8E6;   --risco-borda:#EEC3BE;

  --topo-luz:inset 0 1px 0 rgba(255,255,255,.9);
  --sombra:0 14px 30px -22px rgba(15,27,46,.42);
  --sombra-alta:0 30px 60px -32px rgba(15,27,46,.5);

  --display:"Archivo",system-ui,sans-serif;
  --corpo:"Instrument Sans",system-ui,sans-serif;
  --dado:"Azeret Mono",ui-monospace,monospace;

  --max:1180px;
  --gutter:clamp(20px,5vw,48px);
  --topo:68px;
}

/* ---- contexto escuro ---- */
.escuro{
  --fundo:#131F33;
  --superficie:#1C2C46;
  --superficie-2:#223552;
  --linha:#2E4266;
  --linha-forte:#3E5680;

  --texto:#EDF2FA;
  --texto-2:#A7B7D2;
  --texto-3:#7F8FAC;

  --ouro:#D6B03C;
  --ouro-txt:#D6B03C;
  --ouro-fundo:rgba(214,176,60,.13);
  --ouro-borda:rgba(214,176,60,.42);

  --ok:#68D4A5;      --ok-fundo:rgba(76,190,144,.16);      --ok-borda:rgba(76,190,144,.34);
  --atencao:#EFC069; --atencao-fundo:rgba(226,175,78,.16); --atencao-borda:rgba(226,175,78,.34);
  --risco:#F08A7C;   --risco-fundo:rgba(226,104,90,.16);   --risco-borda:rgba(226,104,90,.34);

  --topo-luz:inset 0 1px 0 rgba(237,242,250,.06);
  --sombra:0 24px 48px -32px rgba(0,0,0,.85);
  --sombra-alta:0 40px 80px -40px rgba(0,0,0,.95);

  color:var(--texto);
}

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

body{
  margin:0;
  color:var(--texto);
  font-family:var(--corpo);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  background-color:var(--fundo);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(31,58,99,.10) 1px, transparent 0),
    linear-gradient(to right, rgba(31,58,99,.030) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(31,58,99,.030) 1px, transparent 1px);
  background-size:48px 48px,48px 48px,48px 48px;
  background-attachment:fixed;
}

/* textura de rede dentro das faixas escuras */
.escuro{
  background-color:var(--fundo);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(214,176,60,.13) 1px, transparent 0),
    linear-gradient(to right, rgba(237,242,250,.026) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(237,242,250,.026) 1px, transparent 1px);
  background-size:48px 48px,48px 48px,48px 48px;
}

img{max-width:100%;display:block;}
p{margin:0;}
h1,h2,h3,h4{font-family:var(--display);line-height:1.08;margin:0;letter-spacing:-.025em;color:var(--texto);}
a{color:inherit;}

.container{max-width:var(--max);margin:0 auto;padding:0 var(--gutter);}

/* ---------- tipo utilitário ---------- */
.olho{
  font-family:var(--dado);font-size:11px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ouro-txt);
}
.lead{font-size:19px;color:var(--texto-2);max-width:64ch;}
.regua{display:flex;align-items:center;gap:12px;margin-bottom:18px;}
.regua::before{
  content:"";width:26px;height:2px;flex:none;
  background:linear-gradient(90deg,var(--ouro),rgba(201,162,39,.18));
}

/* ---------- revelação por rolagem ---------- */
html.js [data-revela]{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1);}
html.js [data-revela].revelado{opacity:1;transform:none;}

/* ---------- pilares ---------- */
.pilares{
  display:flex;font-family:var(--dado);font-size:11px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--texto-3);
}
.pilares span{padding-right:18px;margin-right:18px;border-right:1px solid var(--linha-forte);}
.pilares span:last-child{border-right:0;margin-right:0;padding-right:0;}

/* ---------- botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--corpo);font-size:15px;font-weight:600;
  padding:14px 26px;border-radius:3px;text-decoration:none;cursor:pointer;
  border:1px solid #B5901D;color:#1B1403;
  background:linear-gradient(180deg,#E2BC46,#C9A227);
  box-shadow:0 10px 22px -14px rgba(138,104,16,.75);
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 30px -14px rgba(138,104,16,.85);filter:brightness(1.05);}
.btn:active{transform:translateY(0);}
.escuro .btn{border-color:var(--ouro);box-shadow:0 10px 26px -14px rgba(214,176,60,.8);}
.escuro .btn:hover{box-shadow:0 16px 34px -14px rgba(214,176,60,.9);}

.btn-vazado{background:none;color:var(--ouro-txt);box-shadow:none;border-color:var(--ouro-borda);}
.btn-vazado:hover{background:var(--ouro-fundo);border-color:var(--ouro);box-shadow:none;}
.btn-neutro{background:none;border-color:var(--linha-forte);color:var(--texto);box-shadow:none;}
.btn-neutro:hover{border-color:var(--texto-3);background:var(--superficie-2);box-shadow:none;}
.escuro .btn-neutro:hover{background:rgba(237,242,250,.06);}
.acoes{display:flex;flex-wrap:wrap;gap:13px;}

/* ---------- selo de situação ---------- */
.status{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--dado);font-size:10.5px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;padding:4px 10px;border-radius:20px;white-space:nowrap;
  border:1px solid transparent;
}
.status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none;}
.status-disponivel{background:var(--ok-fundo);color:var(--ok);border-color:var(--ok-borda);}
.status-disponivel::before{animation:pulso 2.4s ease-out infinite;}
@keyframes pulso{
  0%{box-shadow:0 0 0 0 rgba(20,104,74,.4);}
  70%{box-shadow:0 0 0 7px rgba(20,104,74,0);}
  100%{box-shadow:0 0 0 0 rgba(20,104,74,0);}
}
.status-desenvolvimento{background:var(--atencao-fundo);color:var(--atencao);border-color:var(--atencao-borda);}
.status-roteiro{background:var(--superficie-2);color:var(--texto-3);border-color:var(--linha);}

/* ---------- etiqueta de norma ---------- */
.norma{
  display:inline-block;font-family:var(--dado);font-size:11.5px;font-weight:500;
  padding:4px 10px;border:1px solid var(--linha-forte);border-radius:3px;
  color:var(--texto-2);text-decoration:none;white-space:nowrap;background:var(--superficie);
  transition:border-color .16s ease,color .16s ease;
}
a.norma:hover{border-color:var(--ouro);color:var(--ouro-txt);}
.normas-lista{display:flex;flex-wrap:wrap;gap:6px;}

/* ============================================================
   NAVEGAÇÃO
   ============================================================ */
.nav{
  position:sticky;top:0;z-index:90;
  background:rgba(244,247,251,.86);backdrop-filter:blur(14px) saturate(150%);
  border-bottom:1px solid var(--linha);
}
.nav-int{
  max-width:var(--max);margin:0 auto;padding:0 var(--gutter);
  height:var(--topo);display:flex;align-items:center;gap:30px;
}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;margin-right:auto;}
.logo svg{width:28px;height:28px;flex:none;}
.logo-txt{display:flex;flex-direction:column;line-height:1;}
.logo-txt b{font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:-.04em;color:var(--texto);}
.logo-txt i{
  font-style:normal;font-family:var(--dado);font-size:8.5px;font-weight:500;
  letter-spacing:.26em;text-transform:uppercase;color:var(--ouro-txt);margin-top:3px;
}
.nav-links{display:flex;gap:28px;}
.nav-links a{
  position:relative;font-size:15px;font-weight:500;text-decoration:none;
  color:var(--texto-2);padding:4px 0;transition:color .16s ease;
}
.nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
  background:var(--ouro);transform:scaleX(0);transform-origin:left;
  transition:transform .22s ease;
}
.nav-links a:hover{color:var(--texto);}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1);}
.nav-links a[aria-current="page"]{color:var(--texto);}
.nav .btn{padding:10px 18px;font-size:14px;}
.nav-toggle{
  display:none;width:40px;height:40px;padding:0;cursor:pointer;
  border:1px solid var(--linha-forte);border-radius:3px;background:none;
  flex-direction:column;justify-content:center;align-items:center;gap:4px;
}
.nav-toggle span{display:block;width:17px;height:1.5px;background:var(--texto);}

/* ---------- trilha ---------- */
.trilha{
  border-bottom:1px solid var(--linha);background:var(--superficie);
  font-family:var(--dado);font-size:12px;
}
.trilha ol{
  max-width:var(--max);margin:0 auto;padding:12px var(--gutter);
  list-style:none;display:flex;flex-wrap:wrap;gap:8px;color:var(--texto-3);
}
.trilha li::after{content:"/";margin-left:8px;color:var(--linha-forte);}
.trilha li:last-child::after{content:"";}
.trilha a{color:var(--texto-3);text-decoration:none;}
.trilha a:hover{color:var(--ouro-txt);}

/* ============================================================
   BLOCOS
   ============================================================ */
.bloco{padding:96px 0;position:relative;}
.bloco::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,var(--ouro-borda),var(--linha) 22%,var(--linha) 78%,transparent);
}
.bloco:last-of-type::after{display:none;}
.escuro.bloco::after{display:none;}
.bloco h2{font-size:clamp(28px,3.9vw,44px);font-weight:700;max-width:20ch;}
/* faixa alternada do miolo: branco sobre o cinza-azulado da página */
.bloco-alt{background:var(--superficie);border-top:1px solid var(--linha);}

/* ---------- cartão ---------- */
.cartao{
  background:var(--superficie);border:1px solid var(--linha);border-radius:6px;padding:26px;
  box-shadow:var(--topo-luz),var(--sombra);
}

/* ============================================================
   TELA DO PRODUTO — sempre escura, é painel de instrumento
   ============================================================ */
.tela{
  border:1px solid var(--linha-forte);border-radius:8px;overflow:hidden;
  background-color:var(--fundo);
  box-shadow:var(--sombra-alta);
}
.tela-barra{
  display:flex;align-items:center;gap:11px;padding:10px 15px;
  background:var(--superficie-2);border-bottom:1px solid var(--linha);
}
.tela-pontos{display:flex;gap:6px;}
.tela-pontos i{width:8px;height:8px;border-radius:50%;background:var(--linha-forte);display:block;}
.tela-titulo{
  font-family:var(--dado);font-size:11px;letter-spacing:.04em;color:var(--texto-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tela-corpo{display:grid;grid-template-columns:172px 1fr;min-height:300px;}
.tela-menu{
  background:rgba(0,0,0,.18);border-right:1px solid var(--linha);
  padding:12px 0;font-family:var(--dado);font-size:11.5px;
}
.tela-menu span{display:block;padding:8px 15px;color:var(--texto-3);border-left:2px solid transparent;}
.tela-menu span.on{
  color:var(--texto);border-left-color:var(--ouro);
  background:linear-gradient(90deg,rgba(214,176,60,.12),transparent);
}
.tela-main{padding:20px;min-width:0;}
.tela-h{font-family:var(--display);font-size:17px;font-weight:700;margin-bottom:3px;}
.tela-sub{font-family:var(--dado);font-size:11px;color:var(--texto-3);margin-bottom:17px;}
.tela-tab{width:100%;border-collapse:collapse;font-family:var(--dado);font-size:12px;}
.tela-tab th{
  text-align:left;font-weight:500;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--texto-3);padding:0 10px 8px 0;border-bottom:1px solid var(--linha);
}
.tela-tab td{padding:9px 10px 9px 0;border-bottom:1px solid rgba(46,66,102,.55);color:var(--texto-2);}
.tela-tab tr:last-child td{border-bottom:0;}
.tela-tab td.n{text-align:right;padding-right:14px;color:var(--texto);}
.selo{
  display:inline-block;font-family:var(--dado);font-size:10px;font-weight:500;
  letter-spacing:.04em;padding:3px 8px;border-radius:3px;white-space:nowrap;
}
.selo-ok{background:var(--ok-fundo);color:var(--ok);}
.selo-atencao{background:var(--atencao-fundo);color:var(--atencao);}
.selo-risco{background:var(--risco-fundo);color:var(--risco);}
.citacao{
  margin-top:17px;padding:11px 14px;border-radius:0 4px 4px 0;
  background:linear-gradient(90deg,rgba(214,176,60,.10),transparent);
  border-left:2px solid var(--ouro);font-family:var(--dado);
  font-size:11px;line-height:1.6;color:var(--texto-2);
}

/* ============================================================
   MOCKUP DE CELULAR
   ============================================================ */
.fone{
  width:262px;flex:none;border-radius:30px;padding:9px;
  background:linear-gradient(160deg,#33456A,#1A2740);
  box-shadow:var(--sombra-alta);
}
.fone-tela{background-color:var(--fundo);border-radius:22px;overflow:hidden;border:1px solid var(--linha);}
.fone-topo{
  height:30px;display:flex;align-items:center;justify-content:center;
  background:var(--superficie-2);border-bottom:1px solid var(--linha);
}
.fone-topo::before{content:"";width:56px;height:5px;border-radius:3px;background:rgba(0,0,0,.45);}
.fone-corpo{padding:15px;}
.fone-tag{font-family:var(--dado);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ouro-txt);}
.fone-h{font-family:var(--display);font-size:16px;font-weight:700;margin:5px 0 12px;}
.fone-foto{
  height:96px;border-radius:5px;margin-bottom:12px;position:relative;overflow:hidden;
  background:
    linear-gradient(115deg,rgba(214,176,60,.14),transparent 55%),
    repeating-linear-gradient(45deg,#20334F 0 9px,#1A2A42 9px 18px);
  border:1px solid var(--linha);
}
.fone-foto::after{
  content:"foto · 12:41";position:absolute;left:8px;bottom:7px;
  font-family:var(--dado);font-size:9px;color:var(--texto-3);
}
.onda{display:flex;align-items:flex-end;gap:3px;height:30px;margin-bottom:6px;}
.onda i{display:block;width:3px;border-radius:2px;background:var(--ouro);opacity:.8;animation:som 1.15s ease-in-out infinite;}
@keyframes som{0%,100%{height:20%;}50%{height:100%;}}
.fone-legenda{font-family:var(--dado);font-size:9.5px;color:var(--texto-3);margin-bottom:14px;}
.fone-linha{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:9px 0;border-top:1px solid var(--linha);
  font-family:var(--dado);font-size:11px;color:var(--texto-2);
}
.fone-sync{
  margin-top:12px;padding:8px 10px;border-radius:4px;
  background:var(--ok-fundo);color:var(--ok);
  font-family:var(--dado);font-size:10px;letter-spacing:.06em;text-align:center;
}

/* ============================================================
   RODAPÉ
   ============================================================ */
.rodape{padding:64px 0 38px;}
.rodape-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:34px;}
.rodape h4{
  font-family:var(--dado);font-size:10.5px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ouro-txt);margin:0 0 13px;
}
.rodape ul{list-style:none;margin:0;padding:0;font-size:15px;}
.rodape li{padding:4px 0;}
.rodape a{color:var(--texto-2);text-decoration:none;transition:color .16s ease;}
.rodape a:hover{color:var(--texto);}
.rodape-frase{font-family:var(--display);font-size:19px;font-weight:700;color:var(--texto);margin-bottom:10px;}
.rodape-nota{
  margin-top:42px;padding-top:24px;border-top:1px solid var(--linha);
  font-size:13.5px;color:var(--texto-3);max-width:78ch;
}
.rodape-fim{
  margin-top:20px;font-family:var(--dado);font-size:11px;letter-spacing:.08em;
  color:var(--texto-3);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width:900px){
  .nav-links{
    display:none;position:absolute;top:var(--topo);left:0;right:0;
    flex-direction:column;gap:0;background:var(--superficie);
    border-bottom:1px solid var(--linha);padding:8px var(--gutter) 18px;
    box-shadow:var(--sombra);
  }
  .nav-links.aberto{display:flex;}
  .nav-links a{padding:12px 0;border-bottom:1px solid var(--linha);}
  .nav-toggle{display:flex;}
  .nav .btn{display:none;}
  .rodape-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:640px){
  body{font-size:16px;}
  .bloco{padding:64px 0;}
  .tela-corpo{grid-template-columns:1fr;}
  .tela-menu{display:flex;overflow-x:auto;padding:0;border-right:0;border-bottom:1px solid var(--linha);}
  .tela-menu span{border-left:0;border-bottom:2px solid transparent;white-space:nowrap;}
  .tela-menu span.on{border-bottom-color:var(--ouro);background:none;}
  .rodape-grid{grid-template-columns:1fr;gap:28px;}
  .pilares{flex-wrap:wrap;gap:8px 0;}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;}
  html{scroll-behavior:auto;}
  html.js [data-revela]{opacity:1;transform:none;}
}