@charset "utf-8";
/* ============================================================
   SISTEMA DE DESIGN — Portfólio Larissa Lippel
   Fonte única de verdade visual. Congelado a partir da home v3.
   Nenhum componente novo entra aqui sem passar pelo sistema.

   v2.2 — entradas escalonadas onde não custam leitura: linhas de
   tabela, faixa de números e etiquetas do hero. O texto corrido
   continua aparecendo pronto — a regra do v2 vale.

   v2.3 · home em inglês. Ver seção 33 no fim do arquivo: alvo de
   toque de 44px, botão primário e neutro, card com link no título,
   hero pessoal, canais de contato e rodapé com links.
   ============================================================ */

/* ── 01 · Tokens ─────────────────────────────────────────── */
:root{
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);

  --ink:#131A2B; --ink-deep:#0B1020; --ink-soft:#1C2540;
  --paper:#FBFAF7; --paper-2:#F1EEE8;
  --text:#1B2133; --muted:#5E667C; --line:#E0DBD2;
  --star:#D9A441; --on-star:#0B1020;

  --s-clay:#B4543F; --s-teal:#1F6F5C; --s-indigo:#3C4A8A; --s-bronze:#8F6414;
  --a-clay:#B4543F; --a-teal:#1F6F5C; --a-indigo:#3C4A8A; --a-bronze:#8F6414;
  --on-accent:#FFFFFF;

  --bg:var(--paper); --fg:var(--text); --rule:var(--line);
  --dim:var(--muted); --surface:var(--paper-2);

  --r-lg:22px; --r-md:16px; --r-sm:12px; --r-pill:999px;

  --serif:Fraunces,Georgia,serif;
  --sans:"Source Sans 3",system-ui,-apple-system,sans-serif;
  --wonk:"SOFT" 20,"WONK" 1;

  --container:1240px;
  --gutter:clamp(20px,5vw,64px);

  --leitura:760px;
  --leitura-larga:1000px;
  --indice:240px;
}

/* ── 02 · Temas ──────────────────────────────────────────── */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:var(--ink);--fg:#EDEAE3;--rule:#2A3350;--dim:#99A2B9;--surface:var(--ink-soft);
    --a-clay:#E08A7A;--a-teal:#4FB394;--a-indigo:#8B95E8;--a-bronze:#D4A373;
    --on-accent:#0B1020;
  }
}
:root[data-theme="dark"]{
  --bg:var(--ink);--fg:#EDEAE3;--rule:#2A3350;--dim:#99A2B9;--surface:var(--ink-soft);
  --a-clay:#E08A7A;--a-teal:#4FB394;--a-indigo:#8B95E8;--a-bronze:#D4A373;
  --on-accent:#0B1020;
}

/* ── 03 · Base ───────────────────────────────────────────── */
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 132px);scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--sans);font-size:18px;line-height:1.72;letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;transition:background .4s,color .4s;overflow-x:hidden}
a{color:inherit}
:focus-visible{outline:2px solid var(--star);outline-offset:3px;border-radius:4px}

/* ── 05 · Cabeçalho ──────────────────────────────────────── */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;display:flex;
  align-items:center;justify-content:space-between;gap:16px;
  padding:14px var(--gutter);
  background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s,background .4s}
header.scrolled{border-bottom-color:var(--rule)}
.brand{font-family:var(--serif);font-weight:500;font-size:19px;text-decoration:none;letter-spacing:-.01em}
.brand span{color:var(--star)}
nav{display:flex;align-items:center;gap:clamp(13px,2.2vw,28px)}
nav a{font-size:14.5px;color:var(--dim);text-decoration:none;transition:color .2s}
nav a:hover{color:var(--fg)}
.toggle{width:36px;height:36px;border-radius:var(--r-pill);border:1px solid var(--rule);background:none;
  color:var(--dim);cursor:pointer;display:grid;place-items:center;flex:none;transition:.2s}
.toggle:hover{color:var(--star);border-color:var(--star)}

/* ── 06 · Hero ───────────────────────────────────────────── */
.veu{position:fixed;inset:0;z-index:-2;background:var(--ink-deep);
  opacity:var(--veu,1);transition:opacity .6s ease}
#sky{position:fixed;inset:0;width:100vw;height:100vh;z-index:-1;pointer-events:none;
  opacity:var(--veu,1);transition:opacity .6s ease}
.hero{position:relative;color:#EDEAE3;
  padding:clamp(64px,11vh,116px) var(--gutter) clamp(40px,6vh,68px)}
.hero-in{position:relative;z-index:2;max-width:var(--container);margin:0 auto}
.kick{font-size:14px;color:#98A1B8;margin:0 0 24px;display:flex;align-items:center;gap:9px}
.kick i{width:6px;height:6px;border-radius:50%;background:var(--star);flex:none}
h1{font-family:var(--serif);font-weight:400;font-size:clamp(2.1rem,5.4vw,3.85rem);
  line-height:1.1;letter-spacing:-.02em;margin:0;max-width:26ch;
  font-variation-settings:var(--wonk)}
.lead{margin:26px 0 0;max-width:68ch;font-size:clamp(1.05rem,1.5vw,1.2rem);color:#B7BFD1;line-height:1.72}
.marks{margin:clamp(38px,6vh,60px) 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:10px}
.marks li{font-size:13.5px;color:#C4CBDC;border:1px solid #2A3350;border-radius:var(--r-pill);padding:7px 15px}
.transicao{position:relative;height:clamp(88px,12vh,140px);margin-bottom:-1px;
  background:linear-gradient(to bottom,
    color-mix(in srgb,var(--bg) 0%,transparent) 0%,
    color-mix(in srgb,var(--bg) 12%,transparent) 26%,
    color-mix(in srgb,var(--bg) 38%,transparent) 48%,
    color-mix(in srgb,var(--bg) 72%,transparent) 68%,
    color-mix(in srgb,var(--bg) 93%,transparent) 84%,
    var(--bg) 100%)}

/* ── 07 · Corpo ──────────────────────────────────────────── */
.corpo{position:relative;background:var(--bg);transition:background .4s}
main{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
section{padding:clamp(54px,8.5vh,96px) 0}
/* na página de case o respiro é menor: são oito blocos curtos,
   não seis seções de home */
.corpo:has(.indice-fixo) section{padding:clamp(38px,5vh,64px) 0}
#cases,#abertura,#work{padding-top:clamp(18px,2.5vh,34px)}
.sh{display:flex;align-items:baseline;gap:16px;margin-bottom:30px}
h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,3vw,2.1rem);
  letter-spacing:-.02em;margin:0;font-variation-settings:var(--wonk)}
.sh em{font-style:normal;font-size:14px;color:var(--dim);white-space:nowrap}
.sh .dots{flex:1;height:1px;background:radial-gradient(circle,var(--rule) 1px,transparent 1px) 0 0/10px 1px repeat-x}

/* ── 08 · Botão e pílula ─────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:500;
  color:var(--accent,var(--star));border:1px solid var(--accent,var(--star));border-radius:var(--r-pill);
  padding:8px 17px;text-decoration:none;transition:background .25s,color .25s;background:transparent}
.btn svg{transition:transform .25s}
.card:hover .btn,.prat a:hover .btn,.mini a:hover .btn,.btn:hover{
  background:var(--accent,var(--star));border-color:var(--accent,var(--star));color:var(--on,var(--on-accent))}
.card:hover .btn svg,.prat a:hover .btn svg,.mini a:hover .btn svg,.btn:hover svg{transform:translateX(3px)}
.pill{display:inline-block;font-size:13.5px;color:var(--dim);border:1px solid var(--rule);
  border-radius:var(--r-pill);padding:7px 15px}

/* ── 09 · Card de case ───────────────────────────────────── */
.grid{display:grid;gap:clamp(18px,2.4vw,28px);grid-template-columns:repeat(2,1fr)}
.card{position:relative;text-decoration:none;display:block;border-radius:var(--r-lg);overflow:hidden;
  background:var(--surface);border:1px solid var(--rule);transition:border-color .3s,transform .4s cubic-bezier(.2,.7,.2,1)}
.card:hover{transform:translateY(-3px);border-color:var(--accent)}
.card .cover{position:relative;aspect-ratio:16/9;background:var(--solid,var(--accent));overflow:hidden}
.card .cover canvas{position:absolute;inset:0;width:100%;height:100%}
.card .tag{position:absolute;left:18px;top:16px;z-index:2;font-size:12.5px;color:#fff;
  background:rgba(0,0,0,.24);border-radius:var(--r-pill);padding:5px 13px;backdrop-filter:blur(6px)}
.card .body{padding:24px clamp(22px,2.6vw,32px) 28px}
.card h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.2rem,2vw,1.5rem);
  line-height:1.22;letter-spacing:-.015em;margin:0;font-variation-settings:var(--wonk)}
.card p{margin:11px 0 0;font-size:15.5px;color:var(--dim);line-height:1.56;max-width:62ch}
.card .foot{margin-top:20px;display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;font-size:13.5px;color:var(--dim)}
.card .foot b{font-family:var(--serif);font-weight:400;font-size:1.4rem;
  color:var(--accent);letter-spacing:-.02em;margin-right:6px}
.card.wide{grid-column:1/-1}
.card.wide .cover{aspect-ratio:24/7}
.card.wide h3{font-size:clamp(1.45rem,2.9vw,2.05rem)}
.card.wide p{font-size:16.5px;max-width:74ch}

/* ── 10 · Card curto ─────────────────────────────────────── */
.mini{display:grid;gap:clamp(16px,2.2vw,26px);grid-template-columns:repeat(3,1fr)}
.mini a{text-decoration:none;background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--r-md);padding:24px;display:flex;flex-direction:column;gap:10px;
  transition:border-color .3s,transform .4s cubic-bezier(.2,.7,.2,1)}
.mini a:hover{border-color:var(--accent);transform:translateY(-3px)}
.mini h3{font-family:var(--serif);font-weight:400;font-size:1.16rem;margin:0;
  letter-spacing:-.01em;font-variation-settings:var(--wonk)}
.mini p{margin:0;font-size:15px;color:var(--dim);line-height:1.55}
.mini .meta{font-size:12.5px;color:var(--dim)}
.mini .btn{align-self:flex-start;margin-top:auto;padding-top:8px}

.prat{display:grid;gap:clamp(16px,2.2vw,26px);grid-template-columns:repeat(3,1fr)}
.prat a{text-decoration:none;background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--r-md);padding:26px;display:flex;flex-direction:column;gap:10px;
  transition:border-color .3s,transform .4s cubic-bezier(.2,.7,.2,1)}
.prat a:hover{border-color:var(--accent);transform:translateY(-3px)}
.prat h3{font-family:var(--serif);font-weight:400;font-size:1.18rem;margin:0;
  font-variation-settings:var(--wonk)}
.prat p{margin:0;font-size:15px;color:var(--dim);line-height:1.55}
.prat em{font-style:normal;font-size:12.5px;color:var(--accent)}
.prat .btn{align-self:flex-start;margin-top:auto;padding-top:8px}

/* ── 11 · Faixa de destaque e lista de fatos ─────────────── */
.a11y{background:var(--surface);border-radius:var(--r-lg);padding:clamp(28px,4vw,52px);
  display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(26px,4.5vw,60px);align-items:center;
  border:1px solid var(--rule)}
.a11y p{margin:0;font-size:clamp(1.05rem,1.65vw,1.24rem);line-height:1.7;max-width:52ch}
.a11y ul{list-style:none;margin:0;padding:0;font-size:14.5px}
.a11y li{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--rule)}
.a11y li:last-child{border-bottom:none}
.a11y li span:first-child{color:var(--dim)}
.sobre{display:grid;grid-template-columns:1.45fr 1fr;gap:clamp(28px,5vw,72px);align-items:start}
.sobre p{margin:0 0 16px;line-height:1.74;max-width:70ch;font-size:18px}
.facts{list-style:none;margin:0;padding:0;font-size:14.5px}
.facts li{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--rule)}
.facts li:last-child{border-bottom:none}
.facts span:first-child{color:var(--dim)}

/* ── 12 · Contato ────────────────────────────────────────── */
.contato{position:relative;overflow:hidden;border-radius:var(--r-lg);
  background:var(--ink-deep);color:#EDEAE3;padding:clamp(34px,5.5vw,70px);
  margin:clamp(46px,7vh,88px) 0 0}
.contato canvas{position:absolute;inset:0;width:100%;height:100%}
.contato>div{position:relative;z-index:2}
.contato h2{color:#EDEAE3;max-width:20ch}
.contato p{color:#B7BFD1;max-width:56ch;margin:16px 0 28px;line-height:1.62;font-size:17px}
.links{display:flex;flex-wrap:wrap;gap:12px}
.links a{--accent:var(--star);--on:var(--on-star);color:var(--star);border-color:var(--star)}

/* ── 13 · Rodapé ─────────────────────────────────────────── */
footer{max-width:var(--container);margin:0 auto;padding:30px var(--gutter) 54px;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13.5px;color:var(--dim)}

/* ── 14 · Nota lateral ───────────────────────────────────── */
.nota{border-left:2px solid var(--star);padding:4px 0 4px 20px;
  margin:clamp(24px,4vh,36px) 0;font-size:16px;color:var(--dim);
  line-height:1.64;max-width:64ch}
.nota b{font-weight:500;color:var(--fg)}

/* ── 15 · Leitura de case ────────────────────────────────── */
.leitura{max-width:var(--leitura);margin:0 auto}
.leitura h2{margin:0 0 18px;scroll-margin-top:132px}
.leitura h2:first-child{margin-top:0}
.leitura h3{font-family:var(--serif);font-weight:400;font-size:1.3rem;
  letter-spacing:-.015em;margin:clamp(32px,5vh,48px) 0 12px;
  font-variation-settings:var(--wonk);scroll-margin-top:96px}
.leitura p{margin:0 0 20px;font-size:17.5px;line-height:1.66}
.leitura p b,.leitura p strong{font-weight:600}
.leitura ul{margin:0 0 20px;padding-left:22px}
.leitura li{margin-bottom:8px;line-height:1.62}

.figura{width:100%;margin:clamp(28px,4vh,44px) 0}
/* larga e total saem da coluna de leitura pelos dois lados.
   A centralização é por margem, não por transform: transform
   aqui brigaria com a revelação, que também usa transform. */
.figura.larga{--fw:min(var(--leitura-larga),100vw - 2*var(--gutter))}
.figura.total{--fw:min(var(--container),100vw - 2*var(--gutter))}
.figura.larga,.figura.total{width:var(--fw);margin-left:calc((100% - var(--fw))/2)}
.figura.estreita{width:min(340px,100%);margin-left:0}
.figura svg{display:block;width:100%;height:auto;
  border-radius:var(--r-md);border:1px solid var(--rule)}
/* captura nunca é ampliada além do que foi capturado */
.figura img{display:block;max-width:100%;height:auto;margin:0 auto;
  border-radius:var(--r-md);border:1px solid var(--rule)}
.figura.total img,.figura.total svg{border-radius:var(--r-lg)}
/* a legenda acompanha a largura da FIGURA, não a da coluna */
.figura figcaption{margin-top:14px;font-size:14px;color:var(--dim);line-height:1.5}
.figura figcaption b{color:var(--fg);font-weight:600}

/* botão de ampliação — criado por site.js em volta de cada imagem */
.figura .ampliar{display:block;width:100%;padding:0;border:0;background:none;
  cursor:zoom-in;border-radius:var(--r-md)}
.figura.total .ampliar{border-radius:var(--r-lg)}

/* ── 16 · Barra de progresso ─────────────────────────────── */
.progresso{position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:transparent;pointer-events:none}
.progresso i{display:block;height:100%;width:0;
  background:var(--accent,var(--star));transition:width .12s linear}

/* ── 17 · Índice lateral ─────────────────────────────────── */
.leitura-grid{display:grid;grid-template-columns:minmax(0,var(--leitura));
  justify-content:center;gap:clamp(32px,5vw,72px)}
.indice{font-size:14.5px}
.indice summary{cursor:pointer;list-style:none;display:flex;align-items:center;
  justify-content:space-between;gap:12px;min-height:44px;padding:0 4px;
  color:var(--dim);border-bottom:1px solid var(--rule)}
.indice summary::-webkit-details-marker{display:none}
.indice summary::after{content:"";width:8px;height:8px;flex:none;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .25s}
.indice[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.indice ol{list-style:none;margin:12px 0 0;padding:0}
.indice li{margin:0}
/* só os ITENS da lista viram linha com régua à esquerda. O .btn
   do rodapé do índice continua sendo um botão — foi o bug da v1.2. */
.indice ol a{display:block;min-height:44px;padding:11px 0 11px 16px;
  color:var(--dim);text-decoration:none;line-height:1.35;
  border-left:2px solid var(--rule);transition:color .2s,border-color .2s}
.indice ol a:hover{color:var(--fg)}
.indice ol a[aria-current="true"]{color:var(--accent,var(--star));font-weight:600;
  border-left-color:var(--accent,var(--star))}
.indice .voltar{margin-top:20px;padding-top:16px;border-top:1px solid var(--rule)}
.indice .voltar .btn{font-size:13.5px;padding:7px 15px}

@media(min-width:1100px){
  .leitura-grid{grid-template-columns:var(--indice) minmax(0,var(--leitura));
    gap:clamp(56px,6vw,104px)}
  .leitura-grid .leitura{margin:0}
  .indice{position:sticky;top:96px;align-self:start;max-height:calc(100vh - 140px);overflow-y:auto}
  .indice summary{display:none}
  .indice:not([open]) ol,.indice:not([open]) .voltar{display:block}
  /* Com índice à esquerda não sobra vão para sangrar: 240 de
     índice + 104 de vão + 1000 de figura estoura o container.
     Dentro do grid, a figura ocupa a coluna e o ritmo vem da
     moldura, não da largura. A sangria continua valendo abaixo
     de 1100px, onde o índice não está ocupando lugar. */
  .leitura-grid .figura{width:100%;margin-left:0;transform:none}
}

/* ── 18 · Bloco de decisão ──────────────────────────────── */
/* Rótulo, título e três linhas: dilema, escolha, custo. O
   formato é fixo e curto de propósito — quem lê é recrutador,
   não revisor de especificação. No máximo três por case. */
.decisao{margin:clamp(30px,4.5vh,48px) 0;padding:clamp(22px,3vw,30px);
  background:var(--surface);border:1px solid var(--rule);
  border-left:3px solid var(--accent,var(--star));border-radius:var(--r-md)}
.decisao .rotulo{font-size:12.5px;font-weight:600;color:var(--accent,var(--star));
  letter-spacing:.02em;margin:0 0 6px}
.decisao h3{font-family:var(--serif);font-weight:400;font-size:1.3rem;
  letter-spacing:-.015em;margin:0 0 16px;font-variation-settings:var(--wonk);
  scroll-margin-top:96px}
.decisao dl{margin:0;display:grid;grid-template-columns:104px 1fr;
  gap:0 20px;font-size:16px;line-height:1.55}
.decisao dt{color:var(--dim);font-size:13.5px;padding:12px 0;
  border-top:1px solid var(--rule)}
.decisao dd{margin:0;padding:12px 0;border-top:1px solid var(--rule)}
.decisao dt:first-of-type,.decisao dd:first-of-type{border-top:none;padding-top:0}

/* ── 19 · Citação em destaque ────────────────────────────── */
.citacao{margin:clamp(40px,6vh,72px) 0;padding:clamp(28px,4vw,48px) 0;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  text-align:center}
.citacao p{font-family:var(--serif);font-weight:400;
  font-size:clamp(1.4rem,3.2vw,2.05rem);line-height:1.3;letter-spacing:-.02em;
  margin:0 auto;max-width:24ch;font-variation-settings:var(--wonk);
  text-wrap:balance}
.citacao cite{display:block;margin-top:18px;font-style:normal;
  font-size:13.5px;color:var(--dim)}

/* ── 20 · Par de figuras (antes/depois é um uso dele) ────── */
.ab,.par{display:grid;gap:clamp(16px,2.4vw,26px);grid-template-columns:1fr 1fr;
  margin:clamp(28px,4.5vh,44px) 0}
.ab>figure,.par>figure{margin:0;background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--r-md);padding:18px;display:flex;flex-direction:column;gap:12px}
.ab>figure.depois,.par>figure.depois{border-color:var(--accent,var(--star))}
.ab .rotulo,.par .rotulo{font-size:12.5px;font-weight:600;color:var(--dim);letter-spacing:.02em}
.ab>figure.depois .rotulo,.par>figure.depois .rotulo{color:var(--accent,var(--star))}
.ab svg,.par svg{display:block;width:100%;height:auto;border-radius:var(--r-sm)}
.ab img,.par img{display:block;max-width:100%;height:auto;border-radius:var(--r-sm)}
.ab figcaption,.par figcaption{font-size:14px;color:var(--dim);line-height:1.5;margin-top:auto}

/* ── 24 · Trilha (breadcrumb) ────────────────────────────── */
/* Toda página interna diz de onde veio. O item atual não é link
   e carrega aria-current="page" — é a única marcação que um
   leitor de tela usa para situar a pessoa na hierarquia. */
.trilha{margin:0 0 22px;padding:0;list-style:none;display:flex;
  flex-wrap:wrap;align-items:center;gap:10px;font-size:13.5px}
.trilha li{display:flex;align-items:center;gap:10px;color:var(--dim)}
.trilha li+li::before{content:"";width:5px;height:5px;flex:none;
  border-right:1px solid currentColor;border-top:1px solid currentColor;
  transform:rotate(45deg);opacity:.7}
.trilha a{color:var(--dim);text-decoration:none;
  padding:4px 0;border-bottom:1px solid transparent;transition:.2s}
.trilha a:hover{color:var(--fg);border-bottom-color:var(--star)}
.trilha [aria-current="page"]{color:var(--fg)}
/* no hero, a trilha vive sobre tinta profunda em qualquer tema */
.hero .trilha li,.hero .trilha a{color:#98A1B8}
.hero .trilha a:hover,.hero .trilha [aria-current="page"]{color:#EDEAE3}

/* ── 23 · Faixa de números ───────────────────────────────── */
/* A primeira dobra de um case. Quatro números, peso igual, cada
   um com o rótulo que o torna legível sozinho. Quatro é o teto:
   com cinco, nenhum é o número. */
.numeros{display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(16px,2.4vw,28px);margin:clamp(24px,4vh,40px) 0 0;
  padding:0;list-style:none}
.numeros li{border-top:2px solid var(--accent,var(--star));padding:16px 0 0}
.numeros b{display:block;font-family:var(--serif);font-weight:400;
  font-size:clamp(1.7rem,3.4vw,2.4rem);line-height:1.08;letter-spacing:-.02em;
  color:var(--accent,var(--star));font-variation-settings:var(--wonk)}
.numeros span{display:block;margin-top:8px;font-size:14px;color:var(--dim);
  line-height:1.45;max-width:24ch}

/* ── 21 · Pontos de quebra ───────────────────────────────── */
@media(max-width:900px){
  .grid,.mini,.prat{grid-template-columns:1fr}
  .a11y,.sobre{grid-template-columns:1fr}
  .numeros{grid-template-columns:1fr 1fr}
  nav a.hs{display:none}
  .card.wide .cover{aspect-ratio:16/9}
  .decisao .opcoes{grid-template-columns:1fr;gap:14px}
  .ab,.par{grid-template-columns:1fr}
  .figura{width:100%;margin-left:0;transform:none}
}
@media(max-width:480px){
  .leitura p{font-size:17px}
  .decisao{padding:20px;border-radius:var(--r-sm)}
}

/* ── 22 · Movimento reduzido ─────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ── 25 · Tabela de dados ────────────────────────────────── */
/* Conjunto de estados, comparação, glossário: tudo isso é
   tabela, não parágrafo. Régua fina, sem zebrado, sem caixa. */
.tabela{width:100%;border-collapse:collapse;font-size:15.5px;
  margin:clamp(24px,4vh,36px) 0;text-align:left}
.tabela caption{caption-side:top;text-align:left;font-size:13.5px;
  color:var(--dim);padding-bottom:10px}
.tabela th{font-weight:600;font-size:13.5px;color:var(--dim);
  padding:0 16px 10px 0;border-bottom:1px solid var(--rule)}
.tabela td{padding:12px 16px 12px 0;border-bottom:1px solid var(--rule);
  vertical-align:top;line-height:1.5}
.tabela tr:last-child td{border-bottom:none}
.tabela .marca{display:inline-block;width:9px;height:9px;border-radius:50%;
  margin-right:9px;vertical-align:baseline}
.tabela .era{color:var(--dim);text-decoration:line-through}

/* ── 26 · Faixa de metadados e etiquetas ─────────────────── */
.meta-faixa{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;
  margin:26px 0 0;padding:0;list-style:none;font-size:14.5px;color:#B7BFD1}
.meta-faixa li{display:flex;align-items:center;gap:18px}
.meta-faixa li+li::before{content:"";width:4px;height:4px;border-radius:50%;
  background:currentColor;opacity:.55;flex:none}
.etiquetas{display:flex;flex-wrap:wrap;gap:9px;margin:22px 0 0;padding:0;list-style:none}
.etiquetas li{font-size:13px;color:#C4CBDC;border:1px solid #2A3350;
  border-radius:var(--r-pill);padding:6px 14px}
/* número único da dobra de triagem */
.numero-chave{margin:clamp(30px,5vh,46px) 0 0;max-width:34ch}
.numero-chave b{display:block;font-family:var(--serif);font-weight:400;
  font-size:clamp(2.6rem,6.5vw,4.2rem);line-height:1;letter-spacing:-.025em;
  color:var(--star);font-variation-settings:var(--wonk)}
.numero-chave span{display:block;margin-top:10px;font-size:16px;color:#B7BFD1;line-height:1.5}

/* ── 27 · Ampliação de figura ────────────────────────────── */
/* <dialog> nativo: Esc, foco preso e devolução de foco vêm do
   navegador. Menos código nosso é menos jeito de errar. */
.lupa{width:min(96vw,1600px);max-width:none;max-height:92vh;padding:0;border:0;
  background:var(--bg);color:var(--fg);border-radius:var(--r-lg);overflow:auto}
.lupa::backdrop{background:rgba(11,16,32,.82);backdrop-filter:blur(3px)}
.lupa img{display:block;width:100%;height:auto}
.lupa .legenda{padding:18px clamp(18px,3vw,28px) 24px;font-size:15px;
  color:var(--dim);line-height:1.55}
.lupa .fechar{position:sticky;top:0;margin-left:auto;display:block;
  width:44px;height:44px;border:0;background:none;color:var(--dim);
  cursor:pointer;font-size:22px;line-height:1}
.lupa .fechar:hover{color:var(--fg)}

/* ── 28 · Revelação discreta ─────────────────────────────── */
/* Só figura, bloco de destaque e decisão. Texto corrido aparece
   pronto: revelar parágrafo atrapalha quem lê rápido. */
.revela{opacity:0;transform:translateY(12px);
  transition:opacity .4s ease,transform .4s ease}
.revela.visivel{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .revela{opacity:1!important;transform:none!important}
}
@media(max-width:900px){
  .decisao dl{grid-template-columns:1fr;gap:0}
  .decisao dt{padding-bottom:2px;border-top:1px solid var(--rule)}
  .decisao dd{padding-top:0;border-top:none}
  .decisao dd:first-of-type{padding-top:0}
  .figura.larga,.figura.total{width:100%;margin-left:0}
  .tabela{font-size:15px}
}

/* ── 29 · Navegação de seção ─────────────────────────────── */
/* Fica colada abaixo do cabeçalho na página de case. Serve para
   duas coisas ao mesmo tempo: pular para um bloco e revelar a
   densidade da página — quem chega vê quantos blocos existem
   antes de decidir se lê. Substitui o índice lateral. */
.indice-fixo{position:sticky;top:calc(env(safe-area-inset-top,0px) + 64px);z-index:35;
  background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--rule)}
.indice-fixo ol{max-width:var(--container);margin:0 auto;padding:0 var(--gutter);
  list-style:none;display:flex;gap:clamp(4px,1.6vw,22px);overflow-x:auto;
  scrollbar-width:none;counter-reset:bloco}
.indice-fixo ol::-webkit-scrollbar{display:none}
.indice-fixo a{display:flex;align-items:center;gap:8px;min-height:48px;
  padding:0 2px;font-size:14px;color:var(--dim);text-decoration:none;
  white-space:nowrap;border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.indice-fixo li{counter-increment:bloco}
.indice-fixo a::before{content:counter(bloco,decimal-leading-zero);
  font-size:11.5px;opacity:.6;letter-spacing:.04em}
.indice-fixo a:hover{color:var(--fg)}
/* seção atual: cor, peso e régua — nunca só cor */
.indice-fixo a[aria-current="true"]{color:var(--accent,var(--star));font-weight:600;
  border-bottom-color:var(--accent,var(--star))}
.indice-fixo a[aria-current="true"]::before{opacity:1}

/* ── 30 · Bloco duplo ────────────────────────────────────── */
/* Texto ao lado de figura vertical. Existe porque figura alta e
   estreita sozinha na coluna deixa metade da linha vazia. */
.bloco-duplo{display:grid;grid-template-columns:1fr minmax(280px,340px);
  gap:clamp(28px,4vw,56px);align-items:start;margin:clamp(28px,4vh,44px) 0}
.bloco-duplo>*{margin:0}
.bloco-duplo .figura{margin:0}
.bloco-duplo p{margin:0 0 18px}
.bloco-duplo p:last-child{margin-bottom:0}
@media(max-width:900px){
  .bloco-duplo{grid-template-columns:1fr;gap:24px}
  .indice-fixo a{font-size:13.5px}
}

/* ── 31 · Entrada de imagem ──────────────────────────────── */
/* A imagem chega com fade curto quando termina de carregar, em
   vez de estalar na tela. Sem deslocamento: deslocar imagem que
   acabou de carregar empurra a leitura de quem já está lendo. */
.figura img{opacity:0;transition:opacity .45s ease}
.figura img.carregada,.lupa img{opacity:1}
@media(prefers-reduced-motion:reduce){
  .figura img{opacity:1!important;transition:none!important}
}

/* ── 32 · Entradas escalonadas ───────────────────────────── */
/* Onde o movimento não custa leitura: figura, linha de tabela,
   número e etiqueta. Nada aqui atrasa uma linha de texto — o
   parágrafo continua aparecendo pronto, como manda o v2. */

/* figura: fade com um zoom mínimo, o bastante para parecer que
   entrou e não o bastante para parecer efeito */
.figura.revela{transform:translateY(12px) scale(.99)}
.figura.revela.visivel{transform:none}

/* tabela: cabeçalho aparece com o bloco, linhas em sequência */
.tabela.revela tbody tr{opacity:0;transform:translateY(8px);
  transition:opacity .35s ease,transform .35s ease}
.tabela.revela.visivel tbody tr{opacity:1;transform:none}
.tabela.revela.visivel tbody tr:nth-child(1){transition-delay:0ms}
.tabela.revela.visivel tbody tr:nth-child(2){transition-delay:55ms}
.tabela.revela.visivel tbody tr:nth-child(3){transition-delay:110ms}
.tabela.revela.visivel tbody tr:nth-child(4){transition-delay:165ms}
.tabela.revela.visivel tbody tr:nth-child(5){transition-delay:220ms}
.tabela.revela.visivel tbody tr:nth-child(6){transition-delay:275ms}
.tabela.revela.visivel tbody tr:nth-child(7){transition-delay:330ms}
.tabela.revela.visivel tbody tr:nth-child(8){transition-delay:385ms}
.tabela.revela.visivel tbody tr:nth-child(9){transition-delay:440ms}
.tabela.revela.visivel tbody tr:nth-child(10){transition-delay:495ms}

/* faixa de números: um por vez, no ritmo da contagem */
.numeros.revela li{opacity:0;transform:translateY(10px);
  transition:opacity .4s ease,transform .4s ease}
.numeros.revela.visivel li{opacity:1;transform:none}
.numeros.revela.visivel li:nth-child(1){transition-delay:0ms}
.numeros.revela.visivel li:nth-child(2){transition-delay:90ms}
.numeros.revela.visivel li:nth-child(3){transition-delay:180ms}
.numeros.revela.visivel li:nth-child(4){transition-delay:270ms}

/* etiquetas do hero: entram no carregamento, não no scroll */
@keyframes surge{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.etiquetas li{opacity:0;animation:surge .45s ease forwards}
.etiquetas li:nth-child(1){animation-delay:240ms}
.etiquetas li:nth-child(2){animation-delay:310ms}
.etiquetas li:nth-child(3){animation-delay:380ms}
.etiquetas li:nth-child(4){animation-delay:450ms}
.etiquetas li:nth-child(5){animation-delay:520ms}
.etiquetas li:nth-child(6){animation-delay:590ms}
.etiquetas li:nth-child(7){animation-delay:660ms}
.etiquetas li:nth-child(8){animation-delay:730ms}

@media(prefers-reduced-motion:reduce){
  .figura.revela,.figura.revela.visivel{transform:none!important}
  .tabela.revela tbody tr,.numeros.revela li{opacity:1!important;transform:none!important;transition:none!important}
  .etiquetas li{opacity:1!important;animation:none!important}
}

/* ── 33 · v2.3 · home em inglês ──────────────────────────── */
/* Tudo o que a home nova precisou e o sistema não tinha. Entra
   aqui em bloco único para a revisão ficar fácil; quando
   sistema.html for migrado, cada regra volta para a seção dela. */

/* 33.1 · Alvo de toque. A regra de 44px existia no papel e não
   no código: o botão de tema tinha 36px e os links do menu não
   tinham área nenhuma além do texto. */
nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 2px}
nav a[aria-current="page"]{color:var(--fg);box-shadow:inset 0 -2px 0 var(--star)}
.toggle{width:44px;height:44px}
.brand{display:inline-flex;align-items:center;min-height:44px}
.btn{min-height:44px;padding:10px 20px}
.indice .voltar .btn{padding:7px 15px}

/* 33.2 · Botão no foco. O sistema diz "preenchido no hover e no
   foco", mas só o hover preenchia. */
.btn:focus-visible{background:var(--accent,var(--star));border-color:var(--accent,var(--star));
  color:var(--on,var(--on-accent))}

/* 33.3 · Botão primário: uma ação principal por bloco, preenchido
   desde o início. Dourado sobre tinta profunda, 8,5:1. */
.btn.primario{background:var(--accent,var(--star));color:var(--on,var(--on-star))}
/* continua preenchido no hover e no foco: inverter para contorno
   faria o primário parecer o secundário justo quando é escolhido */
.btn.primario:hover,.btn.primario:focus-visible{background:#E6B65C;border-color:#E6B65C;color:var(--on-star)}

/* 33.4 · Botão neutro: para superfície clara. O dourado sobre o
   papel dá 2,15:1 e reprova. Era o caso do botão do Sobre. O
   neutro usa a cor do texto: 15,3:1 no claro, 14,4:1 no escuro. */
.btn.neutro{--accent:var(--fg);--on:var(--bg)}

/* 33.5 · Card com link no título. Antes o card inteiro era um
   <a>, e o leitor de tela anunciava título, resumo e número como
   nome do link. Agora o link é só o título; a área de clique
   cobre o card por um pseudo-elemento. O "View case" fica
   visível, mas fora da árvore de acessibilidade. */
.card-link{text-decoration:none}
.card-link::after{content:"";position:absolute;inset:0;z-index:3;border-radius:var(--r-lg)}
.card-link:focus-visible{outline:none}
.card-link:focus-visible::after{outline:2px solid var(--star);outline-offset:-3px}
.card:has(.card-link:focus-visible){border-color:var(--accent)}
.card:has(.card-link:focus-visible) .btn{background:var(--accent);border-color:var(--accent);color:var(--on,var(--on-accent))}

/* 33.6 · Hero pessoal: só o cumprimento e o texto de apoio. Sem
   título de posicionamento, o texto de apoio sobe de tamanho e
   carrega o que a pessoa precisa saber. */
.hero.pessoal{padding-top:clamp(72px,14vh,148px)}
.hero.pessoal h1{font-size:clamp(2.4rem,6.4vw,4.6rem)}
.hero.pessoal .lead{margin-top:22px;max-width:46ch;color:#C9CFDD;
  font-size:clamp(1.15rem,2.1vw,1.5rem);line-height:1.55}
.acoes{display:flex;flex-wrap:wrap;gap:12px;margin:clamp(30px,5vh,44px) 0 0}

/* 33.7 · Fim de seção: a ação que leva para fora da seção. */
.fim-secao{margin-top:clamp(26px,4vh,36px)}

/* 33.8 · Canais de contato. O e-mail aparece escrito, não só num
   botão: quem não tem programa de e-mail configurado precisa
   conseguir ler e copiar. Sublinhado, porque link de texto não
   pode depender só da cor. */
.contato .disponivel{display:flex;align-items:center;gap:10px;margin:0 0 18px;
  font-size:14.5px;color:#C9CFDD}
.contato .disponivel i{width:8px;height:8px;border-radius:50%;background:var(--star);flex:none}
.canais{list-style:none;margin:0 0 28px;padding:0;display:grid;gap:4px}
.canais li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px}
.canais span{font-size:13.5px;color:#98A1B8;min-width:56px}
.canais a{display:inline-flex;align-items:center;min-height:44px;
  font-family:var(--serif);font-size:clamp(1.15rem,2.4vw,1.5rem);color:#EDEAE3;
  text-decoration:underline;text-decoration-color:var(--star);text-decoration-thickness:1px;
  text-underline-offset:6px;overflow-wrap:anywhere;transition:color .2s}
.canais a:hover{color:var(--star)}

/* 33.9 · Rodapé com links: sublinhados, área de 44px. */
footer nav{gap:clamp(14px,2vw,24px)}
footer a{display:inline-flex;align-items:center;min-height:44px;color:var(--dim);
  text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--rule)}
footer a:hover{color:var(--fg);text-decoration-color:var(--star)}
footer>span{display:inline-flex;align-items:center;min-height:44px}

/* 33.10 · Cabeçalho no celular: quatro links, a marca e o tema não
   cabem em 375px. Contato sai do menu porque está no hero e no
   fim da página. */
@media(max-width:560px){
  header{gap:10px}
  header>nav{gap:12px}
  header nav a.hs-sm{display:none}
  .brand{font-size:17px;white-space:nowrap}
  header nav a{font-size:14px}
}
/* abaixo de 360px nem três links cabem com o tema. Sai o link que
   a página atual já mostra logo abaixo (marcado com .hs-xs). */
@media(max-width:360px){
  header{padding-left:16px;padding-right:16px}
  header nav a.hs-xs{display:none}
}

/* ── 34 · v2.4 · retrato e fluidez ───────────────────────── */
/* Hero com foto. A foto é tratada para a noite do site: recorte,
   luz quente vinda da direita, sombras na tinta. Ela entra no céu,
   não numa moldura: sem borda, sem caixa, as bordas se dissolvem.
   Desktop e celular são composições diferentes, não a mesma
   empilhada. */

/* 34.1 · Cabeçalho sobre o céu: transparente enquanto o hero está
   na tela. Uma faixa clara em cima da noite era o primeiro bloco
   da página. site.js liga a classe .no-ceu. */
header{background:color-mix(in srgb,var(--bg) 93%,transparent)}
/* sobre a noite o cabeçalho vira um véu escuro translúcido: some no
   céu parado e ainda separa o texto que rola por baixo */
header.no-ceu{background:rgba(11,16,32,.72);backdrop-filter:blur(14px);border-bottom-color:transparent}
header.no-ceu .brand,header.no-ceu nav a:hover{color:#EDEAE3}
header.no-ceu nav a{color:#B7BFD1}
header.no-ceu .toggle{color:#B7BFD1;border-color:rgba(237,234,227,.28)}
header.no-ceu .toggle:hover{color:var(--star);border-color:var(--star)}

/* 34.2 · Estrutura (v2.5: a foto saiu; o centro é a constelação) */
.retrato{position:relative;color:#EDEAE3;overflow:hidden;
  padding:0 var(--gutter)}
.retrato-in{position:relative;max-width:var(--container);margin:0 auto;
  min-height:0;display:grid;
  padding-top:clamp(28px,7vh,72px);
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,.85fr);
  grid-template-rows:auto auto;row-gap:clamp(32px,7vh,72px);column-gap:clamp(20px,3vw,40px)}

/* 34.3 · Constelação de Peixes. A peça central do hero: as estrelas
   acendem, as linhas se desenham devagar até formar Peixes, o
   desenho respira e se desfaz, e o ciclo recomeça. É a mesma
   constelação do fundo, só que com nome: o motivo da marca vira
   assinatura pessoal. Posições reais das estrelas (J2000). */
.retrato-astro{grid-column:2;grid-row:1;align-self:center;justify-self:center;
  position:relative;width:min(118%,640px);margin:0;z-index:1}
.retrato-astro canvas{position:relative;display:block;width:100%;aspect-ratio:3/2;height:auto}
/* v2.5.1: menos respiro no desktop. O hero não tem mais altura
   mínima de tela cheia: abraça o conteúdo, com folga controlada em
   cima e antes dos fatos. O quadro de Peixes ficou 3:2, como a
   figura. */
/* um respiro escuro atrás de Peixes: o céu de fundo continua, mas
   não disputa o desenho principal */
.retrato-astro::before{content:"";position:absolute;inset:-12% -18%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(11,16,32,.92) 35%,rgba(11,16,32,.6) 65%,rgba(11,16,32,0) 100%)}
.retrato-astro figcaption{margin-top:6px;text-align:center;font-size:13.5px;
  color:#98A1B8;letter-spacing:.01em}
.retrato-astro figcaption i{font-family:var(--serif);font-style:italic;color:#C9CFDD}

/* 34.4 · Nome. O h1 continua sendo "Hi, I'm Larissa." para o leitor
   de tela; visualmente o nome é a peça grande. */
.retrato-texto{grid-column:1;grid-row:1;align-self:center;position:relative;z-index:2;
  padding:0}
.retrato h1{max-width:none;margin:0}
.retrato h1 .oi{display:block;font-family:var(--sans);font-size:clamp(1.05rem,1.5vw,1.25rem);
  font-weight:500;letter-spacing:.01em;color:#C9CFDD;margin-bottom:.35em}
.retrato h1 .nome{display:block;font-size:clamp(3.6rem,7.6vw,7.4rem);line-height:.95;
  letter-spacing:-.035em}
.retrato h1 .nome i{font-style:normal;color:var(--star)}
.retrato .acoes{margin-top:clamp(26px,4.5vh,40px)}

/* 34.5 · Texto de apoio à direita, alinhado com o nome */
.retrato-apoio{grid-column:3;grid-row:1;align-self:center;position:relative;z-index:2;
  margin:0;font-size:clamp(1.05rem,1.35vw,1.2rem);line-height:1.6;color:#C9CFDD;max-width:32ch}
.retrato-apoio b{display:block;font-family:var(--serif);font-weight:400;
  font-size:clamp(1.3rem,1.9vw,1.65rem);line-height:1.25;letter-spacing:-.015em;
  color:#EDEAE3;margin-bottom:12px;font-variation-settings:var(--wonk)}

/* 34.6 · Faixa de fatos: quatro linhas curtas, sem caixa. Régua
   pontilhada, o vocabulário da constelação. */
.retrato-fatos{grid-column:1 / -1;grid-row:2;position:relative;z-index:2;
  list-style:none;margin:0;padding:8px 0 clamp(24px,4vh,40px);
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px clamp(16px,2.4vw,32px)}
.retrato-fatos li{display:flex;flex-direction:column;gap:2px;padding-top:14px;
  background:radial-gradient(circle,rgba(237,234,227,.35) 1px,transparent 1.2px) 0 0/8px 1px repeat-x;
  font-size:14px;color:#B7BFD1;line-height:1.4}
.retrato-fatos b{font-family:var(--serif);font-weight:400;font-size:1.2rem;color:#EDEAE3;
  letter-spacing:-.01em}

/* 34.7 · Tela média: duas colunas, apoio sob o nome */
@media(max-width:1099px){
  .retrato-in{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
    grid-template-rows:auto auto auto;row-gap:clamp(20px,4vh,36px)}
  .retrato-astro{grid-column:2;grid-row:1 / span 2;width:100%}
  .retrato-texto{grid-column:1;grid-row:1;align-self:end}
  .retrato-apoio{grid-column:1;grid-row:2;align-self:start}
  .retrato-fatos{grid-row:3;grid-template-columns:repeat(2,1fr)}
}

/* 34.8 · Celular: outra composição. Peixes no topo, em largura
   cheia, como um céu visto pela janela; o nome logo abaixo. Ações
   em largura cheia, para o polegar. */
@media(max-width:899px){
  .retrato{padding:0}
  .retrato-in{display:flex;flex-direction:column;min-height:0;padding-top:0}
  .retrato-astro{order:1;width:100%;max-width:520px;margin:8px auto 0;padding:0 8px}
  .retrato-astro canvas{aspect-ratio:auto;height:min(38svh,320px)}
  /* o bloco de texto se desfaz para os filhos entrarem na ordem do
     celular: nome, apoio, ações, fatos */
  .retrato-texto{display:contents}
  .retrato h1{order:2;margin-top:clamp(12px,3svh,28px);padding:0 var(--gutter);position:relative;z-index:2}
  .retrato h1 .nome{font-size:clamp(3.2rem,16vw,4.6rem)}
  .retrato-apoio{order:3;padding:0 var(--gutter);margin:16px 0 0;max-width:40ch}
  .retrato .acoes{order:4;padding:0 var(--gutter);margin-top:24px;
    display:grid;grid-template-columns:1fr 1fr;gap:10px;position:relative;z-index:2}
  .retrato .acoes .btn{justify-content:center}
  .retrato-fatos{order:5;padding:28px var(--gutter) 8px;grid-template-columns:1fr 1fr;
    background:none}
}
@media(max-width:359px){
  .retrato .acoes{grid-template-columns:1fr}
}

/* 34.9 · Volta da noite. O fim da página não é uma caixa: o papel
   escurece de novo até a tinta, a constelação volta, e o contato e
   o rodapé moram nessa noite. Começo e fim do site falam a mesma
   língua. */
.noite{position:relative;color:#EDEAE3;background:var(--ink-deep);
  margin-top:clamp(120px,18vh,220px);isolation:isolate}
.noite section{padding:0}
.noite::before{content:"";position:absolute;left:0;right:0;bottom:100%;
  height:clamp(120px,18vh,220px);pointer-events:none;
  background:linear-gradient(to top,
    var(--ink-deep) 0%,
    color-mix(in srgb,var(--ink-deep) 93%,transparent) 16%,
    color-mix(in srgb,var(--ink-deep) 72%,transparent) 32%,
    color-mix(in srgb,var(--ink-deep) 38%,transparent) 52%,
    color-mix(in srgb,var(--ink-deep) 12%,transparent) 74%,
    transparent 100%)}
.noite>canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.noite .contato{background:none;border-radius:0;overflow:visible;margin:0;
  max-width:var(--container);margin:0 auto;padding:clamp(48px,9vh,110px) var(--gutter) clamp(36px,6vh,64px)}
.noite .contato h2{font-size:clamp(2.2rem,5vw,3.6rem)}
.noite footer{color:#98A1B8;border-top:1px solid rgba(237,234,227,.12)}
.noite footer a{color:#B7BFD1;text-decoration-color:rgba(237,234,227,.3)}
.noite footer a:hover{color:#EDEAE3;text-decoration-color:var(--star)}

/* 34.10 · Superfícies translúcidas. O card deixa passar um pouco do
   fundo, em vez de ser uma placa opaca. A opacidade é alta o
   bastante para o contraste do texto não mudar. */
.card{background:color-mix(in srgb,var(--surface) 82%,transparent);
  border-color:color-mix(in srgb,var(--rule) 70%,transparent);
  backdrop-filter:blur(10px)}

/* 34.11 · Troca de página sem corte: a página atual se dissolve na
   próxima. Desligado para quem pede menos movimento. */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.35s}
@media(prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
}

/* ── 35 · v2.6 · sobre na home ───────────────────────────── */
/* Quem eu sou separado de onde eu trabalhei. O texto fala de
   motivo, não de cargo; a trajetória mora em duas linhas do tempo,
   trabalho e estudo, lado a lado. A foto entra aqui, natural, sem
   tratamento de capa: é a seção sobre a pessoa. */
.sobre-v2{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.6fr);
  grid-template-rows:auto auto;gap:clamp(28px,4vw,56px) clamp(28px,5vw,72px);align-items:start}
.sobre-foto{grid-column:1;grid-row:1 / span 2;margin:0;position:sticky;top:96px}
.sobre-foto img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
  border-radius:var(--r-lg)}
.sobre-texto{grid-column:2;grid-row:1}
.sobre-texto p{margin:0 0 16px;font-size:18px;line-height:1.72;max-width:62ch}
.sobre-texto p:first-child{font-family:var(--serif);font-size:clamp(1.25rem,1.9vw,1.55rem);
  line-height:1.4;letter-spacing:-.01em;font-variation-settings:var(--wonk)}
.sobre-meta{font-size:14.5px!important;color:var(--dim)}
.sobre-texto .acoes{margin-top:24px}
/* formato do arquivo junto do rótulo: quem clica sabe o que vai baixar */
.btn .formato{font-size:12px;font-weight:600;letter-spacing:.02em;
  border:1px solid currentColor;border-radius:6px;padding:0 5px;line-height:1.5;opacity:.85}

/* linha do tempo: pontilhado vertical e uma estrela por item, o
   vocabulário da constelação */
.trajetos{grid-column:2;grid-row:2;display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(24px,4vw,56px)}
.trajeto h3{font-family:var(--serif);font-weight:400;font-size:1.25rem;margin:0 0 14px;
  letter-spacing:-.01em;font-variation-settings:var(--wonk)}
.trajeto ol{list-style:none;margin:0;padding:0 0 0 20px;position:relative}
.trajeto ol::before{content:"";position:absolute;left:4px;top:8px;bottom:8px;width:1px;
  background:radial-gradient(circle,var(--dim) .8px,transparent 1px) 0 0/1px 6px repeat-y;opacity:.6}
.trajeto li{position:relative;display:flex;flex-direction:column;gap:1px;padding:0 0 18px;
  font-size:14.5px;color:var(--dim);line-height:1.45}
.trajeto li:last-child{padding-bottom:0}
.trajeto li::before{content:"";position:absolute;left:-20px;top:6px;width:9px;height:9px;
  border-radius:50%;background:var(--star);box-shadow:0 0 0 3px var(--bg),0 0 10px rgba(217,164,65,.55)}
.trajeto b{font-weight:600;color:var(--fg);font-size:15.5px}
.trajeto .quando{font-size:13px;color:var(--dim)}

@media(max-width:899px){
  .sobre-v2{grid-template-columns:1fr}
  .sobre-foto{grid-column:1;grid-row:auto;position:static;max-width:420px}
  .sobre-foto img{aspect-ratio:1/1;object-position:50% 20%}
  .sobre-texto,.trajetos{grid-column:1;grid-row:auto}
}
@media(max-width:600px){
  .trajetos{grid-template-columns:1fr}
}

/* ── 36 · v2.7 · contato em botões e rodapé completo ─────── */
/* Os canais viram botões com ícone, mas o valor continua escrito no
   rótulo: quem quer copiar o e-mail ou o número consegue ler. O
   ícone é apoio, nunca o único sinal. */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.noite .contato .disponivel{margin:18px 0 30px;font-size:16px}
.canais-btn{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px}
.canais-btn .btn{--accent:var(--star);--on:var(--on-star);gap:10px;font-size:15px;padding:11px 20px}
.canais-btn .btn>svg:first-child{flex:none}

/* rodapé: marca e uma linha, páginas, onde mais me achar, hora
   local (útil para quem contrata de outro fuso), e a base com
   copyright e volta ao topo */
.noite .rodape{display:block;max-width:var(--container);margin:0 auto;
  padding:0 var(--gutter) clamp(28px,4vh,40px);
  border-top:0;color:#98A1B8;font-size:14.5px}
.rodape-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:28px clamp(20px,4vw,56px);
  border-top:1px solid rgba(237,234,227,.12);padding-top:clamp(32px,5vh,48px)}
.rodape-marca .brand{color:#EDEAE3;font-size:21px}
.rodape-marca p{margin:10px 0 0;color:#B7BFD1;max-width:30ch;line-height:1.5}
.rodape-titulo{font-family:var(--sans);font-size:13.5px;font-weight:600;letter-spacing:.01em;
  color:#98A1B8;margin:0 0 8px}
.rodape ul{list-style:none;margin:0;padding:0}
.noite .rodape nav{display:block}
.noite .rodape ul a{display:inline-flex;align-items:center;min-height:44px;padding:0;color:#EDEAE3;
  text-decoration:underline;text-decoration-color:rgba(237,234,227,.28);text-underline-offset:5px;
  font-size:15px}
.noite .rodape ul a:hover{color:var(--star);text-decoration-color:var(--star)}
.rodape-hora p{margin:0;display:flex;flex-direction:column;gap:2px}
.rodape-hora time{font-family:var(--serif);font-size:1.5rem;color:#EDEAE3;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums}
.rodape-hora span{font-size:13.5px}
.rodape-base{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:clamp(28px,5vh,44px);padding-top:20px;border-top:1px solid rgba(237,234,227,.08)}
.noite .rodape-base .btn{--accent:#B7BFD1;--on:var(--ink-deep);color:#B7BFD1;border-color:rgba(237,234,227,.3);
  text-decoration:none;font-size:14px}
@media(max-width:899px){
  .rodape-grid{grid-template-columns:1fr 1fr}
  .rodape-marca{grid-column:1 / -1}
  .canais-btn .btn{width:100%;justify-content:flex-start}
  .canais-btn{flex-direction:column}
}
.noite .rodape .brand{text-decoration:none;min-height:0}

/* v2.7.1: a grade de quatro colunas saiu do rodapé; fica só a base
   com copyright e volta ao topo, logo abaixo do contato */
.noite .rodape-base{margin-top:0;border-top:1px solid rgba(237,234,227,.12);padding-top:24px}

/* ── 37 · v2.8 · capas de case com imagem ────────────────── */
/* Capa = a tela real do projeto, centralizada, sobre um fundo
   trabalhado na cor do case (gradiente, manchas de luz, um eco
   desfocado da própria tela e uma constelação na frente). A
   constelação animada sai da capa: ela já está pintada na imagem,
   e duas camadas de estrelas disputavam. Dado sensível da tela é
   coberto antes de exportar. */
.card .cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.card:hover .cover img{transform:scale(1.03)}
.card .tag{background:rgba(11,16,32,.62)}
@media(prefers-reduced-motion:reduce){.card:hover .cover img{transform:none}}

/* ── 38 · v2.9 · tema claro de ponta a ponta ─────────────── */
/* O site abre no escuro. No claro, nada fica em tinta: o céu do
   hero, o cabeçalho e a noite do fim viram papel, o texto vira
   tinta e as constelações trocam para tinta e bronze (constelacao.js).
   O dourado não passa no papel (2,15:1), então os botões de contorno
   usam a cor do texto; o primário segue dourado com texto em tinta. */
:root[data-theme="light"] .veu{background:var(--paper)}
:root[data-theme="light"] .hero{color:var(--text)}
:root[data-theme="light"] .retrato h1 .oi{color:var(--muted)}
:root[data-theme="light"] .retrato-apoio{color:var(--muted)}
:root[data-theme="light"] .retrato-apoio b,
:root[data-theme="light"] .retrato-fatos b{color:var(--text)}
:root[data-theme="light"] .retrato-fatos li{color:var(--muted);
  background:radial-gradient(circle,rgba(27,33,51,.35) 1px,transparent 1.2px) 0 0/8px 1px repeat-x}
:root[data-theme="light"] .retrato-astro::before{
  background:radial-gradient(closest-side,rgba(251,250,247,.92) 35%,rgba(251,250,247,.6) 65%,rgba(251,250,247,0) 100%)}
:root[data-theme="light"] .retrato-astro figcaption{color:var(--muted)}
:root[data-theme="light"] .retrato-astro figcaption i{color:var(--text)}
:root[data-theme="light"] .hero .btn:not(.primario){--accent:var(--text);--on:var(--paper)}

:root[data-theme="light"] header.no-ceu{background:rgba(251,250,247,.78)}
:root[data-theme="light"] header.no-ceu .brand{color:var(--text)}
:root[data-theme="light"] header.no-ceu nav a{color:var(--muted)}
:root[data-theme="light"] header.no-ceu nav a:hover{color:var(--text)}
:root[data-theme="light"] header.no-ceu .toggle{color:var(--muted);border-color:var(--line)}

:root[data-theme="light"] .noite{background:var(--paper);color:var(--text)}
:root[data-theme="light"] .noite{margin-top:clamp(24px,4vh,48px);border-top:1px solid var(--line)}
:root[data-theme="light"] .noite::before{display:none}
:root[data-theme="light"] .noite .contato h2{color:var(--text)}
:root[data-theme="light"] .noite .contato .disponivel{color:var(--muted)}
:root[data-theme="light"] .canais-btn .btn{--accent:var(--text);--on:var(--paper)}
:root[data-theme="light"] .noite .rodape{color:var(--muted)}
:root[data-theme="light"] .noite .rodape-base{border-top-color:var(--line)}
:root[data-theme="light"] .noite .rodape-base .btn{--accent:var(--text);--on:var(--paper);
  color:var(--text);border-color:var(--line)}

/* ── 39 · v2.10 · case em breve e volta ao topo ──────────── */
/* Case ainda não publicado: o card não é link. Sem hover de
   elevação nem zoom, para não prometer clique; no lugar do botão,
   uma pílula (rótulo não clicável do sistema). */
.card.em-breve{cursor:default}
.card.em-breve:hover{transform:none;border-color:color-mix(in srgb,var(--rule) 70%,transparent)}
.card.em-breve:hover .cover img{transform:none}
.pill.breve{border:0;padding:0;display:inline-flex;align-items:center;gap:8px;
  color:var(--fg);font-size:14px}
/* sem contorno de propósito: contorno no sistema significa clique */
.pill.breve::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--star);flex:none}

/* o botão de voltar ao topo tinha cor de texto fixa, que vencia a
   do hover: preenchia e o texto sumia nos dois temas */
.noite .rodape-base .btn:hover,.noite .rodape-base .btn:focus-visible{
  background:#EDEAE3;border-color:#EDEAE3;color:var(--ink-deep)}
:root[data-theme="light"] .noite .rodape-base .btn:hover,
:root[data-theme="light"] .noite .rodape-base .btn:focus-visible{
  background:var(--text);border-color:var(--text);color:var(--paper)}

/* ── 40 · v2.11 · link desabilitado ──────────────────────── */
/* Página que ainda não existe: o item continua no lugar, mas sem
   href (fora do Tab e lido como texto) e com "(coming soon)" para
   leitor de tela. Visualmente esmaecido e sem resposta ao hover. */
a.off{opacity:.55;cursor:not-allowed;pointer-events:none}
.btn.off{border-style:dashed}

/* ── 41 · v2.12 · contato em três colunas ────────────────── */
/* Menu, conexões e o canal principal em destaque. O destaque é o
   telefone: é onde a resposta é mais rápida. A bolinha pulsa para
   dizer "disponível agora"; com movimento reduzido ela fica parada. */
.noite .contato h2{margin-bottom:clamp(28px,5vh,48px)}
.contato-grid{display:grid;grid-template-columns:1fr 1fr 1.6fr;gap:32px clamp(24px,4vw,64px)}
.noite nav.contato-col{display:block}
.contato-col .formato{font-size:12px;font-weight:600;border:1px solid currentColor;border-radius:6px;padding:0 5px;line-height:1.5;opacity:.85}
.contato-col h3{font-family:var(--sans);font-size:13.5px;font-weight:600;letter-spacing:.02em;
  color:#98A1B8;margin:0 0 10px}
.contato-col ul{list-style:none;margin:0;padding:0}
.contato-col li a{display:inline-flex;align-items:center;gap:8px;min-height:44px;
  font-size:17px;color:#EDEAE3;text-decoration:none;
  background:linear-gradient(currentColor,currentColor) 0 calc(100% - 9px)/0 1px no-repeat;
  transition:background-size .3s,color .2s}
.contato-col li a:hover,.contato-col li a:focus-visible{color:var(--star);background-size:100% 1px}
.contato-col li a.off{color:#98A1B8}
.contato-tel{display:inline-block;font-family:var(--serif);font-weight:400;
  font-size:clamp(2rem,3.6vw,3rem);line-height:1.15;letter-spacing:-.02em;color:#EDEAE3;
  text-decoration:underline;text-decoration-color:var(--star);text-decoration-thickness:1px;
  text-underline-offset:10px;font-variation-settings:var(--wonk);white-space:nowrap}
.contato-tel:hover,.contato-tel:focus-visible{color:var(--star)}
.noite .contato .contato-oi .disponivel{display:flex;align-items:flex-start;gap:12px;line-height:1.5;
  margin:20px 0 0;font-size:15px;color:#B7BFD1}
.pulso{position:relative;width:9px;height:9px;flex:none;margin-top:.45em;border-radius:50%;background:var(--star)}
.pulso::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--star);
  animation:pulso 2s ease-out infinite}
@keyframes pulso{0%{transform:scale(1);opacity:.65}80%,100%{transform:scale(2.8);opacity:0}}
.pulso{animation:respira 2s ease-in-out infinite}
@keyframes respira{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
@media(prefers-reduced-motion:reduce){.pulso,.pulso::after{animation:none}}

:root[data-theme="light"] .noite nav.contato-col{display:block}
.contato-col .formato{font-size:12px;font-weight:600;border:1px solid currentColor;border-radius:6px;padding:0 5px;line-height:1.5;opacity:.85}
.contato-col h3{color:var(--muted)}
:root[data-theme="light"] .contato-col li a,
:root[data-theme="light"] .contato-tel{color:var(--text)}
:root[data-theme="light"] .contato-col li a:hover,
:root[data-theme="light"] .contato-col li a:focus-visible,
:root[data-theme="light"] .contato-tel:hover{color:var(--a-bronze)}
:root[data-theme="light"] .contato-col li a.off{color:var(--muted)}
:root[data-theme="light"] .noite .contato .contato-oi .disponivel{color:var(--muted)}

/* celular: o telefone sobe para o topo, menu e conexões lado a lado */
@media(max-width:899px){
  .contato-grid{grid-template-columns:1fr 1fr}
  .contato-oi{grid-column:1 / -1;order:-1}
  .contato-tel{font-size:clamp(1.7rem,8.4vw,2.4rem)}
}
@media(max-width:359px){.contato-grid{grid-template-columns:1fr}}

/* ── 42 · v3.0 · hero pessoal com escrita ────────────────── */
/* Menos texto e mais pessoa: um status de disponibilidade, o
   cumprimento, uma frase que se escreve sozinha dizendo o que eu
   faço, uma linha de contexto e as ações. Peixes fica ao lado. A
   frase animada é decorativa para leitor de tela (a versão inteira
   está em .sr-only) e para no fim de uma volta, para não ficar
   mexendo para sempre (WCAG 2.2.2). */
.ola{position:relative;color:#EDEAE3;padding:0 var(--gutter);overflow-x:clip}
.ola-status{white-space:nowrap}
.ola-in{max-width:var(--container);margin:0 auto;display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;
  gap:clamp(24px,4vw,64px);min-height:min(calc(100svh - 72px),760px);
  padding:clamp(24px,5vh,56px) 0 clamp(40px,7vh,80px)}
.ola-texto{position:relative;z-index:2}
.ola-status{display:inline-flex;align-items:center;gap:10px;margin:0 0 clamp(20px,4vh,32px);
  padding:7px 14px 7px 12px;border:1px solid rgba(237,234,227,.18);border-radius:var(--r-pill);
  font-size:14px;color:#C9CFDD;background:rgba(11,16,32,.4);backdrop-filter:blur(6px)}
.ola-status .pulso{margin-top:0}
.ola h1{max-width:none;margin:0}
.ola h1 .oi{display:block;font-family:var(--sans);font-size:clamp(1.05rem,1.5vw,1.25rem);
  font-weight:500;color:#C9CFDD;margin-bottom:.3em}
.ola h1 .nome{display:block;font-size:clamp(3.6rem,8vw,7.6rem);line-height:.95;letter-spacing:-.035em}
.ola h1 .nome i{font-style:normal;color:var(--star)}
.ola-escrita{margin:clamp(18px,3vh,28px) 0 0;font-family:var(--serif);
  font-size:clamp(1.35rem,2.4vw,2rem);line-height:1.3;letter-spacing:-.015em;
  font-variation-settings:var(--wonk);color:#EDEAE3;min-height:2.6em;max-width:24ch}
.escrita{color:var(--star);font-style:italic}
.escrita::after{content:"";display:inline-block;width:2px;height:.95em;margin-left:3px;
  vertical-align:-.12em;background:var(--star);animation:cursor 1s steps(1) infinite}
.escrita.parou::after{animation:none;opacity:0;transition:opacity .4s}
@keyframes cursor{50%{opacity:0}}
.ola-apoio{margin:14px 0 0;font-size:clamp(1rem,1.3vw,1.12rem);color:#B7BFD1;max-width:44ch}
.ola .acoes{margin-top:clamp(24px,4vh,36px)}
.ola-astro{position:relative;margin:0;z-index:1}
.ola-astro::before{content:"";position:absolute;inset:-10% -14%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(11,16,32,.92) 35%,rgba(11,16,32,.6) 65%,rgba(11,16,32,0) 100%)}
.ola-astro canvas{position:relative;display:block;width:100%;aspect-ratio:4/3;height:auto}
.ola-astro figcaption{position:relative;margin-top:4px;text-align:center;font-size:13.5px;color:#98A1B8}
.ola-astro figcaption i{font-family:var(--serif);font-style:italic;color:#C9CFDD}
@media(prefers-reduced-motion:reduce){.escrita::after{display:none}}

/* celular: Peixes em cima, pequeno; texto logo abaixo, ações largas */
@media(max-width:899px){
  .ola{padding:0}
  .ola-in{grid-template-columns:1fr;min-height:0;gap:8px;padding-top:0}
  .ola-astro{order:-1;max-width:460px;width:100%;margin:0 auto}
  .ola-astro canvas{aspect-ratio:auto;height:min(32svh,280px)}
  .ola-texto{padding:0 var(--gutter)}
  .ola h1 .nome{font-size:clamp(3.2rem,16vw,4.6rem)}
  .ola-escrita{min-height:2.7em}
  .ola .acoes{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .ola .acoes .btn{justify-content:center}
}
@media(max-width:359px){.ola .acoes{grid-template-columns:1fr}}

:root[data-theme="light"] .ola{color:var(--text)}
:root[data-theme="light"] .ola-status{color:var(--muted);border-color:var(--line);background:rgba(251,250,247,.6)}
:root[data-theme="light"] .ola h1 .oi,:root[data-theme="light"] .ola-apoio{color:var(--muted)}
:root[data-theme="light"] .ola-escrita{color:var(--text)}
:root[data-theme="light"] .escrita{color:var(--a-bronze)}
:root[data-theme="light"] .escrita::after{background:var(--a-bronze)}
:root[data-theme="light"] .ola-astro::before{background:radial-gradient(closest-side,rgba(251,250,247,.92) 35%,rgba(251,250,247,.6) 65%,rgba(251,250,247,0) 100%)}
:root[data-theme="light"] .ola-astro figcaption{color:var(--muted)}
:root[data-theme="light"] .ola-astro figcaption i{color:var(--text)}
:root[data-theme="light"] .ola .btn:not(.primario){--accent:var(--text);--on:var(--paper)}

/* v3.1: sem selo de disponibilidade no hero (fica no contato);
   coluna de texto mais larga e tipografia maior */
@media(min-width:900px){.ola-in{grid-template-columns:minmax(0,1.35fr) minmax(0,.9fr)}}
.ola h1 .oi{font-size:clamp(1.1rem,1.7vw,1.4rem)}
.ola h1 .nome{font-size:clamp(3.8rem,9vw,8.8rem)}
.ola-escrita{font-size:clamp(1.5rem,3vw,2.6rem);max-width:26ch}
.ola-apoio{font-size:clamp(1.05rem,1.5vw,1.3rem);max-width:48ch;margin-top:18px}
@media(max-width:899px){
  .ola h1 .nome{font-size:clamp(3.2rem,16vw,4.6rem)}
  .ola-escrita{font-size:clamp(1.35rem,6vw,1.7rem)}
}

/* v3.2: frase em uma linha só e botão de pausa ao lado */
.ola-escrita-linha{display:flex;align-items:center;gap:14px;margin:clamp(18px,3vh,28px) 0 0}
.ola-escrita{margin:0;min-height:0;max-width:none;white-space:nowrap;
  font-size:clamp(1.4rem,2.5vw,2.25rem)}
.escrita-pausa{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:transparent;border:1px solid rgba(237,234,227,.28);color:#C9CFDD;cursor:pointer;
  transition:border-color .2s,color .2s}
.escrita-pausa:hover{color:var(--star);border-color:var(--star)}
.escrita-pausa .i-play{display:none}
.escrita-pausa[aria-pressed="true"] .i-play{display:block}
.escrita-pausa[aria-pressed="true"] .i-pausa{display:none}
.ola-apoio{margin-top:16px}
:root[data-theme="light"] .escrita-pausa{color:var(--muted);border-color:var(--line)}
:root[data-theme="light"] .escrita-pausa:hover{color:var(--text);border-color:var(--text)}
@media(max-width:899px){
  .ola-escrita{white-space:normal;min-height:2.6em;font-size:clamp(1.3rem,5.6vw,1.6rem)}
  .ola-escrita-linha{align-items:flex-start}
  .ola-escrita{flex:1}
}

/* v3.3: pausa vira o terceiro botão da linha de ações */
.ola .acoes{align-items:center}
@media(max-width:899px){
  .ola .acoes{grid-template-columns:1fr 1fr 44px}
  .ola .acoes .btn{white-space:nowrap;padding:10px 12px}
}
@media(max-width:359px){.ola .acoes{grid-template-columns:1fr 44px}.ola .acoes .btn:first-child{grid-column:1 / -1}}

/* ── 43 · v3.4 · indicação de mais conteúdo ──────────────── */
/* No fim da primeira dobra, centralizado: um botão redondo com seta
   que desce e volta devagar, e a palavra "Scroll". Leva para os
   cases. O botão de pausa da frase também para essa seta, e com
   movimento reduzido ela fica parada. */
.ola{position:relative}
.ola-mais{position:absolute;left:50%;bottom:clamp(14px,3vh,28px);transform:translateX(-50%);
  z-index:3;display:flex;flex-direction:column;align-items:center;gap:8px;
  text-decoration:none;color:#C9CFDD;border-radius:var(--r-pill)}
.ola-mais-txt{font-size:13px;letter-spacing:.04em;color:#98A1B8}
.ola-mais-btn{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(237,234,227,.3);transition:border-color .2s,color .2s,background .2s}
.ola-mais-btn svg{animation:desce 2.2s ease-in-out infinite}
.ola-mais:hover .ola-mais-btn,.ola-mais:focus-visible .ola-mais-btn{border-color:var(--star);color:var(--star)}
.ola.pausado .ola-mais-btn svg{animation-play-state:paused}
@keyframes desce{0%,100%{transform:translateY(-3px);opacity:1}50%{transform:translateY(5px);opacity:.55}}
@media(prefers-reduced-motion:reduce){.ola-mais-btn svg{animation:none}}
:root[data-theme="light"] .ola-mais{color:var(--text)}
:root[data-theme="light"] .ola-mais-txt{color:var(--muted)}
:root[data-theme="light"] .ola-mais-btn{border-color:var(--line)}
:root[data-theme="light"] .ola-mais:hover .ola-mais-btn{border-color:var(--text);color:var(--text)}
@media(max-width:899px){
  .ola-mais{position:static;transform:none;margin:14px auto 0;width:max-content;
    flex-direction:row;gap:10px}
  .ola-astro canvas{height:min(28svh,240px)}
  .ola .acoes{margin-top:20px}
}
/* tela baixa de celular: a seta não cabe na primeira vista, sai */
@media(max-width:899px) and (max-height:700px){.ola-mais{display:none}}

/* ── 44 · v3.5 · céu de dia, sol, menu de currículo ──────── */
/* Tema claro = céu de dia. Onde há céu (hero, cabeçalho sobre ele,
   contato e rodapé) o fundo vira azul claro e as constelações ficam
   brancas. O miolo de conteúdo segue no papel. Texto secundário no
   céu usa #4A5268 (6:1); o cinza padrão daria 4,4:1 e reprovaria. */
:root{--dia:#C2E8FD;--dia-dim:#4A5268;--dia-acento:#6E4C0E}
:root[data-theme="light"] .veu{background:var(--dia)}
:root[data-theme="light"] header.no-ceu{background:rgba(194,232,253,.78)}
:root[data-theme="light"] header.no-ceu nav a{color:var(--dia-dim)}
:root[data-theme="light"] header.no-ceu nav a.off{color:var(--dia-dim)}
:root[data-theme="light"] header.no-ceu .toggle{color:var(--text);border-color:rgba(19,26,43,.25)}
:root[data-theme="light"] .ola h1 .oi,:root[data-theme="light"] .ola-apoio{color:var(--dia-dim)}
:root[data-theme="light"] .escrita{color:var(--dia-acento)}
:root[data-theme="light"] .escrita::after{background:var(--dia-acento)}
:root[data-theme="light"] .ola-astro::before{background:radial-gradient(closest-side,rgba(194,232,253,.9) 35%,rgba(194,232,253,.55) 65%,rgba(194,232,253,0) 100%)}
:root[data-theme="light"] .ola-astro figcaption{color:var(--dia-dim)}
:root[data-theme="light"] .escrita-pausa,:root[data-theme="light"] .ola-mais-btn{border-color:rgba(19,26,43,.3);color:var(--text)}
:root[data-theme="light"] .ola-mais-txt{color:var(--dia-dim)}
:root[data-theme="light"] .ola .btn:not(.primario){--accent:var(--text);--on:var(--dia)}

:root[data-theme="light"] .noite{background:var(--dia);margin-top:clamp(120px,18vh,220px);border-top:0}
:root[data-theme="light"] .noite::before{display:block;background:linear-gradient(to top,var(--dia),rgba(194,232,253,0))}
:root[data-theme="light"] .contato-col h3,
:root[data-theme="light"] .noite .contato .contato-oi .disponivel,
:root[data-theme="light"] .noite .rodape,
:root[data-theme="light"] .contato-col li a.off{color:var(--dia-dim)}
:root[data-theme="light"] .contato-col li a:hover,
:root[data-theme="light"] .contato-col li a:focus-visible,
:root[data-theme="light"] .contato-tel:hover{color:var(--dia-acento)}
:root[data-theme="light"] .contato-tel{text-decoration-color:var(--dia-acento)}
:root[data-theme="light"] .noite .rodape-base{border-top-color:rgba(19,26,43,.15)}
:root[data-theme="light"] .noite .rodape-base .btn{border-color:rgba(19,26,43,.3)}

/* ícone do tema: lua no escuro, sol no claro */
.toggle .i-sol{display:none}
:root[data-theme="light"] .toggle .i-lua{display:none}
:root[data-theme="light"] .toggle .i-sol{display:block}

/* menu de idioma do currículo: <details> nativo */
.baixar{position:relative;display:inline-block}
.baixar>summary{list-style:none;cursor:pointer}
.baixar>summary::-webkit-details-marker{display:none}
.baixar .seta{transition:transform .2s}
.baixar[open] .seta{transform:rotate(180deg)}
.baixar-menu{position:absolute;left:0;top:calc(100% + 6px);z-index:20;min-width:190px;margin:0;padding:6px;
  list-style:none;background:var(--bg);border:1px solid var(--rule);border-radius:var(--r-md);
  box-shadow:0 10px 30px rgba(11,16,32,.18)}
.baixar-menu a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;
  padding:0 12px;border-radius:10px;color:var(--fg);text-decoration:none;font-size:15px}
.baixar-menu a:hover,.baixar-menu a:focus-visible{background:var(--surface)}
.baixar-menu .formato{font-size:12px;font-weight:600;border:1px solid currentColor;border-radius:6px;padding:0 5px;line-height:1.5;opacity:.8}
/* no rodapé, o gatilho tem cara de link e o menu abre para cima */
.baixar-link>summary{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:17px;color:#EDEAE3}
.baixar-link>summary:hover{color:var(--star)}
.baixar-link .baixar-menu{top:auto;bottom:calc(100% + 4px);background:#131A2B;border-color:rgba(237,234,227,.18)}
.baixar-link .baixar-menu a{color:#EDEAE3}
.baixar-link .baixar-menu a:hover,.baixar-link .baixar-menu a:focus-visible{background:#1C2540}
:root[data-theme="light"] .baixar-link>summary{color:var(--text)}
:root[data-theme="light"] .baixar-link>summary:hover{color:var(--dia-acento)}
:root[data-theme="light"] .baixar-link .baixar-menu{background:var(--paper);border-color:var(--line)}
:root[data-theme="light"] .baixar-link .baixar-menu a{color:var(--text)}
:root[data-theme="light"] .baixar-link .baixar-menu a:hover{background:var(--paper-2)}

/* ── 45 · v3.6 · ajustes de botão, menu e céu de dia inteiro ─ */
/* botões de ação alinhados ao centro: o <details> do currículo
   esticava a linha e deixava os botões do About com 66px */
.acoes{align-items:center}
.baixar>summary.btn{display:inline-flex}
/* no rodapé, os links do menu herdavam o estilo de link da coluna
   (inline-flex e sublinhado animado): o hover não ocupava a linha */
.contato-col .baixar-menu a{display:flex;width:100%;min-height:44px;padding:0 12px;font-size:15px;
  background-image:none;background-size:auto}
.contato-col .baixar-menu a:hover,.contato-col .baixar-menu a:focus-visible{background:#1C2540;color:#EDEAE3}
:root[data-theme="light"] .contato-col .baixar-menu a:hover,
:root[data-theme="light"] .contato-col .baixar-menu a:focus-visible{background:var(--paper-2);color:var(--text)}

/* tema claro inteiro no céu de dia. Papel, superfície, régua e cinza
   secundário são redefinidos; os acentos de texto que reprovavam no
   azul escurecem (clay 5:1, bronze 6:1 no fundo; teal e indigo já
   passavam). */
:root[data-theme="light"]{
  --paper:#C2E8FD; --paper-2:#D9F1FE; --line:#9CCBE4; --muted:#4A5268;
  --bg:var(--paper); --surface:var(--paper-2); --rule:var(--line); --dim:var(--muted);
  --a-clay:#9A4434; --a-bronze:#6E4C0E;
}
:root[data-theme="light"] .card{background:color-mix(in srgb,var(--surface) 88%,transparent)}
:root[data-theme="light"] .noite::before{display:none}
:root[data-theme="light"] .noite{margin-top:clamp(40px,8vh,96px)}
.baixar-menu{width:max-content;min-width:200px}
.baixar>summary,.baixar-menu,.baixar-menu *{box-sizing:border-box}