/* ===========================================================================
   Igor Patrick — folha de estilo
   Para mudar as cores, altere os valores em .tema-escuro / .tema-claro
   ======================================================================== */

:root{
  --largura: 1180px;
  --serif:   "Newsreader", Georgia, "Times New Roman", serif;
  --sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* valor que o JavaScript escreve conforme a rolagem (1 = visivel) */
  --p: 1;
}

/* --- os dois temas: o site alterna entre eles conforme você rola --------- */
.tema-escuro{
  --fundo:       #0b0d10;
  --texto:       #f2f1ee;
  --texto-fraco: #9aa0a8;
  --borda:       #262b33;
  --destaque:    #e0b872;
  --veu:         rgba(11,13,16,.82);
}
.tema-claro{
  --fundo:       #f4f2ed;
  --texto:       #15181c;
  --texto-fraco: #6a6f77;
  --borda:       #d9d5cc;
  --destaque:    #8a6420;
  --veu:         rgba(244,242,237,.86);
}

/* em chinês, as fontes latinas não têm ideogramas — troca a pilha inteira */
html[lang="zh"]{
  --serif: "Noto Serif SC", "Songti SC", "SimSun", Georgia, serif;
  --sans:  "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Inter", sans-serif;
}
html[lang="zh"] body{ font-weight:400 }
html[lang="zh"] .secao-titulo,
html[lang="zh"] .abertura-nome{ letter-spacing:0 }
/* o chinês ocupa menos largura: títulos pedem um corpo um pouco menor */
html[lang="zh"] .secao-titulo{ font-size:clamp(2rem,5vw,3.4rem) }
html[lang="zh"] .sobre-texto p:first-child{ font-size:clamp(1.25rem,2.8vw,1.7rem); line-height:1.65 }
html[lang="zh"] .abertura-palavras,
html[lang="zh"] .cartao-topo,
html[lang="zh"] .campo label,
html[lang="zh"] .cv-grupo h3{ letter-spacing:.08em }

*,*::before,*::after{ box-sizing:border-box }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }

body{
  margin:0;
  background:var(--fundo);
  color:var(--texto);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.7;
  font-weight:300;
  overflow-x:clip;
  transition:background-color .7s ease, color .7s ease;
}

img{ max-width:100%; display:block }
a{ color:inherit }
::selection{ background:var(--destaque); color:var(--fundo) }
:focus-visible{ outline:2px solid var(--destaque); outline-offset:3px }

/* --- utilidades ---------------------------------------------------------- */
.faixa{ max-width:var(--largura); margin:0 auto; padding:0 clamp(1.25rem,5vw,3.5rem); position:relative; z-index:2 }
.faixa-estreita{ max-width:680px }

.pular{ position:absolute; left:-9999px; top:0; z-index:100; background:var(--destaque); color:var(--fundo); padding:.75rem 1.25rem }
.pular:focus{ left:0 }

/* --- barra de progresso -------------------------------------------------- */
.progresso{ position:fixed; inset:0 0 auto 0; height:2px; z-index:60; background:transparent }
.progresso span{ display:block; height:100%; width:0; background:var(--destaque) }

/* --- topo ---------------------------------------------------------------- */
.topo{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1rem clamp(1.25rem,5vw,3.5rem);
  border-bottom:1px solid transparent;
  transition:background-color .5s ease, backdrop-filter .5s ease, border-color .5s ease;
}
.topo.encolhido{ background:var(--veu); backdrop-filter:blur(14px) saturate(1.2); border-bottom-color:var(--borda) }
.topo-marca{
  font-family:var(--serif); font-size:1.15rem; text-decoration:none;
  opacity:0; transform:translateY(-8px);
  transition:opacity .5s ease, transform .5s ease;
}
.topo.encolhido .topo-marca{ opacity:1; transform:none }
.topo-nav{ display:flex; gap:1.75rem }
.topo-nav a{
  text-decoration:none; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--texto-fraco); padding-bottom:3px; border-bottom:1px solid transparent;
  transition:color .25s, border-color .25s;
}
.topo-nav a:hover{ color:var(--texto) }
.topo-nav a.ativo{ color:var(--texto); border-bottom-color:var(--destaque) }
/* --- seletor de idioma --- */
.topo-direita{ display:flex; align-items:center; gap:1.25rem }
.idiomas{ display:flex; align-items:center; gap:.1rem }
.idiomas button{
  background:none; border:0; cursor:pointer; color:var(--texto-fraco);
  font-family:var(--sans); font-size:.72rem; letter-spacing:.1em; font-weight:400;
  padding:.35rem .5rem; border-radius:3px; line-height:1;
  transition:color .25s, background-color .25s;
}
.idiomas button:hover{ color:var(--texto) }
.idiomas button[aria-pressed="true"]{ color:var(--texto); background:rgba(128,128,128,.16) }
.idiomas .sep{ color:var(--borda); font-size:.7rem; user-select:none }

.topo-menu{ display:none; background:none; border:0; cursor:pointer; padding:.5rem; flex-direction:column; gap:5px; width:40px }
.topo-menu span{ display:block; height:1px; background:var(--texto); transition:transform .3s, opacity .3s }

/* ===========================================================================
   1. ABERTURA — o palco fica preso enquanto o nome encolhe e desaparece
   ======================================================================== */
/* 200svh deixava meia tela de bloco escuro vazio depois que o nome já
   tinha sumido. A animação termina em 1 tela, então o palco dura pouco
   mais que isso e o "Sobre" entra logo em seguida. */
.abertura{ height:118svh; position:relative }
.abertura-palco{
  position:sticky; top:0; height:100svh;
  display:grid; place-items:center; text-align:center; overflow:hidden;
  background:radial-gradient(ellipse at 50% 0%, #1b2129 0%, #0b0d10 62%);
}
.abertura-fundo{
  position:absolute; inset:-5% 0 0; z-index:0;
  background-size:cover; background-position:center 42%;
  /* a foto é textura, não ilustração: fica esmaecida atrás do nome.
     Some mais depressa do que o texto (que esvanece com --p), para o nome
     nunca ficar meio apagado por cima de uma redação ainda visível */
  opacity:calc(.5 - var(--pf, 0) * .75);
  /* parallax: o fundo sobe mais devagar que o texto. O deslocamento é menor
     que a folga de cima, senão a imagem escorrega para fora da moldura */
  transform:translateY(calc(var(--pf, 0) * 4%));
  will-change:transform;
}
.abertura-fundo::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to bottom, rgba(8,10,13,.5) 0%, rgba(8,10,13,.34) 38%, rgba(8,10,13,.95) 100%),
    radial-gradient(ellipse at 50% 44%, rgba(8,10,13,.18) 18%, rgba(8,10,13,.8) 100%);
}
/* tela estreita e alta: "cover" amplia demais a foto deitada, então ela
   recua para o alto, onde o teto da redação dá profundidade sem virar um
   paredão de mesas atrás do nome */
@media (max-aspect-ratio:1/1){
  .abertura-fundo{ background-position:center 30%; opacity:calc(.42 - var(--pf, 0) * .63) }
}

.abertura-interior{
  --p:0;
  position:relative; z-index:2; padding:6rem 1.5rem; color:#f2f1ee;
  /* --p vem do JavaScript: 0 no topo, 1 ao fim da primeira tela */
  transform:scale(calc(1 - var(--p) * .18)) translateY(calc(var(--p) * -60px));
  opacity:calc(1 - var(--p) * 1.35);
  filter:blur(calc(var(--p) * 7px));
  will-change:transform, opacity, filter;
}

.abertura-funcao{
  margin:0 0 1.5rem; font-size:.78rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--destaque); animation:surgir 1s .1s both;
}
.abertura-nome{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(3rem,11.5vw,9rem); line-height:.95; margin:0; letter-spacing:-.025em;
  animation:surgir 1.3s .25s both;
}
.abertura-apoio{
  max-width:32ch; margin:1.75rem auto 0; color:#9aa0a8;
  font-size:clamp(1rem,2.2vw,1.2rem); animation:surgir 1.3s .5s both;
}
.abertura-palavras{
  margin:2.75rem auto 0; padding-top:1.75rem; max-width:34rem;
  border-top:1px solid rgba(242,241,238,.22);
  font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:#9aa0a8;
  animation:surgir 1.3s .7s both;
}
.abertura-palavras b{ font-weight:400; color:#f2f1ee }
.abertura-palavras .ponto{ color:rgba(242,241,238,.3); margin:0 .6rem }

.abertura-seta{
  position:absolute; bottom:2.5rem; left:50%; z-index:2; color:#9aa0a8;
  transform:translateX(-50%); opacity:calc(1 - var(--p) * 2.4);
  animation:flutuar 2.4s ease-in-out infinite;
}
@keyframes surgir{ from{ opacity:0; transform:translateY(26px) } to{ opacity:1; transform:none } }
@keyframes flutuar{ 0%,100%{ transform:translate(-50%,0) } 50%{ transform:translate(-50%,8px) } }

/* ===========================================================================
   seções
   ======================================================================== */
.secao{ padding:clamp(5rem,13vh,9.5rem) 0; position:relative; scroll-margin-top:72px }
.secao + .secao{ border-top:1px solid var(--borda) }

.secao-titulo{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(2.2rem,6vw,4rem); line-height:1.06; margin:0 0 .5rem; letter-spacing:-.02em;
}
.secao-sub{ color:var(--texto-fraco); margin:.5rem 0 0; max-width:50ch }
.secao-cabeca{ display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; flex-wrap:wrap; margin-bottom:3.5rem }

/* --- elementos que entram conforme a rolagem (valor contínuo, não clique) - */
[data-rol]{
  opacity:var(--p);
  transform:translateY(calc((1 - var(--p)) * 42px));
  will-change:transform, opacity;
}

/* ===========================================================================
   2. QUEM SOU EU — foto P&B esmaecida à direita, cortada na diagonal
   ======================================================================== */
.sobre{ overflow:hidden }

.sobre-foto{
  position:absolute; top:0; right:0;
  /* altura limitada: esticada pela seção inteira, o retrato vira um borrão */
  height:min(100%, 860px);
  width:min(60%, 760px); margin:0; z-index:0;
  /* o corte diagonal: o vértice de cima desliza para a esquerda ao rolar.
     A inclinação (18%) e o curso (8%) são contidos de propósito: com valores
     maiores o pé da diagonal avançava sobre a coluna de texto no meio da
     rolagem, e as últimas palavras de cada linha caíam em cima da foto. */
  --corte: calc(42% - var(--p) * 8%);
  clip-path:polygon(var(--corte) 0, 100% 0, 100% 100%, calc(var(--corte) - 18%) 100%);
}
.sobre-foto img{
  width:100%; height:100%; object-fit:cover; object-position:center 18%;
  filter:grayscale(1) contrast(1.04) brightness(1.01);
  opacity:calc(.52 + var(--p) * .33);
  transform:scale(calc(1.14 - var(--p) * .1)) translateY(calc((1 - var(--p)) * 28px));
  will-change:transform, opacity;
  transition:filter .7s ease, opacity .7s ease;
}
/* o retrato ganha cor quando o mouse passa por cima dele */
.sobre-foto:hover img{
  filter:grayscale(0) contrast(1) brightness(1);
  opacity:1;
}
/* o véu só recua; não some de vez, senão o texto à esquerda perde contraste */
.sobre-foto:hover::after{ opacity:.3 }
.sobre-foto::after{ transition:opacity .7s ease }

/* o texto fica por cima da foto; sem isto o ponteiro nunca chega nela.
   Os filhos voltam a receber o ponteiro para o texto continuar selecionável. */
.sobre .faixa{ pointer-events:none }
.sobre .faixa > *{ pointer-events:auto }
/* véu que funde a foto no fundo claro do site */
.sobre-foto::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(103deg, var(--fundo) 0%, var(--fundo) 10%, rgba(244,242,237,.42) 30%, rgba(244,242,237,0) 62%),
    linear-gradient(to bottom, var(--fundo) 0%, rgba(244,242,237,0) 12%, rgba(244,242,237,.2) 72%, var(--fundo) 100%);
}
.sobre-foto::before{
  content:""; position:absolute; inset:0; z-index:3;
  background:var(--destaque); opacity:calc(var(--p) * .55);
  clip-path:polygon(
    var(--corte) 0, calc(var(--corte) + 2px) 0,
    calc(var(--corte) - 18% + 2px) 100%, calc(var(--corte) - 18%) 100%);
}
.sobre-foto .sem-foto{
  position:absolute; inset:0; display:grid; place-items:center; text-align:center;
  padding:3rem; color:var(--texto-fraco); font-size:.82rem; line-height:1.7;
  border-left:1px dashed var(--borda);
}
/* O crédito vive fora da figura, junto do conteúdo. No desktop ele volta
   para cima da foto por posicionamento; no celular, onde a foto é o fundo
   da seção inteira e o texto corre por cima, ele fica no fim do bloco —
   encostado no canto, caía em cima de uma linha da minibio. */
.sobre-credito{
  position:absolute; right:1.5rem; bottom:1.5rem; z-index:2; margin:0;
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--texto-fraco);
}

.sobre .faixa{ max-width:var(--largura) }
/* a coluna para antes do pé da diagonal, em qualquer ponto da rolagem */
.sobre-texto{ max-width:min(46%, 580px); margin-top:3rem }
.sobre-texto p{
  margin:0 0 1.6rem; font-size:clamp(1.02rem,2.2vw,1.22rem); line-height:1.78;
  opacity:var(--p); transform:translateY(calc((1 - var(--p)) * 32px));
}
.sobre-texto p:first-child{ font-family:var(--serif); font-weight:400; font-size:clamp(1.4rem,3.2vw,1.95rem); line-height:1.42 }

.numeros{
  list-style:none; margin:5rem 0 0; padding:3rem 0 0; border-top:1px solid var(--borda);
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1.75rem;
  /* mesma coluna segura do texto: a partir daqui começa o corte diagonal
     da foto, e os números não podem entrar nele em nenhum idioma */
  max-width:min(46%, 580px);
  gap:1.2rem;
}
.numeros li{ opacity:var(--p); transform:translateY(calc((1 - var(--p)) * 30px)) }
.numeros b{ display:block; font-family:var(--serif); font-weight:400; font-size:clamp(2.4rem,6vw,3.6rem); line-height:1; color:var(--destaque) }
.numeros span{ font-size:.75rem; letter-spacing:.09em; text-transform:uppercase; color:var(--texto-fraco); display:block }

/* ===========================================================================
   3. CURRÍCULO — a linha do tempo se desenha conforme você rola
   ======================================================================== */
.cv-grupo{ margin-bottom:4.5rem; position:relative }
.cv-grupo h3{
  font-size:.76rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--destaque); font-weight:500; margin:0 0 1.75rem;
}
.cv-lista{ position:relative; padding-left:0 }
.cv-lista::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:1px;
  background:var(--destaque); transform-origin:top;
  transform:scaleY(var(--p)); opacity:.5;
}
.cv-item{
  display:grid; grid-template-columns:124px minmax(0,1fr); gap:1.6rem;
  padding:1.9rem 0 1.9rem 2rem; border-top:1px solid var(--borda);
  opacity:var(--p); transform:translateX(calc((1 - var(--p)) * 28px));
}
.cv-item:last-child{ border-bottom:1px solid var(--borda) }

.cv-cargo{ font-family:var(--serif); font-size:1.42rem; line-height:1.3; margin:0 0 .2rem; font-weight:500 }
.cv-cargo-meta{ margin:0 0 .6rem; color:var(--texto-fraco); font-size:.84rem; letter-spacing:.04em }
.cv-cargo-meta .ponto{ margin:0 .55rem; opacity:.45 }
.cv-desc{ color:var(--texto-fraco); margin:0; max-width:62ch }

/* --- marca do veículo ---
   124x84: cabe tanto a marca horizontal de um jornal quanto um lockup
   empilhado (SCMP) ou um selo quadrado (universidades chinesas). */
.cv-logo{
  width:124px; height:84px; flex:none;
  display:flex; align-items:center; justify-content:center;
}
/* limites em pixels, não em porcentagem: dentro de um grid, width:100% numa
   imagem pode não resolver contra a caixa, e aí a logo vaza para a linha
   de baixo. Com max-width/max-height fixos isso não acontece. */
.cv-logo img{
  max-width:124px; max-height:84px; width:auto; height:auto;
  object-fit:contain;
  filter:grayscale(1) contrast(1.1); opacity:.62;
  transition:filter .4s ease, opacity .4s ease;
}
.cv-item:hover .cv-logo img{ filter:grayscale(0) contrast(1); opacity:1 }
.cv-logo .iniciais{
  width:66px; height:66px; display:grid; place-items:center;
  border:1px solid var(--borda); border-radius:4px;
  font-family:var(--serif); font-size:1.15rem; font-weight:500;
  color:var(--texto-fraco); letter-spacing:.02em;
}

/* --- empresa com vários cargos, no formato do LinkedIn --- */
.cv-empresa-nome{ font-family:var(--serif); font-weight:500; font-size:1.5rem; line-height:1.25; margin:0 0 .2rem }
.cv-cargos{
  list-style:none; margin:1.5rem 0 0; padding:0 0 0 1.7rem; position:relative;
}
.cv-cargos::before{
  content:""; position:absolute; left:3px; top:.7rem; bottom:.7rem;
  width:1px; background:var(--borda);
}
.cv-cargo-item{ position:relative; padding-bottom:1.7rem }
.cv-cargo-item:last-child{ padding-bottom:0 }
.cv-cargo-item::before{
  content:""; position:absolute; left:-1.7rem; top:.5em;
  width:7px; height:7px; border-radius:50%;
  background:var(--destaque); box-shadow:0 0 0 3px var(--fundo);
}
.cv-cargo-item .cv-cargo{ font-size:1.2rem }

/* --- grupo sem marca nenhuma (prêmios ainda sem logo) --- */
.cv-lista-simples .cv-item{ grid-template-columns:minmax(0,1fr); padding-top:1.4rem; padding-bottom:1.4rem }
.cv-lista-simples .cv-logo{ display:none }
.cv-lista-simples .cv-cargo{ font-size:1.3rem; margin:0 }

.etiquetas{ list-style:none; display:flex; flex-wrap:wrap; gap:.6rem; padding:0; margin:0 }
.etiquetas li{ border:1px solid var(--borda); border-radius:999px; padding:.45rem 1rem; font-size:.82rem; color:var(--texto-fraco) }

.botao{
  display:inline-block; text-decoration:none; cursor:pointer;
  border:1px solid var(--destaque); color:var(--destaque); background:transparent;
  padding:.8rem 1.6rem; font-family:var(--sans); font-size:.8rem;
  letter-spacing:.13em; text-transform:uppercase; transition:background-color .25s, color .25s;
}
.botao:hover{ background:var(--destaque); color:var(--fundo) }
.botao-cheio{ width:100%; padding:1rem }
.botao[disabled]{ opacity:.5; cursor:wait }

/* ===========================================================================
   4. REPORTAGENS
   ======================================================================== */
.filtros{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:2.75rem }
.filtros button{
  background:none; border:1px solid var(--borda); color:var(--texto-fraco);
  padding:.5rem 1.1rem; cursor:pointer; font-family:var(--sans); font-size:.78rem;
  letter-spacing:.09em; text-transform:uppercase; border-radius:999px;
  transition:border-color .25s, color .25s, background-color .25s;
}
.filtros button:hover{ color:var(--texto); border-color:var(--texto-fraco) }
.filtros button[aria-selected="true"]{ background:var(--texto); border-color:var(--texto); color:var(--fundo) }

.cartoes{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1.5rem }

.cartao{
  display:flex; flex-direction:column;
  border:1px solid var(--borda); padding:1.9rem; text-decoration:none;
  opacity:var(--p);
  transform:translateY(calc((1 - var(--p)) * 60px)) scale(calc(.965 + var(--p) * .035));
  transition:border-color .3s, background-color .3s;
  will-change:transform, opacity;
}
.cartao:hover{ border-color:var(--destaque) }
.cartao.destaque{ grid-column:span 2 }
.cartao-topo{
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin-bottom:1.1rem;
  font-size:.71rem; letter-spacing:.17em; text-transform:uppercase; color:var(--destaque);
}
.cartao-topo .ponto{ color:var(--borda) }
.cartao-topo time{ color:var(--texto-fraco); letter-spacing:.1em }
.cartao-imagem{ margin:-1.9rem -1.9rem 1.5rem; aspect-ratio:16/9; overflow:hidden }
.cartao-imagem img{ width:100%; height:100%; object-fit:cover; filter:grayscale(.25); transition:transform .7s ease, filter .5s ease }
.cartao:hover .cartao-imagem img{ transform:scale(1.05); filter:grayscale(0) }
.cartao h3{ font-family:var(--serif); font-weight:500; margin:0 0 .75rem; font-size:1.42rem; line-height:1.28 }
.cartao.destaque h3{ font-size:clamp(1.8rem,4vw,2.7rem) }
.cartao p{ color:var(--texto-fraco); margin:0 0 1.5rem; font-size:.95rem }
.cartao-pe{ margin-top:auto; display:flex; align-items:center; gap:.5rem; font-size:.76rem; letter-spacing:.13em; text-transform:uppercase }
.cartao-pe svg{ transition:transform .3s }
.cartao:hover .cartao-pe svg{ transform:translateX(5px) }
.vazio{ color:var(--texto-fraco); text-align:center; padding:3rem 0 }

/* ===========================================================================
   5. REDES
   ======================================================================== */
/* Fila de ícones no pé do contato: não é mais uma seção do site, é o
   arremate da página. O nome e o usuário ficam no title e na etiqueta de
   acessibilidade, não ocupando a tela. */
.visualmente-oculto{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}
.redes-titulo{
  margin:3.5rem 0 0; padding-top:2.6rem;
  border-top:1px solid var(--borda);
  text-align:center;
  font-family:inherit; font-weight:500;
  font-size:.72rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--texto-fraco);
}
.redes-lista{
  list-style:none; padding:0; margin:1.4rem 0 0;
  display:flex; flex-wrap:wrap; gap:.85rem;
  justify-content:center;
}
.redes-lista li{
  opacity:var(--p);
  transform:translateY(calc((1 - var(--p)) * 26px));
}
.redes-lista a{
  display:grid; place-items:center;
  width:2.45rem; height:2.45rem;
  border:1px solid var(--borda); border-radius:50%;
  color:var(--texto-fraco);
  text-decoration:none;
  transition:color .25s ease, border-color .25s ease,
             background-color .25s ease, transform .25s ease;
}
.redes-lista a:hover{
  color:var(--destaque); border-color:var(--destaque);
  background:rgba(255,255,255,.04);
  transform:translateY(-3px);
}
.redes-lista a:focus-visible{ outline:2px solid var(--destaque); outline-offset:3px }
.redes-lista svg{ width:.91rem; height:.91rem; display:block }
.redes-nome{ font-family:var(--serif); font-size:1rem }

/* ===========================================================================
   6. CONTATO
   ======================================================================== */
.contato-chamada{ font-family:var(--serif); font-size:clamp(1.3rem,3.4vw,1.95rem); line-height:1.45; margin:1.5rem 0 3rem }
.formulario{ display:grid; gap:1.5rem }
.campo{ display:grid; gap:.5rem }
.campo label{ font-size:.73rem; letter-spacing:.17em; text-transform:uppercase; color:var(--texto-fraco) }
.campo input, .campo textarea{
  background:transparent; border:0; border-bottom:1px solid var(--borda); color:var(--texto);
  font-family:var(--sans); font-size:1rem; font-weight:300; padding:.7rem .2rem; width:100%;
  transition:border-color .25s;
}
.campo textarea{ resize:vertical; border:1px solid var(--borda); padding:.9rem }
.campo input:focus, .campo textarea:focus{ outline:none; border-color:var(--destaque) }
.campo .erro{ border-color:#c45b5b }
.formulario-aviso{ margin:0; font-size:.9rem; min-height:1.4em; color:var(--destaque) }
.formulario-aviso.erro{ color:#e08a8a }
.contato-direto{ margin-top:2.5rem; color:var(--texto-fraco); font-size:.95rem }
.contato-direto a{ color:var(--destaque) }
.contato-direto span{ display:block; margin-top:.5rem; font-size:.85rem }

.rodape{ border-top:1px solid var(--borda); padding:3rem 0; text-align:center; color:var(--texto-fraco); font-size:.82rem }

/* ===========================================================================
   telas menores
   ======================================================================== */
@media (max-width:1000px){
  .sobre-foto{
    width:100%; height:min(100%, 700px); --corte: calc(32% - var(--p) * 8%);
    clip-path:polygon(var(--corte) 0, 100% 0, 100% 100%, calc(var(--corte) - 22%) 100%);
  }
  .sobre-foto img{ opacity:calc(.22 + var(--p) * .2) }
  .sobre-foto::after{ background:linear-gradient(100deg, var(--fundo) 0%, rgba(244,242,237,.6) 40%, rgba(244,242,237,.15) 100%) }
  .sobre-texto, .numeros{ max-width:none }
  .numeros{ grid-template-columns:repeat(2, minmax(0,1fr)) }
  .cartao.destaque{ grid-column:span 1 }
  .cv-item{ grid-template-columns:96px minmax(0,1fr); gap:1.1rem; padding-left:0 }
  .cv-logo{ width:96px; height:66px }
  .cv-logo img{ max-width:96px; max-height:66px }
}

@media (max-width:720px){
  body{ font-size:16px }
  .abertura{ height:160svh }
  .topo-menu{ display:flex }
  .topo-direita{ gap:.5rem }
  .idiomas button{ padding:.35rem .35rem }
  .topo-nav{
    position:fixed; inset:0; z-index:-1; flex-direction:column;
    align-items:center; justify-content:center; gap:2rem;
    background:var(--veu); backdrop-filter:blur(16px);
    opacity:0; pointer-events:none; transition:opacity .3s ease;
  }
  .topo-nav.aberto{ opacity:1; pointer-events:auto; z-index:40 }
  .topo-nav a{ font-size:1.1rem; letter-spacing:.12em }
  .topo-marca{ opacity:1; transform:none }
  .cartoes{ grid-template-columns:1fr }
  .redes-lista a{ flex-direction:column; gap:.25rem }
  .redes-usuario{ text-align:left }
}

/* --- respeita quem prefere menos movimento ------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *{ animation:none !important; transition-duration:.01ms !important }
  .abertura{ height:auto }
  .abertura-palco{ position:static; height:100svh }
  .abertura-interior, [data-rol], .cartao, .sobre-texto p, .numeros li, .redes-lista li, .cv-item{
    opacity:1 !important; transform:none !important; filter:none !important;
  }
  .cv-lista::before{ transform:none }
  .sobre-foto img{ opacity:.3 }
}

/* --- impressão ----------------------------------------------------------- */
@media print{
  .topo,.progresso,.abertura-fundo,.abertura-seta,.formulario,.filtros,.sobre-foto{ display:none }
  body{ background:#fff; color:#000 }
  .secao,.abertura{ padding:1rem 0; border:0; height:auto }
  [data-rol],.cartao,.cv-item,.numeros li,.redes-lista li,.sobre-texto p{ opacity:1 !important; transform:none !important }
}

/* ===========================================================================
   Janela da coleção de colunas
   ======================================================================== */
.modal{ position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:clamp(1rem,4vh,3rem) 1rem }
.modal[hidden]{ display:none }
.modal-veu{ position:absolute; inset:0; background:rgba(8,10,13,.72); backdrop-filter:blur(3px); animation:surgirVeu .3s ease }
@keyframes surgirVeu{ from{ opacity:0 } to{ opacity:1 } }

.modal-caixa{
  position:relative; width:min(760px, 100%); max-height:100%;
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--fundo); color:var(--texto);
  border:1px solid var(--borda); border-radius:6px;
  box-shadow:0 30px 80px rgba(0,0,0,.45);
  animation:surgirCaixa .35s cubic-bezier(.2,.7,.3,1);
}
@keyframes surgirCaixa{ from{ opacity:0; transform:translateY(18px) scale(.985) } to{ opacity:1; transform:none } }

.modal-topo{
  display:flex; align-items:flex-start; justify-content:space-between; gap:1.5rem;
  padding:1.6rem 1.7rem 1.1rem; border-bottom:1px solid var(--borda);
}
.modal-titulo{ font-family:var(--serif); font-weight:500; font-size:1.6rem; line-height:1.2; margin:0 }
.modal-sub{ margin:.35rem 0 0; color:var(--texto-fraco); font-size:.84rem; letter-spacing:.05em }
.modal-fechar{
  flex:none; width:34px; height:34px; border-radius:50%; cursor:pointer;
  border:1px solid var(--borda); background:transparent; color:var(--texto-fraco);
  font-size:1.1rem; line-height:1; transition:border-color .25s, color .25s;
}
.modal-fechar:hover{ border-color:var(--destaque); color:var(--destaque) }

.modal-busca{ padding:1rem 1.7rem; border-bottom:1px solid var(--borda) }
.modal-busca input{
  width:100%; background:transparent; color:var(--texto);
  border:1px solid var(--borda); border-radius:4px;
  font-family:var(--sans); font-size:.95rem; font-weight:300; padding:.6rem .85rem;
  transition:border-color .25s;
}
.modal-busca input:focus{ outline:none; border-color:var(--destaque) }

/* sem recuo no topo: a faixa do ano gruda em top:0 e precisa chegar até a
   borda da área rolável, senão a linha de baixo aparece por cima dela */
.modal-corpo{ overflow-y:auto; padding:0 1.7rem 1.7rem; scrollbar-width:thin }
.modal-ano{
  /* sem folga acima: a faixa precisa tapar a linha que passa por baixo */
  position:sticky; top:0; z-index:1; margin:0 0 .4rem; padding:1.75rem 0 .35rem;
  background:var(--fundo); color:var(--destaque);
  font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; font-weight:500;
  border-bottom:1px solid var(--borda);
}
.modal-corpo ul{ list-style:none; margin:0; padding:0 }
.modal-item a{
  display:grid; grid-template-columns:86px minmax(0,1fr) auto; gap:1.1rem; align-items:baseline;
  padding:.72rem .5rem; border-bottom:1px solid var(--borda);
  text-decoration:none; transition:background-color .2s, padding-left .25s;
}
.modal-item a:hover{ background:rgba(128,128,128,.07); padding-left:1rem }
.modal-data{ color:var(--texto-fraco); font-size:.78rem; letter-spacing:.04em; white-space:nowrap }
.modal-nome{ font-size:.96rem; line-height:1.4 }
.modal-peso{ color:var(--texto-fraco); font-size:.72rem; white-space:nowrap; opacity:0; transition:opacity .25s }
.modal-item a:hover .modal-peso{ opacity:1 }
.modal-vazio{ color:var(--texto-fraco); text-align:center; padding:2.5rem 0; font-size:.95rem }

body.travado{ overflow:hidden }

/* o card que abre a janela é um botão, não um link */
button.cartao{ font:inherit; text-align:left; color:inherit; background:none; cursor:pointer; width:100% }

@media (max-width:620px){
  .modal{ padding:0 }
  .modal-caixa{ max-height:100%; height:100%; border-radius:0; border:0 }
  .modal-topo, .modal-busca, .modal-corpo{ padding-left:1.1rem; padding-right:1.1rem }
  .modal-item a{ grid-template-columns:80px minmax(0,1fr); gap:.8rem }
  .modal-peso{ display:none }
}

/* link para a página oficial da coluna, fixo no topo da janela */
.modal-oficial{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  margin:1.1rem 1.7rem 0; padding:.9rem 1.1rem;
  border:1px solid var(--destaque); border-radius:4px;
  text-decoration:none; color:var(--texto);
  transition:background-color .25s, transform .25s;
}
.modal-oficial[hidden]{ display:none }
.modal-oficial:hover{ background:rgba(138,100,32,.08) }
.modal-oficial:hover svg{ transform:translate(2px,-2px) }
.modal-oficial svg{ flex:none; color:var(--destaque); transition:transform .25s }
.modal-oficial-texto{ display:flex; flex-direction:column; gap:.15rem; min-width:0 }
.modal-oficial strong{ font-weight:500; font-size:.95rem }
.modal-oficial small{ color:var(--texto-fraco); font-size:.78rem; word-break:break-all }

@media (max-width:620px){ .modal-oficial{ margin-left:1.1rem; margin-right:1.1rem } }

/* capa de livro dentro da janela */
.modal-capa{
  margin:0; padding:1.6rem 1.7rem 0; display:flex; justify-content:center;
}
.modal-capa[hidden]{ display:none }
.modal-capa img{
  max-width:min(320px, 70%); height:auto; border:1px solid var(--borda);
  box-shadow:0 14px 40px rgba(0,0,0,.35);
}
/* numa janela de livro não há lista nem busca */
.modal.e-livro .modal-busca{ display:none }
.modal.e-livro .modal-corpo{ padding-top:1.4rem; text-align:center }
.modal.e-livro .modal-corpo p{ margin:0 auto .9rem; max-width:48ch; color:var(--texto-fraco); font-size:.95rem; line-height:1.65 }
.modal.e-livro .modal-corpo p.ficha{ color:var(--texto); font-size:.86rem; letter-spacing:.06em; text-transform:uppercase }

@media (max-width:620px){ .modal-capa img{ max-width:60% } }

/* botão de baixar o livro */
.modal-baixar{
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  margin:1.4rem 1.7rem .2rem; padding:.85rem 1.2rem;
  border:1px solid var(--destaque); border-radius:4px;
  color:var(--destaque); text-decoration:none;
  font-size:.82rem; letter-spacing:.12em; text-transform:uppercase;
  transition:background-color .25s, color .25s;
}
.modal-baixar[hidden]{ display:none }
.modal-baixar:hover{ background:var(--destaque); color:var(--fundo) }
.modal-baixar small{ letter-spacing:.04em; text-transform:none; opacity:.75 }
.modal-baixar svg{ flex:none }

/* linha da janela com duas ações: ler no site e baixar o PDF */
.modal-item--duplo{ display:flex; align-items:stretch; border-bottom:1px solid var(--borda) }
.modal-item--duplo .modal-ler{
  flex:1 1 auto; min-width:0;
  display:grid; grid-template-columns:86px minmax(0,1fr); gap:1.1rem; align-items:baseline;
  padding:.72rem .5rem; border:0; text-decoration:none;
  transition:background-color .2s, padding-left .25s;
}
.modal-item--duplo .modal-ler:hover{ background:rgba(128,128,128,.07); padding-left:1rem }
.modal-item--duplo .modal-pdf{
  flex:none; align-self:center; margin-left:.6rem;
  padding:.3rem .7rem; border:1px solid var(--borda); border-radius:3px;
  color:var(--texto-fraco); text-decoration:none;
  font-size:.68rem; letter-spacing:.12em;
  transition:border-color .25s, color .25s;
}
.modal-item--duplo .modal-pdf:hover{ border-color:var(--destaque); color:var(--destaque) }
@media (max-width:620px){
  .modal-item--duplo .modal-ler{ grid-template-columns:80px minmax(0,1fr); gap:.8rem }
}

/* --- janela em modo vídeo ------------------------------------------------ */
.modal.e-video .modal-busca{ display:none }
.modal.e-video .modal-corpo{
  padding-top:1.2rem;
  display:grid;
  gap:1.6rem;
  grid-template-columns:1fr;
}
@media (min-width:860px){
  .modal.e-video .modal-corpo{ grid-template-columns:1fr 1fr; gap:1.8rem 1.5rem }
}
.modal-video{ margin:0 }
.modal-video-palco{
  position:relative;
  display:block;
  width:100%;
  padding:0;
  border:0;
  aspect-ratio:16 / 9;
  background:#000;
  border-radius:4px;
  overflow:hidden;
  cursor:pointer;
}
.modal-video-palco img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:opacity .3s ease, transform .6s ease;
}
.modal-video-palco:hover img{ opacity:.82; transform:scale(1.02) }
/* play discreto, no canto: a janela é pequena e o botão do YouTube come
   o quadro inteiro */
.modal-video-play{
  position:absolute; left:.7rem; bottom:.7rem;
  width:2.5rem; height:2.5rem;
  display:grid; place-items:center;
  border-radius:50%;
  background:rgba(12,14,18,.72);
  color:#f2f1ee;
  backdrop-filter:blur(3px);
  transition:background-color .25s ease, transform .25s ease;
}
.modal-video-palco:hover .modal-video-play{
  background:var(--destaque); transform:scale(1.07);
}
.modal-video-play svg{ width:1.3rem; height:1.3rem; margin-left:2px }
.modal-video iframe{
  width:100%;
  aspect-ratio:16 / 9;
  border:0;
  border-radius:4px;
  display:block;
  background:#000;
}
.modal-video figcaption{
  margin-top:.6rem;
  color:var(--texto-fraco);
  font-size:.9rem;
  line-height:1.5;
}

/* --- janela em modo áudio ------------------------------------------------ */
.modal.e-audio .modal-busca{ display:none }
.modal.e-audio .modal-corpo{ padding-top:1.2rem; display:grid; gap:1.8rem }
.modal-audio{ margin:0 }
.modal-audio iframe{
  display:block;
  width:100%;
  border:0;
  border-radius:4px;
  background:#000;
}
.modal-audio figcaption{
  margin-top:.6rem;
  color:var(--texto-fraco);
  font-size:.9rem;
  line-height:1.5;
}

/* --- lista de episódios de podcast --------------------------------------- */
.modal-item--episodio{ display:block; border-bottom:1px solid var(--borda) }
.modal-tocar{
  display:grid; grid-template-columns:86px minmax(0,1fr) auto;
  gap:1.1rem; align-items:baseline;
  width:100%; padding:.85rem .5rem; border:0; background:none;
  font:inherit; color:inherit; text-align:left; cursor:pointer;
  transition:background-color .2s, padding-left .25s;
}
.modal-tocar:hover{ background:rgba(128,128,128,.07); padding-left:1rem }
.modal-tocar .modal-peso{ opacity:0 }
.modal-tocar:hover .modal-peso,
.modal-tocar[aria-expanded="true"] .modal-peso{ opacity:1 }
.modal-tocar[aria-expanded="true"] .modal-nome{ color:var(--destaque) }
.modal-item--episodio audio{
  display:block;
  width:100%;
  margin:0 0 .85rem;
  height:36px;
}
@media (max-width:620px){
  .modal-tocar{ grid-template-columns:80px minmax(0,1fr); gap:.8rem }
}

/* --- card de livro: a capa inteira, sem corte ---------------------------- */
.cartao--capa .cartao-imagem{ aspect-ratio:auto; background:none }
.cartao--capa .cartao-imagem img{
  height:auto;
  object-fit:contain;
  filter:none;
}
.cartao--capa:hover .cartao-imagem img{ transform:scale(1.02) }

/* ===========================================================================
   5. APARIÇÕES NA MÍDIA — lista de entrevistas, podcasts e debates
   ======================================================================== */
.aparicoes-lista{ list-style:none; margin:0; padding:0 }
.aparicoes-lista li{
  opacity:var(--p);
  transform:translateY(calc((1 - var(--p)) * 24px));
  border-bottom:1px solid var(--borda);
}
.aparicoes-lista li > *{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"meta data" "nome seta";
  gap:.3rem 1.5rem;
  align-items:baseline;
  padding:1.3rem .4rem;
  text-decoration:none;
  color:inherit;
  transition:background-color .2s, padding-left .25s;
}
.aparicoes-lista a:hover{ background:rgba(128,128,128,.06); padding-left:1.1rem }
.aparicao-meta{
  grid-area:meta;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--destaque);
}
.aparicao-nome{ grid-area:nome; font-family:var(--serif); font-size:1.18rem; line-height:1.35 }
.aparicao-data{ grid-area:data; color:var(--texto-fraco); font-size:.8rem; white-space:nowrap }
.aparicao-seta{ grid-area:seta; color:var(--texto-fraco); display:flex; align-items:center }
.aparicoes-lista a:hover .aparicao-seta{ color:var(--destaque) }
.aparicoes-lista a:hover .aparicao-seta svg{ transform:translateX(5px) }
.aparicao-seta svg{ transition:transform .3s }
@media (max-width:620px){
  .aparicoes-lista li > *{
    grid-template-columns:1fr;
    grid-template-areas:"meta" "nome" "data";
    gap:.35rem;
  }
  .aparicao-seta{ display:none }
}

/* card sozinho na última fila: ocupa a fila inteira em vez de deixar buraco */
.cartao--sozinho{ grid-column:1 / -1 }
.cartao--sozinho p{ max-width:62ch }

/* botão que abre o resto das aparições */
.aparicoes-mais{
  display:inline-flex; align-items:center; gap:.6rem;
  margin-top:1.8rem; padding:.9rem 1.5rem;
  border:1px solid var(--borda); background:none; color:var(--texto);
  font:inherit; font-size:.76rem; letter-spacing:.14em; text-transform:uppercase;
  cursor:pointer;
  transition:border-color .25s ease, color .25s ease, background-color .25s ease;
}
.aparicoes-mais:hover{ border-color:var(--destaque); color:var(--destaque) }
.aparicoes-seta{ display:flex; transition:transform .3s ease }
.aparicoes-mais.aberto .aparicoes-seta{ transform:rotate(180deg) }

/* ===========================================================================
   SEM JAVASCRIPT — as animações são o CSS reagindo à variável --p, que o
   site.js escreve a cada quadro. Sem ele, --p fica em zero e tudo nasce
   invisível. Aqui a página volta ao estado final: visível e parada.
   ======================================================================== */
.sem-js [data-rol],
.sem-js .sobre-texto p,
.sem-js .numeros li,
.sem-js .cv-item,
.sem-js .cartao,
.sem-js .aparicoes-lista li,
.sem-js .redes-lista li,
.sem-js .cv-lista,
.sem-js .abertura-interior,
.sem-js .abertura-seta{ --p:1 }
.sem-js .abertura-interior{ opacity:1; filter:none; transform:none }
.sem-js .sobre-foto{ --p:0 }
.sem-js .abertura{ height:auto }
.sem-js .abertura-palco{ position:static; height:100svh }
.sem-js .abertura-fundo{ opacity:.42 }
.sem-js .progresso{ display:none }
/* a janela das coleções depende de clique; sem script, o card vira só texto */
.sem-js .filtros{ display:none }

/* Sem JavaScript não há quem troque o tema do corpo conforme a rolagem,
   então cada seção passa a carregar as próprias cores e a pintar o fundo. */
.sem-js [data-tema="escuro"]{
  --fundo:       #0b0d10;
  --texto:       #f2f1ee;
  --texto-fraco: #9aa0a8;
  --borda:       #262b33;
  --destaque:    #e0b872;
  --veu:         rgba(11,13,16,.82);
}
.sem-js [data-tema="claro"]{
  --fundo:       #f4f2ed;
  --texto:       #15181c;
  --texto-fraco: #6a6f77;
  --borda:       #d9d5cc;
  --destaque:    #8a6420;
  --veu:         rgba(244,242,237,.86);
}
.sem-js [data-tema]{ background:var(--fundo); color:var(--texto) }

/* ===========================================================================
   CELULAR — o layout já se adapta sozinho; aqui ficam os ajustes que só a
   tela pequena exige: alvos de toque grandes o bastante para o dedo (44px,
   que é o mínimo recomendado) e blocos que ficavam apertados em 375px.
   ======================================================================== */
@media (max-width:620px){
  /* o logo comia um quarto da largura e espremia o cargo ao lado */
  .cv-item{ grid-template-columns:64px minmax(0,1fr); gap:1rem; padding-left:0 }
  .cv-logo{ width:64px; height:48px }
  .cv-logo img{ max-width:64px; max-height:48px }

  /* alvos de toque */
  .filtros button{ padding:.85rem 1.1rem }
  .modal-fechar{ width:46px; height:46px }
  .redes-lista a{ width:2.75rem; height:2.75rem }
  .redes-lista svg{ width:1.05rem; height:1.05rem }
  .aparicoes-mais{ padding:1.05rem 1.5rem }

  /* a janela ocupa a tela inteira: em 375px, margem é espaço desperdiçado */
  .modal-caixa{ border-radius:0 }
  .modal-corpo{ padding-left:1.1rem; padding-right:1.1rem }

  /* no celular a foto vira fundo da seção inteira e o texto corre por cima;
     o crédito, encostado no canto, caía em cima de uma linha da minibio */
  .sobre-credito{ position:static; margin:2.5rem 0 0; text-align:right }
}