/* ===== Paleta: Ophelia (Millais, 1851) — água esverdeada, folhagem escura,
   e a papoula reservada para uma única função: o que ainda falta. ===== */
:root{
  --bg:#EDEEE8; --paper:#F7F8F3; --ink:#1A211B; --body:#39413A; --mut:#717A72;
  --line:#D6D9CD; --line-soft:#E3E5DB;
  --strip:#22301F; --on-deep:#EBEFE6;
  --acc:#35513F; --acc-soft:#DFE5DC;
  --hold:#7B8479; --hold-line:#BFC6B8; --hold-bg:rgba(122,132,118,.07);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#11150F; --paper:#171C15; --ink:#E7EBE1; --body:#C3CBBE; --mut:#8B9689;
    --line:#2A3227; --line-soft:#222A20;
    --strip:#1B231A; --on-deep:#E7EBE1;
    --acc:#9DBA9E; --acc-soft:#212B20;
    --hold:#8E998B; --hold-line:#3A4437; --hold-bg:rgba(142,153,139,.08);
  }
}
:root[data-theme="dark"]{
  --bg:#11150F; --paper:#171C15; --ink:#E7EBE1; --body:#C3CBBE; --mut:#8B9689;
  --line:#2A3227; --line-soft:#222A20;
  --strip:#1B231A; --on-deep:#E7EBE1;
  --acc:#9DBA9E; --acc-soft:#212B20;
  --hold:#8E998B; --hold-line:#3A4437; --hold-bg:rgba(142,153,139,.08);
}

/* --- Acentos alternativos, todos tirados da mesma pintura --- */
/* Ouro de junco: os caniços e a margem dourada. */
:root[data-accent="reed"]{ --acc:#7A5C15; --acc-soft:#ECE6D2; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"])[data-accent="reed"]{ --acc:#D6B463; --acc-soft:#2A2516; }
}
:root[data-theme="dark"][data-accent="reed"]{ --acc:#D6B463; --acc-soft:#2A2516; }

/* Salgueirinha: a purple loosestrife que Shakespeare nomeia e Millais pintou. */
:root[data-accent="loosestrife"]{ --acc:#57407A; --acc-soft:#E3DCEE; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"])[data-accent="loosestrife"]{ --acc:#B9A4DC; --acc-soft:#241D30; }
}
:root[data-theme="dark"][data-accent="loosestrife"]{ --acc:#B9A4DC; --acc-soft:#241D30; }

*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--body);
  font-family:"Newsreader",Georgia,"Times New Roman",serif;
  font-size:17.5px; line-height:1.62; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:768px; margin:0 auto; padding:0 30px;}
.wrap-wide{max-width:1020px; margin:0 auto; padding:0 30px;}
a{color:var(--acc);}
:focus-visible{outline:2px solid var(--acc); outline-offset:3px; border-radius:2px;}

.lbl{
  font-family:"Archivo",system-ui,sans-serif; font-size:.67rem; font-weight:600;
  letter-spacing:.17em; text-transform:uppercase; color:var(--mut);
}
.ui{font-family:"Archivo",system-ui,sans-serif;}
h1,h2,h3,h4{color:var(--ink); text-wrap:balance;}
hr.rule{border:0; border-top:1px solid var(--line); margin:0;}

/* ---------- topo ---------- */
header.top{border-bottom:1px solid var(--line); background:var(--bg); position:sticky; top:0; z-index:30;}
header.top .in{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:15px 0; flex-wrap:wrap;}
.brand{font-size:1.02rem; color:var(--ink); text-decoration:none; letter-spacing:.005em;}
.brand b{font-weight:500;}
.brand span{color:var(--mut); font-size:.86rem; font-family:"Archivo",sans-serif; letter-spacing:.03em; margin-left:9px;}
nav.main{display:flex; align-items:center; gap:22px; flex-wrap:wrap;}
nav.main a{
  font-family:"Archivo",sans-serif; font-size:.83rem; font-weight:500; color:var(--mut);
  text-decoration:none; padding-bottom:2px; border-bottom:1.5px solid transparent;
}
nav.main a:hover{color:var(--ink);}
nav.main a[aria-current="page"]{color:var(--ink); border-bottom-color:var(--acc);}
.lang{display:flex; align-items:center; gap:1px; margin-left:4px;}
.lang button{
  appearance:none; background:transparent; border:0; cursor:pointer; padding:3px 6px;
  font-family:"Archivo",sans-serif; font-size:.74rem; font-weight:600; letter-spacing:.06em;
  color:var(--mut); border-radius:3px;
}
.lang button[aria-pressed="true"]{color:var(--ink); background:var(--acc-soft);}
.lang i{color:var(--line); font-style:normal;}

/* ---------- comuns ---------- */
.page-head{padding:74px 0 44px;}
.page-head .lbl{display:block; margin-bottom:26px;}
.page-head h1{
  font-weight:300; font-size:clamp(2rem,4.7vw,3rem); line-height:1.15;
  letter-spacing:-.017em; margin:0 0 22px;
}
.page-head .lede{font-size:1.14rem; margin:0; max-width:58ch; color:var(--body);}
h2.sec{font-weight:400; font-size:1.75rem; letter-spacing:-.015em; margin:0 0 6px;}
.sec-intro{max-width:56ch; margin:12px 0 34px;}
section{padding:52px 0;}
section + section{border-top:1px solid var(--line-soft);}

.acts{display:flex; gap:26px; align-items:baseline; flex-wrap:wrap; font-family:"Archivo",sans-serif; font-size:.87rem;}
.acts a{color:var(--acc); text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:2px; font-weight:500;}
.acts a.quiet{color:var(--mut);}
.acts a.quiet:hover{color:var(--ink);}

/* Andaime, não conteúdo: cinza e tracejado, a convenção universal de
   "ainda não preenchido". Sem cor semântica — nada aqui é alerta. */
.gap{
  font-family:"Archivo",sans-serif; font-size:.74rem; font-weight:500; line-height:1.45;
  color:var(--hold); background:var(--hold-bg); border:1px dashed var(--hold-line);
  padding:2px 9px; border-radius:3px; display:inline-block; letter-spacing:.01em;
}

/* ---------- home: quatro caminhos ---------- */
ol.paths{list-style:none; margin:0; padding:0;}
ol.paths li{
  display:grid; grid-template-columns:2rem 1fr auto; gap:6px 16px; align-items:baseline;
  padding:16px 0; border-top:1px solid var(--line);
}
ol.paths li:last-child{border-bottom:1px solid var(--line);}
ol.paths .n{font-family:"Archivo",sans-serif; font-size:.68rem; font-weight:600; color:var(--acc); font-variant-numeric:tabular-nums;}
ol.paths .t{font-size:1.06rem; color:var(--ink);}
ol.paths .t em{font-style:normal; color:var(--mut);}
ol.paths .w{font-family:"Archivo",sans-serif; font-size:.7rem; letter-spacing:.09em; text-transform:uppercase; color:var(--mut); text-align:right;}
@media (max-width:560px){
  ol.paths li{grid-template-columns:2rem 1fr;}
  ol.paths .w{grid-column:2; text-align:left;}
}

/* ---------- listagem de cases ---------- */
.case-item{display:block; text-decoration:none; color:inherit; padding:26px 0; border-top:1px solid var(--line);}
.case-item:first-of-type{border-top:1px solid var(--line);}
.case-item:last-of-type{border-bottom:1px solid var(--line);}
.case-item .meta{display:flex; gap:14px; align-items:baseline; flex-wrap:wrap; margin-bottom:9px;}
.case-item h3{font-weight:400; font-size:1.5rem; letter-spacing:-.012em; line-height:1.22; margin:0 0 8px;}
.case-item:hover h3{color:var(--acc);}
.case-item p{margin:0; max-width:58ch;}
.case-item .more{font-family:"Archivo",sans-serif; font-size:.78rem; font-weight:500; color:var(--acc); display:inline-block; margin-top:11px;}

/* ---------- página de case ---------- */
.deck{border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:22px 0; margin:0 0 44px;}
.deck dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:9px 24px;}
.deck dt{font-family:"Archivo",sans-serif; font-size:.68rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--mut); padding-top:.35em;}
.deck dd{margin:0; color:var(--ink);}
.block{padding:38px 0; border-top:1px solid var(--line-soft);}
.block > .lbl{display:block; margin-bottom:14px;}
.block h2{font-weight:400; font-size:1.55rem; letter-spacing:-.015em; margin:0 0 16px;}
.block p{max-width:60ch;}
.block p:first-of-type{margin-top:0;}
.guide{
  display:none; font-family:"Archivo",sans-serif; font-size:.79rem; line-height:1.55;
  color:var(--acc); background:var(--acc-soft); border-left:2px solid var(--acc);
  padding:11px 15px; margin:0 0 20px; max-width:60ch; border-radius:0 4px 4px 0;
}
body.show-guide .guide{display:block;}
.guide b{font-weight:600;}
.guide-toggle{
  appearance:none; cursor:pointer; font-family:"Archivo",sans-serif; font-size:.78rem; font-weight:500;
  background:transparent; color:var(--mut); border:1px solid var(--line); border-radius:4px; padding:6px 12px;
}
.guide-toggle:hover{color:var(--ink); border-color:var(--mut);}
body.show-guide .guide-toggle{color:var(--acc); border-color:var(--acc);}
table.res{width:100%; border-collapse:collapse; margin:8px 0 0; font-size:.98rem;}
table.res th, table.res td{text-align:left; padding:11px 12px 11px 0; border-bottom:1px solid var(--line-soft); vertical-align:top;}
table.res th{font-family:"Archivo",sans-serif; font-size:.68rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--mut);}
table.res td:last-child{font-variant-numeric:tabular-nums; color:var(--ink);}
.tablewrap{overflow-x:auto;}
.figure{background:var(--paper); border:1px solid var(--line); border-radius:5px; padding:34px 26px; text-align:center; margin:8px 0 0;}
.figure .lbl{display:block; margin-bottom:10px;}
.figure p{margin:0 auto; max-width:44ch; color:var(--mut); font-size:.95rem;}

/* ---------- sobre: linha do tempo ---------- */
ol.tl{list-style:none; margin:0; padding:0; border-left:1px solid var(--line); }
ol.tl li{position:relative; padding:0 0 30px 26px;}
ol.tl li:last-child{padding-bottom:0;}
ol.tl li::before{content:""; position:absolute; left:-4.5px; top:.62em; width:8px; height:8px; border-radius:50%; background:var(--bg); border:1.5px solid var(--acc);}
ol.tl .yr{font-family:"Archivo",sans-serif; font-size:.7rem; font-weight:600; letter-spacing:.1em; color:var(--mut); display:block; margin-bottom:3px;}
ol.tl h4{font-weight:500; font-size:1.06rem; margin:0 0 4px;}
ol.tl p{margin:0; max-width:56ch; font-size:1rem;}

/* ---------- freela: serviços ---------- */
.svc{border-top:1px solid var(--line); padding:24px 0;}
.svc:last-of-type{border-bottom:1px solid var(--line);}
.svc h3{font-weight:400; font-size:1.32rem; letter-spacing:-.01em; margin:0 0 7px;}
.svc p{margin:0; max-width:58ch;}
.svc .for{font-family:"Archivo",sans-serif; font-size:.72rem; letter-spacing:.09em; text-transform:uppercase; color:var(--acc); display:block; margin-bottom:9px;}
ul.plain{margin:14px 0 0; padding-left:1.15em; max-width:58ch;}
ul.plain li{margin-bottom:8px;}
ul.plain li::marker{color:var(--acc);}

/* ---------- faixa + rodapé ---------- */
.strip{background:var(--strip); color:var(--on-deep); padding:40px 0; border:0;}
.strip .in{display:flex; flex-wrap:wrap; gap:16px 32px; align-items:baseline; justify-content:space-between;}
.strip p{margin:0; font-size:1.16rem; max-width:44ch; color:var(--on-deep);}
.strip a{color:var(--on-deep); font-family:"Archivo",sans-serif; font-size:.87rem; font-weight:500; text-decoration:none; border-bottom:1px solid rgba(235,239,230,.45); padding-bottom:2px;}
footer.end{border-top:1px solid var(--line); padding:26px 0 64px;}
footer.end .in{display:flex; flex-wrap:wrap; gap:12px 26px; justify-content:space-between; align-items:baseline;}
footer.end a{color:var(--mut); text-decoration:none;}
footer.end a:hover{color:var(--ink);}

/* ---------- nota de protótipo ---------- */
.proto{background:var(--paper); border-bottom:1px solid var(--line);}
.proto .in{display:flex; gap:8px 18px; align-items:center; flex-wrap:wrap; padding:11px 0; font-family:"Archivo",sans-serif; font-size:.78rem; color:var(--mut); line-height:1.5;}
.proto b{color:var(--ink); font-weight:600; letter-spacing:.03em;}
.proto .msg{flex:1 1 340px; min-width:0;}
.accents{display:flex; align-items:center; gap:6px; margin-left:auto;}
.accents .cap{font-size:.68rem; letter-spacing:.13em; text-transform:uppercase;}
.accents button{
  appearance:none; cursor:pointer; background:transparent; border:1px solid var(--line);
  border-radius:999px; padding:4px 11px 4px 6px; display:inline-flex; align-items:center; gap:7px;
  font-family:"Archivo",sans-serif; font-size:.73rem; font-weight:500; color:var(--mut);
}
.accents button:hover{color:var(--ink); border-color:var(--mut);}
.accents button[aria-pressed="true"]{color:var(--ink); border-color:var(--acc); background:var(--acc-soft);}
.accents button i{width:11px; height:11px; border-radius:50%; display:block; border:1px solid rgba(0,0,0,.15);}