@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,600;1,700&family=Archivo+Black&display=swap');

:root{
  --paper:#FDFBF5;
  --paper-dark:#F5F0E2;
  --ink:#20222A;
  --ink-soft:#4B4E5A;
  --line:#20222A;

  --teal:#0E8A82;
  --teal-dark:#0A6961;
  --coral:#FF6A52;
  --coral-dark:#E14E36;
  --purple:#7C5CC4;
  --purple-dark:#5F429E;
  --gold:#F0AC2E;
  --gold-dark:#C6860F;

  --text-col:660px;
}

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

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Archivo', Arial, sans-serif;
  font-size:18px;
  line-height:1.65;
}

.layout{
  display:grid;
  grid-template-columns:260px 1fr;
  min-height:100vh;
}

/* ---------- sidebar ---------- */
nav.toc{
  background:var(--ink);
  border-right:3px solid var(--ink);
  padding:2rem 1.5rem;
  position:sticky;
  top:0;
  height:100vh;
  overflow-y:auto;
}
nav.toc .brand{
  font-family:'Archivo Black', sans-serif;
  font-size:1rem;
  letter-spacing:-.01em;
  color:#fff;
  text-decoration:none;
  display:block;
  margin-bottom:.15rem;
  text-transform:uppercase;
}
nav.toc .brand-sub{
  font-size:.72rem;
  color:#A9ACB8;
  margin-bottom:1.8rem;
  display:block;
  padding-bottom:1.4rem;
  border-bottom:2px solid #3A3D48;
  text-transform:uppercase;
  letter-spacing:.05em;
}
nav.toc ol{
  list-style:none;
  margin:0;
  padding:0;
  counter-reset:chapter;
}
nav.toc li{
  counter-increment:chapter;
  margin-bottom:.25rem;
}
nav.toc a{
  display:flex;
  gap:.6rem;
  align-items:baseline;
  color:#D8D9DE;
  text-decoration:none;
  font-size:.86rem;
  font-weight:600;
  padding:.45rem .5rem;
  line-height:1.3;
}
nav.toc li a::before{
  content:counter(chapter, upper-roman);
  font-family:'Archivo Black', sans-serif;
  font-size:.75rem;
  color:var(--gold);
  flex-shrink:0;
  width:1.5rem;
}
nav.toc a:hover{background:#2C2E38;}
nav.toc a.active{
  background:var(--c-accent, var(--teal));
  color:#20222A;
}
nav.toc a.active::before{color:#20222A;}

/* ---------- main ---------- */
main{
  padding:0 2.2rem 6rem;
  display:flex;
  justify-content:center;
}
.page{
  width:100%;
  max-width:960px;
  padding-top:1.6rem;
}

.running-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-soft);
  padding-bottom:.8rem;
  margin-bottom:2.6rem;
  border-bottom:3px solid var(--ink);
}
.running-head .rh-chip{
  color:#fff;
  background:var(--c-accent, var(--teal));
  padding:.2rem .65rem;
  letter-spacing:.08em;
}

.chapter-num{
  font-family:'Archivo Black', sans-serif;
  font-size:.95rem;
  color:var(--c-accent, var(--teal));
  letter-spacing:.05em;
  margin:0 0 .5rem;
  text-transform:uppercase;
}
h1.title{
  font-family:'Archivo Black', sans-serif;
  font-size:2.7rem;
  line-height:1.02;
  color:var(--ink);
  margin:0 0 .6rem;
  max-width:var(--text-col);
  text-transform:uppercase;
  letter-spacing:-.01em;
}
p.dek{
  font-style:italic;
  font-weight:600;
  color:var(--ink-soft);
  font-size:1.1rem;
  margin:0 0 1.6rem;
  max-width:var(--text-col);
  border-left:4px solid var(--c-accent, var(--teal));
  padding-left:.9rem;
}

.objetivos{
  max-width:var(--text-col);
  background:var(--paper-dark);
  border:2px solid var(--ink);
  padding:1.1rem 1.4rem;
  margin:0 0 2.6rem;
}
.objetivos .box-label{
  font-size:.7rem;
  font-family:'Archivo Black', sans-serif;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink);
  display:block;
  margin-bottom:.5rem;
}
.objetivos ul{margin:0;padding-left:1.2rem;}
.objetivos li{margin-bottom:.3rem;font-size:.95rem;}

.content{
  max-width:var(--text-col);
}

h2{
  font-family:'Archivo Black', sans-serif;
  font-size:1.5rem;
  color:var(--ink);
  margin:2.8rem 0 1rem;
  text-transform:uppercase;
  letter-spacing:-.005em;
  padding-bottom:.4rem;
  border-bottom:3px solid var(--c-accent, var(--teal));
  display:inline-block;
}
h3{
  font-family:'Archivo', sans-serif;
  font-weight:700;
  font-style:italic;
  font-size:1.1rem;
  color:var(--ink);
  margin:1.8rem 0 .6rem;
}
p{margin:0 0 1.15rem;}
ul,ol.list{margin:0 0 1.3rem;padding-left:1.3rem;}
li{margin-bottom:.4rem;}
strong{color:var(--ink); font-weight:700;}

.dropcap:first-letter{
  font-family:'Archivo Black', sans-serif;
  font-size:3.6rem;
  float:left;
  line-height:.8;
  padding:.06em .1em 0 0;
  color:var(--c-accent, var(--teal));
}

blockquote{
  position:relative;
  margin:2.2rem 0;
  padding:.9rem 1.2rem .9rem 1.4rem;
  font-family:'Archivo', sans-serif;
  font-style:italic;
  font-weight:700;
  font-size:1.25rem;
  color:var(--ink);
  line-height:1.4;
  background:var(--paper-dark);
  border-left:5px solid var(--c-accent, var(--teal));
}

.box{
  background:#fff;
  border:2px solid var(--ink);
  padding:1.2rem 1.4rem;
  margin:1.8rem 0;
}
.box.ampliar{border-left:6px solid var(--gold);}
.box .box-label{
  font-size:.7rem;
  font-family:'Archivo Black', sans-serif;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink);
  margin-bottom:.55rem;
  display:block;
}

.margin-note{
  float:right;
  clear:right;
  width:230px;
  margin:.3rem -300px 1rem 1.6rem;
  padding:.8rem 1rem;
  background:#fff;
  border:2px solid var(--ink);
  font-size:.82rem;
  line-height:1.5;
  color:var(--ink-soft);
}
.margin-note.n-coral{border-top:5px solid var(--coral);}
.margin-note.n-purple{border-top:5px solid var(--purple);}
.margin-note.n-gold{border-top:5px solid var(--gold);}
.margin-note.n-teal{border-top:5px solid var(--teal);}
.margin-note .mn-label{
  display:block;
  font-family:'Archivo Black', sans-serif;
  color:var(--ink);
  margin-bottom:.3rem;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.03em;
}

.divider{
  display:flex;
  align-items:center;
  gap:.6rem;
  margin:2.8rem 0;
  max-width:var(--text-col);
}
.divider::before,.divider::after{
  content:'';
  flex:1;
  height:2px;
  background:var(--ink);
}
.divider .dots{display:flex;gap:.4rem;}
.divider .dots span{
  width:7px;height:7px;
  background:var(--teal);
}
.divider .dots span:nth-child(2){background:var(--coral);}
.divider .dots span:nth-child(3){background:var(--gold);}

table{
  width:100%;
  border-collapse:collapse;
  margin:1.5rem 0;
  font-size:.9rem;
  border:2px solid var(--ink);
}
th,td{
  text-align:left;
  padding:.6rem .7rem;
  border-bottom:1px solid var(--line);
  vertical-align:top;
}
th{
  color:#fff;
  font-family:'Archivo Black', sans-serif;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.03em;
  background:var(--c-accent, var(--teal));
}

.pager{
  display:flex;
  justify-content:space-between;
  align-items:center;
  max-width:var(--text-col);
  margin-top:3.6rem;
  padding-top:1.4rem;
  border-top:3px solid var(--ink);
  font-size:.88rem;
  clear:both;
}
.pager a{
  color:var(--ink);
  text-decoration:none;
  font-family:'Archivo Black', sans-serif;
  font-size:.78rem;
  text-transform:uppercase;
}
.pager a:hover{color:var(--c-accent, var(--teal));}
.pager .next{margin-left:auto;text-align:right;}

/* ---------- cover / index page ---------- */
.cover-hero{
  position:relative;
  padding:3rem 0 2.4rem;
  max-width:var(--text-col);
  overflow:visible;
}
.cover-hero svg.rings{
  position:absolute;
  right:-140px;
  top:-40px;
  width:340px;
  height:340px;
  z-index:0;
}
.cover-hero .cover-inner{position:relative;z-index:1;}
.cover-eyebrow{
  font-size:.78rem;
  font-family:'Archivo Black', sans-serif;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--teal-dark);
  margin:0 0 .8rem;
}
.cover-title{
  font-family:'Archivo Black', sans-serif;
  font-size:3.4rem;
  line-height:.94;
  color:var(--ink);
  margin:0 0 .7rem;
  text-transform:uppercase;
}
.cover-title em{
  font-family:'Archivo', sans-serif;
  font-weight:700;
  font-style:italic;
  color:var(--ink);
  background:var(--coral);
  padding:.02em .2em;
  text-transform:none;
  display:inline-block;
  transform:rotate(-2deg);
}
.cover-sub{
  font-family:'Archivo', sans-serif;
  font-style:italic;
  font-weight:700;
  font-size:1.25rem;
  color:var(--purple-dark);
  margin:1rem 0 1.6rem;
}
.cover-intro{max-width:var(--text-col);}

.toc-list{
  max-width:var(--text-col);
  margin:1.4rem 0 2.4rem;
  border-top:3px solid var(--ink);
}
.toc-list li{
  list-style:none;
  display:flex;
  align-items:baseline;
  gap:.6rem;
  padding:.9rem .5rem;
  border-bottom:2px solid var(--line);
}
.toc-list li:hover{background:var(--paper-dark);}
.toc-list li .roman{
  font-family:'Archivo Black', sans-serif;
  color:var(--gold-dark);
  font-size:.95rem;
  width:2rem;
  flex-shrink:0;
}
.toc-list li a{
  font-family:'Archivo Black', sans-serif;
  font-size:1rem;
  color:var(--ink);
  text-decoration:none;
  white-space:nowrap;
  text-transform:uppercase;
}
.toc-list li a:hover{color:var(--c-accent, var(--teal));}
.toc-list li .leader{
  flex:1;
  border-bottom:1px dotted var(--ink-soft);
  transform:translateY(-.35rem);
}
.toc-list li .dek-inline{
  font-size:.82rem;
  color:var(--ink-soft);
  font-style:italic;
  flex-shrink:0;
  max-width:280px;
  text-align:right;
}

@media (max-width:1180px){
  .margin-note{
    float:none;
    width:auto;
    margin:1.2rem 0;
    clear:both;
  }
}
@media (max-width:820px){
  .layout{grid-template-columns:1fr;}
  nav.toc{position:relative;height:auto;top:auto;}
  main{padding:0 1.2rem 4rem;}
  h1.title,.cover-title{font-size:2.1rem;}
  .cover-hero svg.rings{display:none;}
  .toc-list li{flex-wrap:wrap;}
  .toc-list li .dek-inline{max-width:100%;text-align:left;}
}