/* ═══════════════════════════════════════════════════════════════════
   URUTAU — sobre-si.css
   Aparência da página de documentação do Sistema de Informação.
   Reusa as variáveis de cor do style.css (:root). Aqui só o layout da doc.
   ═══════════════════════════════════════════════════════════════════ */

.doc-body{background:var(--bg);min-height:100vh}

/* header fixo e sempre visível nesta página (sem intro) */
.doc-header{
  position:fixed;top:16px;left:50%;transform:translateX(-50%);
  width:calc(100% - 40px);max-width:1160px;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 24px;border-radius:100px;
  background:rgba(6,42,1,.6);backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  border:1px solid rgba(206,179,30,.18);box-shadow:0 8px 32px rgba(0,0,0,.28);
  opacity:1;pointer-events:auto}
.doc-header .links a{color:var(--muted);transition:color .25s}
.doc-header .links a:hover{color:var(--ink)}

.doc{max-width:900px;margin:0 auto;padding:160px 28px 40px}

/* hero da doc */
.doc-hero{margin-bottom:80px}
.doc-hero .eyebrow{color:var(--gold)}
.doc-hero h1{font-size:clamp(36px,6vw,68px);line-height:1.02;letter-spacing:-.03em;font-weight:600;color:var(--ink);margin:14px 0 24px}
.doc-hero h1 em{font-style:italic;color:var(--gold)}
.doc-lead{font-size:clamp(17px,2.2vw,20px);line-height:1.6;color:#d6d2c4;max-width:60ch;margin-bottom:20px}
.doc-meta{font-size:15px;color:var(--muted)}
.doc-meta strong{color:var(--ink)}

/* blocos numerados */
.doc-block{margin-bottom:72px}
.doc-block h2{font-size:clamp(26px,3.6vw,40px);line-height:1.1;letter-spacing:-.02em;font-weight:600;color:var(--ink);margin-bottom:20px;display:flex;align-items:baseline;gap:16px}
.doc-block h2 .num{font-size:.5em;color:var(--gold);font-family:'Space Grotesk',sans-serif;letter-spacing:.1em;font-weight:500}
.doc-block > p{font-size:17px;line-height:1.7;color:#d6d2c4;max-width:64ch;margin-bottom:16px}
.doc-block strong{color:var(--ink)}
.doc-block em{color:var(--creme)}
.doc-block code{background:rgba(206,179,30,.12);color:var(--gold);padding:2px 7px;border-radius:6px;font-size:.9em;font-family:'Space Grotesk',monospace}

/* grid dos 5 componentes */
.si-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:28px}
.si-grid .si-card:last-child{grid-column:1 / -1}
.si-card{background:var(--glass);border:1px solid var(--line);border-radius:22px;padding:28px;
  transition:border-color .4s,transform .4s}
.si-card:hover{border-color:rgba(206,179,30,.4);transform:translateY(-3px)}
.si-ico{font-size:30px;margin-bottom:14px}
.si-card h3{font-family:'Fraunces',serif;font-size:21px;font-weight:600;color:var(--gold);margin-bottom:10px}
.si-card p{font-size:15px;line-height:1.6;color:#d6d2c4}

/* DIKW — escada */
.dikw{display:flex;flex-direction:column;gap:14px;margin-top:28px}
.dikw-step{border-radius:18px;padding:22px 26px;border:1px solid var(--line);position:relative;overflow:hidden}
.dikw-step .dikw-tag{display:inline-block;font-family:'Fraunces',serif;font-weight:600;font-size:15px;
  letter-spacing:.02em;color:var(--bg);background:var(--gold);padding:4px 14px;border-radius:100px;margin-bottom:12px}
.dikw-step p{font-size:16px;line-height:1.6;color:#e2ddce}
.dikw-step code{background:rgba(4,20,4,.6);color:var(--gold)}
/* cada degrau mais claro/recuado, dando sensação de pirâmide subindo */
.dikw-step.d{background:linear-gradient(135deg,rgba(6,48,1,.6),rgba(4,31,0,.4));margin-right:24%}
.dikw-step.i{background:linear-gradient(135deg,rgba(10,74,8,.5),rgba(6,42,1,.4));margin-right:16%}
.dikw-step.k{background:linear-gradient(135deg,rgba(19,103,26,.42),rgba(10,74,8,.35));margin-right:8%}
.dikw-step.w{background:linear-gradient(135deg,rgba(206,179,30,.22),rgba(19,103,26,.3));border-color:rgba(206,179,30,.4)}

/* tabela de ferramentas */
.table-wrap{overflow-x:auto;margin-top:24px;border-radius:18px;border:1px solid var(--line)}
table.tools{width:100%;border-collapse:collapse;min-width:620px}
table.tools th,table.tools td{text-align:left;padding:16px 20px;vertical-align:top;border-bottom:1px solid var(--line)}
table.tools thead th{background:rgba(6,42,1,.6);color:var(--gold);font-size:13px;letter-spacing:.1em;text-transform:uppercase;font-weight:600}
table.tools tbody tr:last-child td{border-bottom:0}
table.tools tbody tr:hover{background:rgba(206,179,30,.05)}
table.tools td{font-size:15px;line-height:1.55;color:#d6d2c4}
table.tools td strong{color:var(--ink)}
table.tools code{background:rgba(206,179,30,.12);color:var(--gold);padding:1px 6px;border-radius:5px;font-size:.88em}

/* fases da metodologia */
.phases{list-style:none;counter-reset:phase;margin-top:24px;display:flex;flex-direction:column;gap:4px}
.phases li{counter-increment:phase;position:relative;padding:22px 26px 22px 72px;border-left:2px solid var(--line)}
.phases li::before{content:counter(phase);position:absolute;left:-19px;top:20px;width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:var(--gold);color:var(--bg);font-weight:700;font-family:'Fraunces',serif}
.phases li:last-child{border-left-color:transparent}
.phases h4{font-family:'Fraunces',serif;font-size:19px;font-weight:600;color:var(--ink);margin-bottom:8px}
.phases p{font-size:15px;line-height:1.6;color:#d6d2c4}

/* desafios */
.challenges{list-style:none;margin-top:20px;display:flex;flex-direction:column;gap:14px}
.challenges li{padding:18px 22px;background:var(--glass);border:1px solid var(--line);border-radius:16px;
  font-size:15px;line-height:1.6;color:#d6d2c4}
.challenges li strong{color:var(--gold)}
.challenges code{background:rgba(4,20,4,.6);color:var(--gold);padding:1px 6px;border-radius:5px;font-size:.88em}

/* cta final */
.doc-cta{text-align:center;margin:40px 0 20px}

/* responsivo */
@media(max-width:720px){
  .doc{padding:130px 20px 30px}
  .si-grid{grid-template-columns:1fr}
  .si-grid .si-card:last-child{grid-column:auto}
  .dikw-step{margin-right:0 !important}
  .doc-header .links a:not(.nav-cta){display:none}
}
@media(prefers-reduced-motion:reduce){
  .si-card,.thanks-mark{animation:none !important;transition:none !important}
}