/* ==========================================================
   denisaugustopsi.com.br — identidade "Travessia"
   Cores e fontes: ver identidade/IDENTIDADE-VISUAL.md
   ========================================================== */
@font-face{font-family:"Fraunces";src:url("../fonts/fraunces-latin-opsz-normal.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url("../fonts/fraunces-latin-opsz-italic.woff2") format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url("../fonts/source-sans-3-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url("../fonts/source-sans-3-latin-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url("../fonts/source-sans-3-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

:root{
  --noite:#101C27; --papel:#F5F1E9; --papel-2:#EDE7DB; --tinta:#1A2630; --cinza:#55636B;
  --nevoa:#B9C4C9; --salvia:#B9D6C4; --salvia-prof:#3F6B58; --salvia-fundo:#E3ECE5;
  --argila:#A9603F; --argila-cl:#D9926C; --linha:#DCD5C7; --branco:#FFFDF9;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Source Sans 3",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --largura:1080px; --largura-texto:700px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papel);color:var(--tinta);font-family:var(--sans);font-size:1.0625rem;line-height:1.7;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto}
a{color:var(--salvia-prof);text-underline-offset:3px}
a:hover{color:var(--tinta)}
:focus-visible{outline:2px solid var(--argila);outline-offset:3px;border-radius:4px}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;letter-spacing:-.02em;line-height:1.15;color:inherit}
h1 em,h2 em{font-style:italic;color:var(--salvia-prof)}
.envoltorio{width:min(100% - 32px,var(--largura));margin-inline:auto}
.envoltorio-texto{max-width:var(--largura-texto)}
.pular{position:absolute;left:-999px;top:8px;background:var(--tinta);color:var(--papel);padding:8px 14px;border-radius:8px;z-index:10}
.pular:focus{left:12px}

/* Marca / rótulo pequeno com traço */
.marca{display:inline-flex;align-items:center;gap:12px;color:var(--salvia);letter-spacing:.22em;font-size:.76rem;text-transform:uppercase;font-weight:600}
.marca::before{content:"";width:34px;height:1px;background:currentColor}
.marca-escura{color:var(--salvia-prof)}
.meta{font-size:.85rem;color:var(--cinza)}
.lead{color:var(--cinza);font-size:1.15rem;max-width:620px}

/* Topo */
.topo{border-bottom:1px solid var(--linha);background:var(--papel)}
.topo-escuro{background:var(--noite);border-bottom-color:rgba(185,214,196,.14);color:var(--papel)}
.topo-linha{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 0;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.logo:hover{color:inherit}
.logo-simbolo{flex:none}
.logo-nome{display:block;font-family:var(--serif);font-size:1.3rem;line-height:1.05}
.logo-sub{display:block;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--salvia-prof);margin-top:4px}
.topo-escuro .logo-sub,.rodape .logo-sub{color:var(--salvia)}
.menu{display:flex;gap:4px;flex-wrap:wrap}
.menu a{color:var(--cinza);text-decoration:none;padding:6px 12px;border-radius:100px;font-weight:600;font-size:.95rem}
.menu a:hover{color:var(--tinta);background:var(--papel-2)}
.menu a.ativo{color:var(--salvia-prof);background:var(--salvia-fundo)}
.topo-escuro .menu a{color:var(--nevoa)}
.topo-escuro .menu a:hover{color:var(--papel);background:rgba(255,255,255,.06)}
.topo-escuro .menu a.ativo{color:var(--noite);background:var(--salvia)}

/* Abertura (início) */
.abertura{background:var(--noite);color:var(--papel);padding:72px 0 96px;
  background-image:radial-gradient(ellipse at 78% 15%,#254039 0%,transparent 45%),radial-gradient(ellipse at 8% 100%,#263c4b 0%,transparent 50%)}
.abertura h1{font-size:clamp(2.7rem,7.5vw,5.4rem);line-height:1.06;letter-spacing:-.045em;margin:26px 0 22px}
.abertura h1 em{color:var(--salvia)}
.abertura-texto{color:var(--nevoa);font-size:clamp(1.05rem,2.2vw,1.22rem);max-width:590px;margin:0}
.acoes{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}

/* Botões */
.botao{display:inline-flex;align-items:center;gap:8px;border-radius:100px;padding:11px 22px;font-weight:600;font-size:.97rem;text-decoration:none;border:1px solid transparent;transition:background .15s,color .15s}
.botao-principal{background:var(--salvia-prof);color:#fff}
.botao-principal:hover{background:var(--tinta);color:#fff}
.botao-contorno{border-color:var(--salvia-prof);color:var(--salvia-prof)}
.botao-contorno:hover{background:var(--salvia-fundo);color:var(--salvia-prof)}
.botao-claro{background:var(--salvia);color:var(--noite)}
.botao-claro:hover{background:var(--papel);color:var(--noite)}
.botao-contorno-claro{border-color:rgba(185,214,196,.5);color:var(--salvia)}
.botao-contorno-claro:hover{border-color:var(--salvia);color:var(--papel)}
.link-seta{font-weight:600;text-decoration:none;font-size:.95rem}
.link-seta:hover{text-decoration:underline}

/* Seções */
.secao{padding:64px 0}
.secao-colada{padding-top:8px}
.secao-papel-escuro{background:var(--papel-2)}
.secao h2{font-size:clamp(1.8rem,4vw,2.4rem);margin:10px 0 0}
.secao-cabeca{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:28px}
.cabeca-pagina{padding:56px 0 32px}
.cabeca-pagina h1{font-size:clamp(2.3rem,6vw,3.8rem);margin:18px 0 14px;letter-spacing:-.035em}
.vazio{border:1px dashed var(--linha);border-radius:16px;padding:32px;text-align:center;color:var(--cinza);background:var(--branco)}
.vazio p{margin:0}

/* Tags e chips */
.tag{display:inline-block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--salvia-prof);background:var(--salvia-fundo);border-radius:100px;padding:3px 10px;text-decoration:none;line-height:1.6}
.tag-leve{background:transparent;border:1px solid var(--linha);color:var(--cinza)}
.tag-rascunho{background:#F6E3D8;color:#8A4A2E}
a.tag:hover{color:var(--tinta)}
.filtros{display:grid;gap:10px;margin:0 0 36px}
.filtro-grupo{display:flex;gap:8px;flex-wrap:wrap}
.chip{display:inline-block;padding:6px 14px;border-radius:100px;border:1px solid var(--linha);background:var(--branco);color:var(--tinta);text-decoration:none;font-size:.92rem;font-weight:600}
.chip:hover{border-color:var(--salvia-prof);color:var(--salvia-prof)}
.chip.ativo{background:var(--salvia-prof);border-color:var(--salvia-prof);color:#fff}
.chip-leve{font-weight:400;font-size:.88rem}

/* Cartões (início) */
.grade-cartoes{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.cartao{position:relative;background:var(--branco);border:1px solid var(--linha);border-radius:18px;padding:24px;display:flex;flex-direction:column;transition:border-color .2s,transform .2s,box-shadow .2s}
.cartao:hover{border-color:var(--salvia-prof);transform:translateY(-2px);box-shadow:0 10px 24px -14px rgba(16,28,39,.35)}
.cartao-meta{display:flex;gap:6px;flex-wrap:wrap;min-height:22px}
.cartao h3{font-size:1.4rem;margin:12px 0 8px}
.cartao h3 a{color:var(--tinta);text-decoration:none}
.cartao:hover h3 a{color:var(--salvia-prof)}
/* Card inteiro clicável: o link do título se estende por cima do card todo */
.cartao h3 a::after,.registro h3 a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.cartao h3 a:focus-visible,.registro h3 a:focus-visible{outline:none}
.cartao h3 a:focus-visible::after,.registro h3 a:focus-visible::after{outline:2px solid var(--argila);outline-offset:3px}
.cartao p{color:var(--cinza);margin:0 0 16px;flex:1}

/* Lista do diário — linha com marcos */
.grupo-semestre{margin-bottom:24px}
.secao .grupo-titulo{font-size:1.05rem;font-family:var(--sans);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--cinza);margin:0 0 18px}
.registros{list-style:none;margin:0;padding:0 0 0 30px;position:relative}
.registros::before{content:"";position:absolute;left:7px;top:24px;bottom:18px;width:1px;background:var(--salvia-prof);opacity:.6}
.registro{position:relative;padding:12px 16px;margin:0 0 22px -16px;border-radius:14px;transition:background .2s,box-shadow .2s}
.registro:hover{background:var(--branco);box-shadow:0 0 0 1px var(--linha)}
.registro:hover h3 a{color:var(--salvia-prof)}
.registro::before{content:"";position:absolute;left:-12px;top:20px;width:11px;height:11px;border-radius:50%;background:var(--papel);border:2px solid var(--salvia-prof)}
.registros .registro:first-child::before{background:var(--salvia-prof)}
.registro-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:.85rem;color:var(--cinza)}
.registro h3{font-size:clamp(1.35rem,3vw,1.7rem);margin:8px 0 6px}
.registro h3 a{color:var(--tinta);text-decoration:none}
.registro h3 a:hover{color:var(--salvia-prof)}
.registro p{margin:0 0 4px;color:var(--cinza);max-width:640px}

/* Post */
.cabeca-post{padding-bottom:12px}
.cabeca-post h1{margin-top:16px}
.voltar{display:inline-block;font-weight:600;text-decoration:none;font-size:.92rem;margin-bottom:22px}
.texto{font-size:1.125rem;line-height:1.8}
.texto>*:first-child{margin-top:0}
.texto p{margin:0 0 1.25em}
.texto h2{font-size:1.75rem;margin:1.8em 0 .5em}
.texto h3{font-size:1.35rem;margin:1.6em 0 .4em}
.texto blockquote{margin:1.6em 0;padding:4px 0 4px 22px;border-left:2px solid var(--salvia-prof);font-family:var(--serif);font-style:italic;font-size:1.3rem;line-height:1.55;color:var(--tinta)}
.texto blockquote p{margin:0 0 .6em}
.texto ul,.texto ol{padding-left:1.3em;margin:0 0 1.25em}
.texto li{margin:.3em 0}
.texto hr{border:0;text-align:center;margin:2.2em 0}
.texto hr::after{content:"·  ·  ·";color:var(--salvia-prof);letter-spacing:.3em}
.texto figure{margin:2em 0}
.texto img{border-radius:14px;display:block}
.texto figcaption{font-size:.88rem;color:var(--cinza);margin-top:8px;text-align:center}
.texto-curto{font-size:1.02rem;line-height:1.7;color:var(--cinza)}
.texto-curto p{margin:0 0 .8em}
.texto-pagina{padding-bottom:24px}
.navegacao-posts{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:48px 0 72px;padding-top:28px;border-top:1px solid var(--linha)}
.nav-post{display:flex;flex-direction:column;gap:4px;text-decoration:none;padding:16px 18px;border:1px solid var(--linha);border-radius:14px;background:var(--branco)}
.nav-post:hover{border-color:var(--salvia-prof)}
.nav-post-direita{text-align:right;grid-column:2}
.nav-titulo{font-family:var(--serif);font-size:1.12rem;color:var(--tinta);line-height:1.3}

/* Linha do tempo (Jornada) */
.linha-tempo{list-style:none;margin:16px 0 64px;padding:0 0 0 34px;position:relative}
.linha-tempo::before{content:"";position:absolute;left:8px;top:12px;bottom:12px;width:1px;background:var(--salvia-prof)}
.linha-tempo li{position:relative;padding:0 0 40px}
.linha-tempo li::before{content:"";position:absolute;left:-32px;top:6px;width:13px;height:13px;border-radius:50%;background:var(--papel);border:2px solid var(--salvia-prof)}
.linha-tempo li.feito::before{background:var(--salvia-prof)}
.linha-tempo li.agora::before{background:var(--argila);border-color:var(--argila);box-shadow:0 0 0 6px rgba(169,96,63,.18)}
.linha-tempo li.adiante{opacity:.75}
.linha-tempo li.adiante::before{border-color:var(--cinza)}
.lt-quando{display:block;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cinza);font-weight:600}
.linha-tempo li.agora .lt-quando{color:var(--argila)}
.secao .lt-titulo{font-size:clamp(1.5rem,3.5vw,2rem);margin:6px 0 10px}
.bloco-agora{display:grid;grid-template-columns:1fr auto;gap:48px;align-items:center}
.bloco-agora .texto-curto{max-width:560px;margin:12px 0 24px}
.linha-tempo-mini{margin:0;padding-left:34px}
.linha-tempo-mini li{padding-bottom:28px}
@media (max-width:720px){.bloco-agora{grid-template-columns:1fr}.linha-tempo-mini{display:none}}

/* 404 — a trilha que termina no meio do caminho */
.nao-encontrado{padding:40px 0 88px}
.nao-encontrado h1{margin-top:20px}
.mapa{display:block;width:100%;max-width:640px;height:auto;margin:0 0 28px;overflow:visible}
.mapa .horizonte{stroke:rgba(185,214,196,.16);stroke-width:1}
.mapa .trilha{fill:none;stroke:var(--salvia);stroke-width:1.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:desenhar 2.4s cubic-bezier(.45,0,.2,1) .2s forwards}
.mapa .trilha-some{fill:none;stroke-width:1.5;stroke-linecap:round;stroke-dasharray:2 9;opacity:0;animation:aparecer 1.2s ease 2.2s forwards}
.mapa .estrela{fill:var(--papel);opacity:.25;animation:cintilar 4s ease-in-out infinite}
.mapa .duvida{font-family:var(--serif);font-style:italic;font-size:30px;fill:var(--salvia)}
.mapa .viajante-parado{display:none}
@keyframes desenhar{to{stroke-dashoffset:0}}
@keyframes aparecer{to{opacity:1}}
@keyframes cintilar{50%{opacity:.85}}
@media (prefers-reduced-motion:reduce){
  .mapa .trilha{animation:none;stroke-dashoffset:0}
  .mapa .trilha-some{animation:none;opacity:1}
  .mapa .estrela{animation:none}
  .mapa .viajante-animado{display:none}
  .mapa .viajante-parado{display:inline}
}

/* Rodapé */
.rodape{background:var(--noite);color:var(--papel);padding:48px 0 28px;margin-top:0}
.rodape-linha{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.rodape-links{display:flex;gap:18px;flex-wrap:wrap}
.rodape-links a{color:var(--nevoa);text-decoration:none;font-size:.95rem}
.rodape-links a:hover{color:var(--papel)}
.rodape-fim{margin-top:32px;padding-top:20px;border-top:1px solid rgba(185,214,196,.14);font-size:.82rem;color:var(--nevoa)}

@media (max-width:640px){
  .topo-linha{padding:14px 0 10px}
  .menu{width:100%;justify-content:space-between;gap:0;margin:0 -10px}
  .menu a{padding:6px 10px}
  .abertura{padding:52px 0 72px}
  .secao{padding:48px 0}
  .cabeca-pagina{padding:40px 0 24px}
  .navegacao-posts{grid-template-columns:1fr}
  .nav-post-direita{grid-column:1}
}
/* Transições entre páginas (View Transitions; navegadores sem suporte trocam de página normalmente) */
@view-transition{navigation:auto}
.topo{view-transition-name:topo}
.menu a.ativo{view-transition-name:menu-ativo}
main{view-transition-name:conteudo}
::view-transition-group(*){animation-duration:.45s;animation-timing-function:cubic-bezier(.22,1,.36,1)}
::view-transition-old(root),::view-transition-new(root){animation-duration:.35s}
::view-transition-old(conteudo){animation:sair .22s cubic-bezier(.4,0,1,1) both}
::view-transition-new(conteudo){animation:entrar .5s cubic-bezier(.22,1,.36,1) .08s both}
@keyframes sair{to{opacity:0;transform:translateY(-8px)}}
@keyframes entrar{from{opacity:0;transform:translateY(14px)}}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}
.texto-pagina>h2:first-child{font-size:clamp(2.2rem,5vw,3.2rem);margin:14px 0 .6em;letter-spacing:-.035em}
.linha-tempo-mini::before{bottom:34px}