:root{
  color-scheme: light;
  --paper:#EDEAE3;
  --paper-2:#E3DFD6;
  --card:#FFFFFF;
  --ink:#121110;
  --ink-2:#5C5850;
  --line:#CFC9BD;
  --red:#DE3A16;
  --display:'Archivo',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--display);font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
  padding-inline:32px;
}
.wrap{max-width:1240px;margin:0 auto}
.estreito{max-width:820px}
a{color:var(--ink)}
img{max-width:100%;display:block}

.draft{
  background:var(--ink);color:var(--paper);margin-inline:-32px;padding:12px 32px;
  font-family:var(--mono);font-size:12px;letter-spacing:.04em;display:flex;
  flex-wrap:wrap;gap:8px 20px;align-items:center;
}
.draft b{color:#F5B199;font-weight:500}

.topo{
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  padding-block:22px;border-bottom:1px solid var(--line);
}
.marca{font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none}
.topo nav{display:flex;gap:22px;flex-wrap:wrap}
.topo nav a{font-size:15px;text-decoration:none;color:var(--ink-2)}
.topo nav a:hover,.topo nav a[aria-current]{color:var(--red)}
/* Seletor de idioma com bandeira (23/09, pedido dele: deixar claro que existe versão em inglês).
   As bandeiras são desenhadas aqui mesmo em SVG: nenhum arquivo ou emoji de terceiro, logo nenhuma
   licença de asset; e o emoji de bandeira não aparece no Windows. EN = EUA, PT = Brasil. */
.topo nav a.idioma{display:inline-flex;align-items:center;gap:6px;color:var(--ink)}
.topo nav a.idioma::before{content:"";display:inline-block;width:20px;height:13px;flex:none;
  background-size:100% 100%;box-shadow:0 0 0 1px rgba(18,17,16,.18)}
.topo nav a.idioma[hreflang="en"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1235 650'%3E%3Crect width='1235' height='650' fill='%23fff'/%3E%3Cg fill='%23B22234'%3E%3Crect y='0' width='1235' height='50'/%3E%3Crect y='100' width='1235' height='50'/%3E%3Crect y='200' width='1235' height='50'/%3E%3Crect y='300' width='1235' height='50'/%3E%3Crect y='400' width='1235' height='50'/%3E%3Crect y='500' width='1235' height='50'/%3E%3Crect y='600' width='1235' height='50'/%3E%3C/g%3E%3Crect width='494' height='350' fill='%233C3B6E'/%3E%3C/svg%3E")}
.topo nav a.idioma[hreflang="pt-br"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Crect width='20' height='14' fill='%23009C3B'/%3E%3Cpolygon points='10,1.6 18.4,7 10,12.4 1.6,7' fill='%23FFDF00'/%3E%3Ccircle cx='10' cy='7' r='3.4' fill='%23002776'/%3E%3C/svg%3E")}
/* Celular (23/09): o nav tinha 7 itens com flex-wrap e quebrava em 2-3 linhas. A marca fica numa
   linha e o nav numa unica linha que rola de lado, de proposito. "Como trabalho" sai no celular,
   porque o botao "Como eu trabalho" da capa leva ao mesmo lugar. */
@media (max-width:560px){
  .topo{padding-block:14px 10px;gap:6px}
  .topo nav{width:100%;flex-wrap:nowrap;gap:16px;overflow-x:auto;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;padding-bottom:4px}
  .topo nav::-webkit-scrollbar{display:none}
  .topo nav a{font-size:14.5px;white-space:nowrap}
  .topo nav a.so-largo{display:none}
  /* o seletor de idioma nao pode cair na parte do nav que rola para fora da tela:
     no celular ele vai para o canto direito, na linha da marca */
  .topo{position:relative}
  .topo nav a.idioma{position:absolute;top:14px;right:0}
}
@media (max-width:420px){
  .topo nav{gap:12px}
  .topo nav a{font-size:13.5px}
}

.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);margin:0 0 26px}
.eyebrow .pin{color:var(--red)}
h1{font-size:clamp(40px,6.6vw,88px);line-height:.98;font-weight:800;letter-spacing:-.035em;margin:0;text-wrap:balance}
h1 em{font-style:normal;color:var(--red)}

.btn{
  font-family:var(--mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  padding:14px 22px;text-decoration:none;border:1px solid var(--ink);display:inline-block;
}
.btn--cheio{background:var(--ink);color:var(--paper)}
.btn--cheio:hover{background:var(--red);border-color:var(--red)}
.btn--vazio:hover{border-color:var(--red);color:var(--red)}

.tela{border:1px solid var(--line);background:var(--card);line-height:0}
.tela img{width:100%}
.legenda{font-family:var(--mono);font-size:11.5px;color:var(--ink-2);margin-top:10px;line-height:1.5}

.sec{padding-block:80px 0}
.sec-cab{display:flex;align-items:baseline;gap:16px;margin-bottom:36px;flex-wrap:wrap}
.sec-cab h2{font-size:clamp(26px,3.2vw,40px);font-weight:700;letter-spacing:-.03em;margin:0}
.sec-cab p{margin:0;color:var(--ink-2);font-size:16px;max-width:52ch}

footer{margin-top:84px;border-top:1px solid var(--ink);padding-block:34px 60px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
footer p{margin:0;font-family:var(--mono);font-size:12px;color:var(--ink-2);line-height:1.7}

/* ---------- pagina de caso ---------- */
.caso-hero{padding-block:60px 0;max-width:900px}
.caso-hero .volta{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);text-decoration:none;display:inline-block;margin-bottom:28px}
.caso-hero .volta:hover{color:var(--red)}
.caso-hero h1{font-size:clamp(34px,5.4vw,66px)}
.caso-hero .resumo{margin:26px 0 0;font-size:clamp(18px,1.7vw,22px);color:var(--ink-2);max-width:60ch}

.fichada{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:46px;
  border-top:1px solid var(--ink);border-bottom:1px solid var(--line);
}
.fichada div{padding:22px 22px 24px;border-right:1px solid var(--line)}
.fichada div:last-child{border-right:none}
.fichada dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-bottom:7px}
.fichada dd{margin:0;font-size:16px;line-height:1.4}

.corpo{max-width:720px;padding-block:64px 0}
.corpo h2{font-size:clamp(24px,2.8vw,34px);font-weight:700;letter-spacing:-.028em;margin:52px 0 18px;text-wrap:balance}
.corpo h2:first-child{margin-top:0}
.corpo h3{font-size:20px;font-weight:600;letter-spacing:-.015em;margin:34px 0 12px}
.corpo p{margin:0 0 18px;color:#332F29}
.corpo p.destaque{font-size:20px;line-height:1.5;color:var(--ink);border-left:3px solid var(--red);padding-left:20px;margin-block:26px 28px}
.corpo ul{margin:0 0 20px;padding-left:22px;display:flex;flex-direction:column;gap:9px;color:#332F29}
.corpo li strong{font-weight:600;color:var(--ink)}
.corpo code{font-family:var(--mono);font-size:14.5px;background:var(--paper-2);padding:2px 6px}

figure.larga{margin:44px 0 44px;max-width:1240px}
figure.larga figcaption{font-family:var(--mono);font-size:11.5px;color:var(--ink-2);margin-top:10px;line-height:1.5;max-width:70ch}
.dupla{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}

.placar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-block:36px 10px;max-width:1240px}
.placar div{border-top:2px solid var(--ink);padding-top:14px}
.placar b{display:block;font-size:clamp(30px,3.6vw,46px);font-weight:700;letter-spacing:-.03em;line-height:1}
.placar span{display:block;margin-top:6px;font-size:14.5px;color:var(--ink-2)}

.honesto{background:var(--paper-2);border-left:3px solid var(--ink-2);padding:22px 24px;margin-block:40px 0;max-width:820px}
.honesto p{margin:0;font-size:16px;color:#332F29}
.honesto .rot{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);display:block;margin-bottom:8px}

/* conversa real: telas de celular lado a lado, e o modelo de mensagem que o sistema manda */
.conversa{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:30px 0 0;max-width:1240px}
.conversa img{width:100%;height:auto;border:1px solid var(--line);border-radius:14px}
.msg{background:#0B141A;color:#E9EDEF;border-radius:10px;padding:18px 20px;font-size:15px;line-height:1.55;
  white-space:pre-line;max-width:520px;margin:0}
.msg b{font-weight:600;color:#fff}
.msg i{font-style:italic;color:#8696A0}
.msgs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:26px 0 0;max-width:1100px}
.msgs figcaption{font-family:var(--mono);font-size:11.5px;color:var(--ink-2);margin-top:10px;line-height:1.5}
@media (max-width:760px){.conversa{grid-template-columns:repeat(2,minmax(0,1fr))}.msgs{grid-template-columns:1fr}}
/* toque para ampliar as telas da conversa (zoom.js) */
.conversa img{cursor:zoom-in}
.zoom{position:fixed;inset:0;z-index:50;background:rgba(8,9,11,.92);display:none;align-items:center;
  justify-content:center;padding:16px;cursor:zoom-out}
.zoom.aberto{display:flex}
.zoom img{max-width:100%;max-height:100%;width:auto;height:auto;border-radius:14px}

.proximo{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;border-top:1px solid var(--ink);margin-top:72px;padding-top:26px}
.proximo a{font-family:var(--mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none}
.proximo a:hover{color:var(--red)}

@media (max-width:980px){
  .fichada{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fichada div:nth-child(2){border-right:none}
  .placar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dupla{grid-template-columns:1fr}
}
@media (max-width:560px){
  body{padding-inline:16px}
  .draft{margin-inline:-16px;padding-inline:16px}
  .fichada,.placar{grid-template-columns:1fr}
  .fichada div{border-right:none;border-bottom:1px solid var(--line)}
  .corpo{padding-block:44px 0}
}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}
a:focus-visible,.btn:focus-visible{outline:2px solid var(--red);outline-offset:3px}

/* ---------- pagina inicial ---------- */
.hero{display:grid;grid-template-columns:1.45fr .9fr;gap:52px;align-items:end;padding-block:64px 44px}
.hero .sub{margin:26px 0 0;font-size:clamp(17px,1.5vw,20px);color:var(--ink-2);max-width:56ch}
.acoes{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.retrato{border:1px solid var(--line);margin:0}
.retrato img{width:100%;height:auto}

.numeros{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--ink);border-bottom:1px solid var(--line)}
.num{padding:28px 24px 30px;border-right:1px solid var(--line)}
.num:last-child{border-right:none}
.num b{display:block;font-size:clamp(34px,4.4vw,54px);font-weight:700;letter-spacing:-.03em;line-height:1}
.num span{display:block;margin-top:8px;font-size:15px;color:var(--ink-2)}

.caso{display:grid;grid-template-columns:.78fr 1.32fr;gap:44px;align-items:start;padding-block:46px;border-top:1px solid var(--line)}
.caso:first-of-type{border-top:1px solid var(--ink)}
.caso-id{font-family:var(--mono);font-size:13px;color:var(--red);letter-spacing:.1em;display:block;margin-bottom:14px}
.caso h3{font-size:clamp(24px,2.7vw,34px);font-weight:700;letter-spacing:-.025em;margin:0 0 14px;text-wrap:balance}
.caso h3 a{text-decoration:none}
.caso h3 a:hover{color:var(--red)}
.caso p{margin:0 0 16px;color:var(--ink-2);max-width:46ch}
.caso p.forte{color:var(--ink)}
.kv{display:flex;flex-direction:column;gap:10px;margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.kv div{display:flex;gap:14px;font-size:15px}
.kv dt{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);min-width:96px;padding-top:3px}
.kv dd{margin:0;color:var(--ink)}
.ler{display:inline-block;margin-top:24px;font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid var(--red);padding-bottom:3px}
.ler:hover{color:var(--red)}
.tiras{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:12px}
.tiras .tela img{height:120px;object-fit:cover;object-position:top center}

.grade{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.item{background:var(--card);border:1px solid var(--line);display:flex;flex-direction:column}
.item .miniatura{border-bottom:1px solid var(--line);line-height:0;background:var(--paper-2)}
.item .miniatura img{width:100%;height:168px;object-fit:cover;object-position:top center}
.item .corpo2{padding:20px 22px 22px;display:flex;flex-direction:column;gap:9px;flex-grow:1}
.cat{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.item h4{margin:0;font-size:19px;font-weight:600;letter-spacing:-.015em}
.item p{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.item .pe{margin-top:auto;padding-top:12px;font-family:var(--mono);font-size:11.5px;color:var(--ink-2)}
.item.sem .miniatura{height:168px;display:flex;align-items:center;justify-content:center}
.item.sem .miniatura span{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--ink-2);text-transform:uppercase}

.lista{border-top:1px solid var(--ink);margin-top:34px}
.linha{display:grid;grid-template-columns:1.1fr 2fr .8fr;gap:20px;padding:16px 4px;border-bottom:1px solid var(--line);align-items:baseline}
.linha b{font-weight:600;font-size:16.5px}
.linha span{color:var(--ink-2);font-size:15px}
.linha i{font-style:normal;font-family:var(--mono);font-size:12px;color:var(--ink-2);text-align:right}

.duplo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:44px;padding-block:72px 0}
.bloco h3{font-size:22px;font-weight:700;letter-spacing:-.02em;margin:0 0 18px}
.bloco dl{margin:0;display:flex;flex-direction:column;gap:14px}
.bloco .par{display:flex;gap:16px;border-top:1px solid var(--line);padding-top:13px}
.bloco dt{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);min-width:88px;padding-top:2px}
.bloco dd{margin:0;min-width:0;overflow-wrap:anywhere}
.duplo > *{min-width:0}

@media (max-width:980px){
  .hero{grid-template-columns:1fr;gap:34px;align-items:start;padding-block:44px 32px}
  .retrato{max-width:340px}
  .caso{grid-template-columns:1fr;gap:26px}
  .grade{grid-template-columns:repeat(2,minmax(0,1fr))}
  .numeros{grid-template-columns:repeat(2,minmax(0,1fr))}
  .num:nth-child(2){border-right:none}
  .duplo{grid-template-columns:1fr;gap:34px}
  .linha{grid-template-columns:1fr;gap:4px}
  .linha i{text-align:left}
}
@media (max-width:560px){
  .grade,.numeros{grid-template-columns:1fr}
  .num{border-right:none;border-bottom:1px solid var(--line)}
  .tiras{grid-template-columns:1fr 1fr}
  /* rotulo em cima do valor: lado a lado, o e-mail quebrava no meio da palavra (23/09) */
  .bloco .par{flex-direction:column;gap:4px}
}


/* Retrato com aurora -- o efeito aprovado por ele no link-in-bio (18/07).
   O canvas cobre a figure inteira; o shader mantem a luz so no topo, nunca no rosto. */
.sobre__foto--aurora{position:relative;overflow:hidden}
.sobre__foto--aurora #aurora{position:absolute;inset:0;width:100%;height:100%;
  mix-blend-mode:screen;opacity:.6;z-index:1;pointer-events:none}
@media (prefers-reduced-motion:reduce){.sobre__foto--aurora #aurora{opacity:.35}}