/*
Theme Name: Raphael Inácio Psicanálise
Theme URI: https://rinacio.com.br
Author: Raphael Inácio
Author URI: https://rinacio.com.br
Description: Tema customizado para Rinácio Psicanálise
Version: 2.0.0
License: Proprietary
Text Domain: rinacio
*/

/* ══════════════════════════════════════════════════════════════════
   Daqui até a seção "EXTENSÕES DO TEMA", este arquivo é o style.css do mockup
   limpo (_referencia/html-limpo/style.css), com os ajustes visuais do autor
   (2026-10-23). Classes novas do tema ficam na seção "EXTENSÕES DO TEMA", no fim.
   ══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   rinacio.com.br — folha compartilhada
   Tokens de cor preservados do tema atual. Serifa: Hedvig Letters Serif,
   que tem um peso só (400) e não tem itálico. Toda serifa roda em 400,
   sem itálico; a hierarquia vem da escala, não do peso.
   O que muda: escala, ritmo vertical e agrupamento.
   ══════════════════════════════════════════════════════════════════ */

:root{
  /* cor — inalterada */
  --bg:       #f4eee7;
  --bg-warm:  #EDEAE3;
  --ink:      #141414;
  --ink-50:   rgba(20,20,20,0.90);
  --ink-60:   rgba(20,20,20,0.62);
  --ink-30:   rgba(20,20,20,0.30);
  --ink-15:   rgba(20,20,20,0.10);
  --orange:       #F2712A;
  --orange-deep:  #C1520F;
  --orange-hover: #D45E1E;
  --teal:     #1F6F7A;
  --dark:     #141414;

  --serif:    'Hedvig Letters Serif', Georgia, serif;
  --sans:     'IBM Plex Sans', -apple-system, sans-serif;

  /* escala tipográfica — 5 degraus com papel definido */
  --fs-monumental: clamp(34px, 8vw, 66px);   /* fecho de página */
  --fs-display:    clamp(27px, 5.4vw, 40px); /* teaser, pull-quote */
  --fs-titulo:     clamp(30px, 6.6vw, 50px); /* h1 */
  --fs-alto:       clamp(19px, 4vw, 25px);   /* reflexiva, frase de destaque */
  --fs-h2:         clamp(19px, 3.6vw, 24px);
  --fs-body:  16px;
  --fs-prose: 18px;
  --fs-nota:  14px;
  --lh-body:  1.75;
  --lh-prose: 1.85;

  /* ritmo vertical em três tempos — o antigo era um só (44px) */
  --sp-tight: 30px;
  --sp:       64px;
  --sp-wide:  104px;

  --nav-h:    64px;
  --bleed:    max(0px, calc((100vw - 1140px) / 2 + 20px));
}
@media (max-width:767px){
  :root{ --sp: 48px; --sp-wide: 68px; --sp-tight: 24px; }
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:var(--fs-body); line-height:var(--lh-body);
  font-weight:400; -webkit-font-smoothing:antialiased; overflow-x:hidden;
  font-synthesis:none; /* impede negrito e itálico falsos na Hedvig */
}
a{color:inherit; transition: color .2s;}
img{max-width:100%;}

/* foco visível — não existia */
a:focus-visible, button:focus-visible, summary:focus-visible{
  outline:2px solid var(--orange-deep); outline-offset:3px; border-radius:2px;
}
.skip{
  position:absolute; left:-9999px; top:0; z-index:2000;
  background:var(--ink); color:var(--bg); padding:10px 16px; font-size:14px;
}
.skip:focus{left:8px; top:8px;}

/* ══════════ GRID ══════════
   Grid, colunas, contêiner (.container, .container-fluid) e utilitárias vêm
   do Bootstrap 5.3.8. */
/* faixa de largura total: o mockup usava .container-fluid sem estilo nenhum.
   Classe própria para não herdar o padding de 12px do Bootstrap. */
.container-faixa{width:100%; padding:0;}
/* coluna de leitura: medida fixa em ch, não em fração de grid */
.medida{max-width:64ch; margin-left:auto; margin-right:auto;}

/* ══════════ NAV ══════════ */
#nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  height:var(--nav-h); padding:0 20px;
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(244,238,231,0.92);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid transparent; transition:border-color .3s ease;
}
/* #nav.is-scrolled{border-bottom-color:var(--ink-15);} */
.nav-logo{line-height:0;}
.nav-logo img{height:34px; display:block;}
.nav-toggle{
  display:flex; width:32px; height:32px; padding:0; border:none; background:transparent;
  flex-direction:column; justify-content:center; align-items:center; gap:6px; cursor:pointer;
}
.nav-toggle span{display:block; width:22px; height:2px; background:var(--ink); border-radius:1px; transition:transform .25s ease, opacity .25s ease;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.nav-menu-wrap{
  display:none; position:absolute; top:var(--nav-h); left:0; right:0;
  flex-direction:column; align-items:flex-start; gap:0;
  padding:14px 20px 30px; background:rgba(247,245,242,0.98);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--ink-15);
}
.nav-menu-wrap.is-open{display:flex;}
.nav-menu{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0; width:100%;}
/* no mobile o menu vira lista tipográfica em serifa, não uma pilha de links de 16px */
.nav-menu a{
  display:block; padding:11px 0; font-family:var(--serif); font-size:22px; font-weight:400;
  color:var(--ink); text-decoration:none; transition:color .2s;
}
.nav-menu a:hover, .nav-menu a[aria-current="page"]{color:var(--orange-deep);}
.nav-menu li:last-child a{margin-top:8px; padding-top:19px; border-top:1px solid var(--ink-15);}

@media (min-width:900px){
  .nav-toggle{display:none;}
  .nav-menu-wrap{
    display:flex !important; position:static; flex-direction:row; align-items:center;
    padding:0; background:transparent; backdrop-filter:none; border:none; width:auto;
  }
  .nav-menu{flex-direction:row; gap:28px; align-items:center;}
  .nav-menu a{font-family:var(--sans); font-size:15px; font-weight:500; padding:0;}
  .nav-menu li:last-child a{margin:0; padding:0; border:none;}
  .nav-menu li:last-child a:hover{color:var(--orange-deep);}
}

main{padding-top:var(--nav-h);}

/* ══════════ MARCA DE INSISTÊNCIA ══════════
   Sete traços com intervalos que encurtam e depois se igualam.
   É o argumento do site em forma de sinal. Aparece uma vez por página,
   sempre logo abaixo do título. Substitui o antigo .titulo-acento. */
.insiste{display:block; height:16px; width:132px; margin:0 0 var(--sp-tight); overflow:visible;}
.insiste line{stroke:var(--orange); stroke-width:2.4; stroke-linecap:square;}
html.js .insiste line{opacity:0; animation:insiste-in .5s ease forwards;}
html.js .insiste line:nth-child(1){animation-delay:.15s}
html.js .insiste line:nth-child(2){animation-delay:.35s}
html.js .insiste line:nth-child(3){animation-delay:.50s}
html.js .insiste line:nth-child(4){animation-delay:.62s}
html.js .insiste line:nth-child(5){animation-delay:.72s}
html.js .insiste line:nth-child(6){animation-delay:.82s}
html.js .insiste line:nth-child(7){animation-delay:.92s}
@keyframes insiste-in{from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none}}
.secao-escura .insiste line{stroke:var(--orange);}

/* ══════════ SEÇÕES ══════════ */
.secao{padding:var(--sp) 0;}
.secao-wide{padding:var(--sp-wide) 0;}
.bg-clara{background:var(--bg);}
.bg-warm{background:var(--bg-warm);}
.bg-orange{background: var(--orange-deep);}
/* o número do nome é a opacidade da cor (orange-deep a 65%, teal a 75%) */
.bg-orange-65{background:rgba(193,82,15,.65);}
.bg-teal-75{background-color:rgba(31,111,122,.75);}
.bg-urgencia{background:rgba(32, 195, 216, 0.25);}
.borda-topo{border-top:1px solid var(--ink-15);}
@media (min-width:768px){ .secao-bloco-sobre{padding:50px;} }

.page-titulo{
  font-family:var(--serif); font-size:var(--fs-titulo); font-weight:400;
  line-height:1.1; letter-spacing:-0.02em; color:var(--ink); margin:0 0 22px; max-width:16ch;
}
.page-titulo.largo{max-width:24ch;}

.page-content h2{
  font-family:var(--serif); font-size:var(--fs-h2); font-weight:400;
  color:var(--ink); margin:var(--sp) 0 7px; letter-spacing:-0.01em;
  line-height:var(--lh-body); /* explícito: o reboot do Bootstrap põe 1.2 nos h2 */
}
.page-content h2:first-child{margin-top:0;}
.page-content p{font-size:var(--fs-body); line-height:var(--lh-prose); color:var(--ink-50); margin:0 0 20px;}
.page-content p:last-child{margin-bottom:0;}
/* primeiro parágrafo depois de um H1 entra num degrau acima */
.page-content .abre{font-size:var(--fs-prose); color:var(--ink);}

.urgencia-bloco{ padding:15px 0; text-align: center; margin-bottom: 30px;}
.urgencia-bloco p{font-size:13px; font-weight: 500; color:var(--ink-60); line-height:1.65; margin:0;}

/* ══════════ FRASES ══════════ */
.frase-monumental{padding:var(--sp) 0;}
.frase-monumental p{
  font-family:var(--serif); font-weight:400; line-height:1.08; margin:0;
  font-size:var(--fs-monumental); letter-spacing:-0.02em;
}
.frase-monumental.frase-insight p{color:var(--bg-warm);}
.secao-escura .frase-monumental p{color:#fff;}

/* ══════════ SEÇÃO ESCURA ══════════
   Peso máximo do site. Uma vez por página, e sempre no fim. */
.secao-escura{background:var(--teal); color:var(--bg);}
.secao-escura h2{color:#fff; font-family:var(--serif); font-size:var(--fs-h2); font-weight:400; margin:var(--sp) 0 14px; line-height:var(--lh-body);}
.secao-escura h2:first-child{margin-top:0;}
.secao-escura p{color:rgba(247,245,242,0.86); font-size:var(--fs-body); line-height:var(--lh-prose); margin:0 0 20px;}
.secao-escura p:last-child{margin-bottom:0;}
.secao-escura .link-txt{color:#fff; border-color:rgba(255,255,255,0.45);}
.secao-escura .link-txt:hover{color:var(--orange);}

.link-txt{
  display:inline-block; font-size:15px; font-family:var(--sans); font-weight:500;
  color:var(--teal); text-decoration:none;
  border-bottom:1px solid currentColor; padding-bottom:2px;
  transition:color .2s ease, gap .2s ease;
}
.link-txt:hover{color:var(--orange-deep);}
.link-txt .seta{display:inline-block; transition:transform .2s ease;}
.link-txt:hover .seta{transform:translateX(4px);}

/* ══════════ HOME ══════════ */
.hero-inner{display:grid; grid-template-columns:1fr; gap:var(--sp-tight);}
@media (min-width:768px){
  .hero-inner{grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:0px; align-items:center; margin-left:120px;}
}
.hero-h1{
  font-family:var(--serif); font-size:var(--fs-titulo); font-weight:400;
  line-height:1.06; color:var(--ink); margin:0 0 24px; max-width:425px;
}
.hero-reflexiva{
  font-family:var(--serif); font-weight:400; font-size:var(--fs-alto);
  line-height:1.5; color:var(--ink-50); max-width:600px; margin:0 0 var(--sp-tight);
}
.hero-pratica{
  font-family:var(--sans); font-size:var(--fs-nota); line-height:1.6; color:var(--ink-60);
 margin:0;
}
/* a foto sangra até a borda da tela no desktop, em vez de ficar numa caixa 3/4 */
.hero-photo{width:100%; overflow:hidden;}
.hero-photo img{width:100%; height:100%; object-fit:cover; object-position:top center; display:block;}
@media (min-width:768px){
  .hero-photo{width:auto; }
}
@media (max-width:767px){ .hero {padding-top: 20px;} .hero-photo{aspect-ratio:1/1; margin-top:8px; max-width: 320px; height: 376px;} }

/* teaser do Trabalho — escala, não cor */
.teaser-display{
  font-family:var(--serif); font-weight:400; font-size:var(--fs-display);
  line-height:1.28; letter-spacing:-0.015em; color:var(--ink); margin:0 0 15px;
}

/* espiral decorativa (faixa teal da home) */
.cta-final__spiral{
  position:absolute; right:0; bottom:-20px; width:460px; height:auto;
  opacity:0.10; pointer-events:none; filter:invert(1);
}

/* bloco Sobre — foto à direita, texto em citação */
.bloco-sobre{display:grid; grid-template-columns:1fr; gap:0;}
@media (min-width:768px){ .bloco-sobre{grid-template-columns:7fr 5fr; align-items:stretch; margin-left:100px;} }
.bloco-sobre-texto{padding:var(--sp) 0; display:flex; flex-direction:column; justify-content:center;}
@media (min-width:768px){ .bloco-sobre-texto{padding-right:56px;} }
.bloco-sobre-texto p{
  font-family:var(--serif); font-size:var(--fs-display);
  color:var(--ink); line-height:1.3; letter-spacing:-0.015em; margin:0 0 24px; max-width:510px;
}
.foto-quadro{width:100%; aspect-ratio:4/3; overflow:hidden;}
@media (min-width:768px){ .foto-quadro{width:auto; aspect-ratio:auto; margin-right:calc(-1 * var(--bleed));} }
.foto-quadro img{width:100%; height:100%; object-fit:cover; object-position:60% 25%; display:block;}

@media (max-width:767px) {
  .sobre-home {max-width: 320px; height: 382px;}
}

/* barra de enquadre — aqui a régua fina significa alguma coisa: é o contrato */
.enquadre-bar{border-top:1px solid var(--ink-15); border-bottom:1px solid var(--ink-15); padding:26px 0; margin:0;}
.linha-enquadre{font-size:16px; line-height:1.7; color:var(--ink-50); margin:0; max-width:70ch;}
/* variante em escala display (faixa teal da home); vem depois de .linha-enquadre para vencer */
.enquadre-display{font-family:var(--serif); font-weight:400; font-size:var(--fs-display); line-height:1.28; letter-spacing:-0.015em;}

/* lista de títulos */
.titles-list{list-style:none; margin:0 0 26px; padding:0;}
.titles-list li{border-bottom:1px solid var(--ink-15);}
.titles-list a{
  display:block; padding:22px 0; text-decoration:none; color:inherit;
  transition:padding-left .25s ease;
}
.titles-list a:hover{padding-left:10px;}
.titles-list .t-title{
  display:block; font-family:var(--serif); font-size:clamp(19px,3.4vw,24px); font-weight:400;
  line-height:1.25; color:var(--ink); margin-bottom:7px; transition:color .2s;
}
.titles-list a:hover .t-title{color:var(--orange-deep);}
.titles-list .t-sub{display:block; font-size:var(--fs-nota); color:var(--ink-60); line-height:1.6; max-width:56ch;}

/* ══════════ SOBRE ══════════ */
.sobre-hero-inner{display:flex; flex-direction:column-reverse; gap:var(--sp-tight);}
@media (min-width:768px){ .sobre-hero-inner{flex-direction:row; align-items:flex-end; gap:56px;} }
.sobre-foto-col{flex:0 0 auto; width:100%;}
.sobre-foto{width:100%; aspect-ratio:3/4; overflow:hidden;}
.sobre-foto img{width:100%; height:100%; object-fit:cover; object-position:60% 22%; display:block;}
.sobre-titulo{
  font-family:var(--serif); font-size:var(--fs-titulo); font-weight:400;
  line-height:1.06; letter-spacing:-0.025em; color:var(--ink); margin:0 0 22px;
}

/* ══════════ PERGUNTAS ══════════ */
.qa-grupo{padding:var(--sp) 0;}
.qa-grupo-titulo{
  font-family:var(--serif); font-size:var(--fs-h2); font-weight:400; color:var(--ink);
  margin:0 0 6px; line-height:var(--lh-body); /* explícito: reboot do Bootstrap */
}
@media (min-width:900px){
  .qa-grupo-inner{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:48px; align-items:start;}
  .qa-grupo-cab{position:sticky; top:calc(var(--nav-h) + 28px);}
}
details.qa{border-bottom:1px solid var(--ink-15);}
details.qa:first-of-type{border-top:1px solid var(--ink-15);}
details.qa summary{
  list-style:none; cursor:pointer; padding:20px 0 10px; display:flex; align-items:baseline; gap:16px;
  font-family:var(--serif); font-size:clamp(17px,3.6vw,20px); color:var(--ink); line-height:1.35;
  transition:color .2s;
}
details.qa summary:hover{color:var(--orange-deep);}
details.qa summary::-webkit-details-marker{display:none;}
details.qa summary::after{
  content:''; margin-left:auto; flex:0 0 11px; width:11px; height:11px; position:relative; top:3px;
  background:
    linear-gradient(var(--orange),var(--orange)) center/11px 1.6px no-repeat,
    linear-gradient(var(--orange),var(--orange)) center/1.6px 11px no-repeat;
  transition:transform .25s ease;
}
details.qa[open] summary::after{transform:rotate(45deg);}
details.qa[open] summary{color:var(--orange-deep);}
details.qa .qa-resposta{font-size:var(--fs-body); line-height:1.75; color:var(--ink-50); padding:0 0 24px; max-width:58ch;}

/* ══════════ ARTIGOS ══════════ */
.artigos-lista{list-style:none; margin:0; padding:0; }
.artigo-card{
  display:grid; grid-template-columns:1fr; gap:6px;
  text-decoration:none; color:inherit; padding:26px 0;
  border-bottom:1px solid var(--ink-15); transition:padding-left .25s ease;
}
@media (min-width:768px){
  .artigo-card{ padding:30px 0;}
}
.artigo-card:hover{padding-left:10px;}
.artigo-card-titulo{
  font-family:var(--serif); font-size:clamp(20px,3.6vw,26px); font-weight:400; line-height:1.22;
  letter-spacing:-0.015em; color:var(--ink); margin:0; transition:color .2s;
}
.artigo-card:hover .artigo-card-titulo{color:var(--orange-deep);}
.artigo-card-excerpt{font-size:var(--fs-body); line-height:1.7; color:var(--ink-60); margin:0;}
.artigos-paginacao{display:flex; flex-wrap:wrap; gap:8px; margin-top:var(--sp);}
.artigos-paginacao span, .artigos-paginacao a{
  display:inline-flex; align-items:center; justify-content:center; min-width:36px; height:36px;
  padding:0 10px; font-size:13px; font-family:var(--sans); color:var(--ink); text-decoration:none;
  border:1px solid var(--ink-15); transition:border-color .2s, background-color .2s, color .2s;
}
.artigos-paginacao a:hover{border-color:var(--teal); background-color:var(--teal); color:#fff}
.artigos-paginacao span.current{background:var(--teal); border-color:var(--teal); color:var(--bg);}

/* ══════════ CONTATO ══════════
   Botão e linha do e-mail ficam dentro de .page-content: o seletor composto
   vence ".page-content a" e ".page-content p" sem !important. */
.wa-btn, .page-content .wa-btn{
  display:inline-flex; align-items:center; gap:10px; background:var(--orange); color:#fff;
  font-family:var(--sans); font-size:15px; font-weight:500; padding:16px 30px; border-radius:3px;
  text-decoration:none; transition:background .2s, transform .2s;
}
.wa-btn:hover, .page-content .wa-btn:hover{background:var(--orange-hover); color:#fff; transform:translateY(-2px);}
.wa-btn svg{width:17px; height:17px; flex-shrink:0;}
.contato-intro{margin-bottom:36px;}
.page-content .contato-alt{line-height:1.4; margin:22px 0 0;}
.contato-alt a{color:var(--teal);}

/* ══════════ FOOTER ══════════ */
footer{background:#242423; padding:0 0 var(--sp-tight);}
.footer-grid{display:grid; grid-template-columns:1fr; gap:var(--sp-tight); padding-top:15px;}
@media (min-width:768px){ .footer-grid{grid-template-columns:minmax(0,3fr) minmax(0,4fr); gap:40px;} }
.footer-nome{font-family:var(--serif); font-size:21px; font-weight:400; color:#fff; margin:0 0 8px;}
.footer-linha{font-size:13px; color:#fff; line-height:1.8; margin:0;}
.footer-linha strong{color:var(--ink-50); font-weight:500;}
.footer-linha a{color:#fff; text-decoration:underline; text-underline-offset:2px;}
.footer-linha a:hover{color:var(--orange-deep);}
.footer-menu{list-style:none; margin:0; padding:0;}
.footer-menu li { display: inline-block;}
.footer-menu a{display:inline-block; padding:3px 0; margin: 0 15px; font-weight: 600; font-size:13px; color:#fff; text-decoration:none;}
.footer-menu li:last-child a {margin: 0;}
.footer-menu a:hover{color:var(--orange-deep);}
.footer-base{margin-top:var(--sp-tight); padding-top:18px; border-top:1px solid var(--ink-15);}


/* ══════════ reveal — agora efetivamente aplicado ══════════ */
html.js .reveal{opacity:0; transform:translateY(18px); transition:opacity .8s ease, transform .8s ease;}
html.js .reveal.visible{opacity:1; transform:none;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *, *::before, *::after{animation-duration:.001ms !important; transition-duration:.001ms !important;}
  html.js .reveal{opacity:1; transform:none;}
  html.js .insiste line{opacity:1;}
}


.footer-links { margin-top: 15px; text-align: right; display: flex; justify-content: end;}
.footer-links a { text-decoration: none; display: inline-flex; font-size: 13px; color:#fff; height: 24px; align-items: center; margin: 5px 0 0 15px;}
.footer-links a:hover { color:var(--orange-deep);}
.footer-links svg {
    width: 14px;
    height: 14px;
    margin-right: 5px;
}

/* ══════════════════════════════════════════════════════════════════
   EXTENSÕES DO TEMA
   O que o WordPress e as decisões do CLAUDE.md pedem além do mockup.
   ══════════════════════════════════════════════════════════════════ */

/* Rodapé colado ao fim da tela em páginas curtas (decisão 28): o body vira coluna
   flexível com altura mínima da tela e o <main> ocupa o espaço que sobra. Nav,
   skip-link e botão flutuante são fixos/absolutos e não entram no fluxo. A barra
   de admin do WordPress (logado) é descontada. Páginas longas não mudam. */
body{
  display:flex; flex-direction:column;
  min-height:calc(100vh - var(--wp-admin--admin-bar--height, 0px));
  min-height:calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
}
body > main{flex:1 0 auto;}
body > footer{flex-shrink:0;}

/* Item atual do menu marcado pelo WordPress por classe (ex.: "Artigos" nas
   páginas de etapa, onde não há aria-current). Mesmo destaque do mockup. */
.nav-menu .current-menu-item > a{color:var(--orange-deep);}

/* Hero e bloco Sobre da home: 20px de recuo lateral no celular. A partir de md
   valem os recuos fixos do mockup (decisão 14). */
@media (max-width:767.98px){ .recuo-celular{padding-left:20px; padding-right:20px;} }

/* Lista de artigos da home (decisão 13): título <h2> na escala do hero-h1, reduzido
   a 40px, e resumo de cada artigo (span.e-title) abaixo do título. */
.secao .hero-h1{font-size:40px;}
.titles-list .e-title{display:block; color:var(--ink-60); line-height:1.5; font-size:16px;}
@media (max-width:767.98px){
  .secao .hero-h1, .secao .insiste{font-size:34px; margin-left:10px;}
}
/* Rodapé no celular (C4): espaço no fim para o botão flutuante não cobrir
   "Política de Privacidade". Só nas páginas que têm o botão (não no Contato). */
/* Faixa de urgência do rodapé com 20px de recuo lateral até 1200px (C4 e R1).
   O resto do rodapé usa .container-fluid do Bootstrap (footer.php). */
@media (max-width:1199.98px){ footer > .container-faixa{padding-left:20px; padding-right:20px;} }

/* @media (max-width:899.98px){
  body:has(> .wa-float) footer{padding-bottom:calc(var(--sp-tight) + 64px + env(safe-area-inset-bottom));}
} */

/* Rodapé sem estouro horizontal no celular. No mockup, a linha de links
   (e-mail + Instagram + WhatsApp) é um flex sem quebra com ~343px de largura
   mínima, e a coluna 1fr da grade crescia com ela, passando da tela.
   Aqui a coluna não cresce além da tela e os links quebram linha se preciso.
   No md+ vale a grade de duas colunas do mockup, sem mudança. */
@media (max-width:767.98px){ .footer-grid{grid-template-columns:minmax(0,1fr); gap: 0px;} }
.footer-links{flex-wrap:wrap;}

@media (max-width:767.98px){
 footer .nav-logo { text-align: center;}
 footer .nav-logo img { margin:0 auto;}
 footer .footer-linha { text-align: center;}
 footer .footer-menu { display: none;}
 .footer-links { justify-content: center;}
 .footer-base { margin-top: 0;}
 .urgencia-bloco { padding: 15px;}

 .job-list .row {margin: 0;}
}

/* ══════════ CORPO DOS ARTIGOS ══════════
   Elementos do the_content() que o mockup não estiliza (seção 1.6 do
   relatório da Fase 5). h3 um degrau abaixo do h2 do mockup. */
.page-content h3{
  font-family:var(--serif); font-weight:400; font-size:clamp(18px,3.2vw,20px);
  line-height:1.35; color:var(--ink); margin:var(--sp-tight) 0 10px;
}
.page-content a{color:var(--teal); text-underline-offset:2px;}
.page-content a:hover{color:var(--orange-deep);}
.page-content strong{font-weight:600; color:var(--ink);}
.page-content figure{margin:0;}
/* tabelas: .table + .table-responsive vêm do filtro rinacio_tabelas_responsivas() */
.page-content .table-responsive{margin:var(--sp-tight) 0;}
.page-content .table{
  --bs-table-bg:transparent; --bs-table-color:var(--ink-50); --bs-table-border-color:var(--ink-15);
  font-size:var(--fs-nota); line-height:1.6; min-width:560px;
}
.page-content .table th{color:var(--ink); font-weight:500;}
/* legenda só para leitor de tela (classe sr-only do Bootstrap 4 no conteúdo).
   Portado de main.css:1472 do tema antigo; o Bootstrap 5 não tem .sr-only. */
.tabela-comparativa caption.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);}

/* Abaixo de 576px, tabela empilhada (decisão 25): cada linha vira um bloco, a 1ª
   célula vira o título do bloco e cada célula mostra antes o nome da sua coluna
   (data-label, posto pelo filtro rinacio_tabela_rotulos() a partir do <thead>).
   O <thead> some da tela mas continua para leitor de tela. */
@media (max-width:575.98px){
  .page-content .tabela-empilhavel{min-width:0;}
  .page-content .tabela-empilhavel thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
  .page-content .tabela-empilhavel tbody,
  .page-content .tabela-empilhavel tr,
  .page-content .tabela-empilhavel tbody th,
  .page-content .tabela-empilhavel tbody td{display:block; width:100%;}
  .page-content .tabela-empilhavel tbody tr{padding:16px 0; border-width:0 0 1px; border-style:solid; border-color:var(--ink-15);}
  .page-content .tabela-empilhavel tbody tr:first-child{border-top-width:1px;}
  .page-content .tabela-empilhavel tbody th,
  .page-content .tabela-empilhavel tbody td{padding:0; border:0; box-shadow:none;}
  .page-content .tabela-empilhavel tbody tr > :first-child{
    font-family:var(--serif); font-size:18px; font-weight:400; line-height:1.35; color:var(--ink); margin:0 0 8px;
  }
  .page-content .tabela-empilhavel tbody td + td{margin-top:10px;}
  .page-content .tabela-empilhavel tbody td::before{
    content:attr(data-label); display:block; font-weight:500; color:var(--ink);
  }
}

/* Tabela que o filtro não conseguiu empilhar (sem <thead> ou com células mescladas):
   fica rolável, com sombra nas bordas enquanto há conteúdo escondido (T1). Hoje,
   nenhuma das 3 tabelas cai aqui. */
.page-content .table-responsive:not(:has(.tabela-empilhavel)){background:
  linear-gradient(to right,var(--bg) 30%,rgba(244,238,231,0)) left center/40px 100% no-repeat local,
  linear-gradient(to left,var(--bg) 30%,rgba(244,238,231,0)) right center/40px 100% no-repeat local,
  linear-gradient(to right,rgba(20,20,20,.16),rgba(20,20,20,0)) left center/18px 100% no-repeat scroll,
  linear-gradient(to left,rgba(20,20,20,.16),rgba(20,20,20,0)) right center/18px 100% no-repeat scroll;}

/* Caixa de autor do artigo: nome em serifa */
.autor-nome{font-family:var(--serif); font-size:18px; color:var(--ink); margin:0 0 4px;}

/* ══════════ WHATSAPP FLUTUANTE ══════════
   Só abaixo de 900px, onde o menu vira hambúrguer (mesmo corte do nav).
   Oculto na página Contato (footer.php). Decisões 8 e 10. */
.wa-float{display:none;}
@media (max-width:899.98px){
  .wa-float{
    display:flex; align-items:center; justify-content:center;
    position:fixed; z-index:999;                       /* abaixo do #nav (1000) */
    right:calc(16px + env(safe-area-inset-right));
    bottom:calc(16px + env(safe-area-inset-bottom));
    width:48px; height:48px; border-radius:50%;
    background:var(--bg); color:var(--orange-deep);
    border:1px solid var(--ink-15);
    box-shadow:0 2px 10px rgba(20,20,20,0.08);
    text-decoration:none; transition:border-color .2s, color .2s;
  }
  .wa-float:hover, .wa-float:focus-visible{border-color:var(--orange-deep); color:var(--orange-hover);}
  .wa-float svg{width:22px; height:22px; flex-shrink:0;}
}

/* ══════════ O TRABALHO · DESENHO "REPETIÇÃO" ══════════
   Desenho da home antiga (tema-antigo/front-page.php:78-97), à direita do
   texto do hero (decisão 32). Animação igual à do tema antigo (main.css:310-344),
   com uma diferença: em vez de rodar uma vez, repete. Sem JS, fica estático e
   completo. Com JS, entra num ciclo de 7,1s, que começa quando o desenho entra
   na tela e pausa fora dela (main.js põe .em-curso e .em-tela):
     0,1s a 2,5s  as três linhas se desenham (1,4s cada, atrasos de 0,1s, 0,6s
                  e 1,1s), cada origem aparece junto com a sua linha;
     2,5s a 5,5s  desenho completo;
     5,5s a 6,1s  linhas e origens esmaecem;
     6,1s a 7,1s  pausa, e recomeça.
   O ponto central aparece em 1,7s e pulsa sempre, fora do ciclo, como no
   tema antigo. Porcentagens dos keyframes = segundos / 7,1. */
.svg-repeticao-wrap{margin-top:var(--sp-tight); pointer-events:none;}
@media (min-width:768px){ .svg-repeticao-wrap{margin-top:0;} }
.repeticao-svg{display:block; width:100%; height:auto;}
.repeticao-svg .l1{--len:299;}
.repeticao-svg .l2{--len:289;}
.repeticao-svg .l3{--len:191;}
.repeticao-svg .origem-r{opacity:1;}
html.js .repeticao-svg .linha-r{stroke-dasharray:var(--len); stroke-dashoffset:var(--len);}
html.js .repeticao-svg .origem-r,
html.js .repeticao-svg .ponto-r{opacity:0;}

.repeticao-svg.em-curso .tracos-r{animation:rep-esmaece 7.1s linear infinite;}
.repeticao-svg.em-curso .l1{animation:rep-l1 7.1s linear infinite;}
.repeticao-svg.em-curso .l2{animation:rep-l2 7.1s linear infinite;}
.repeticao-svg.em-curso .l3{animation:rep-l3 7.1s linear infinite;}
.repeticao-svg.em-curso .o1{animation:rep-o1 7.1s linear infinite;}
.repeticao-svg.em-curso .o2{animation:rep-o2 7.1s linear infinite;}
.repeticao-svg.em-curso .o3{animation:rep-o3 7.1s linear infinite;}
.repeticao-svg.em-curso .ponto-r{animation:rep-aparece .4s ease 1.7s forwards, rep-pulsa 2.4s ease-in-out 2.1s infinite;}
.repeticao-svg.em-curso:not(.em-tela) *{animation-play-state:paused;}

@keyframes rep-l1{ 0%,1.41%{stroke-dashoffset:var(--len); animation-timing-function:ease;} 21.13%,100%{stroke-dashoffset:0;} }
@keyframes rep-l2{ 0%,8.45%{stroke-dashoffset:var(--len); animation-timing-function:ease;} 28.17%,100%{stroke-dashoffset:0;} }
@keyframes rep-l3{ 0%,15.49%{stroke-dashoffset:var(--len); animation-timing-function:ease;} 35.21%,100%{stroke-dashoffset:0;} }
@keyframes rep-o1{ 0%,1.41%{opacity:0; animation-timing-function:ease;} 5.63%,100%{opacity:1;} }
@keyframes rep-o2{ 0%,8.45%{opacity:0; animation-timing-function:ease;} 12.68%,100%{opacity:1;} }
@keyframes rep-o3{ 0%,15.49%{opacity:0; animation-timing-function:ease;} 19.72%,100%{opacity:1;} }
@keyframes rep-esmaece{ 0%,77.46%{opacity:1; animation-timing-function:ease;} 85.92%,100%{opacity:0;} }
@keyframes rep-aparece{ to{opacity:1;} }
@keyframes rep-pulsa{ 0%,100%{r:5px; opacity:.9;} 50%{r:7px; opacity:.5;} }

/* reduce-motion: desenho estático e completo. O "animation:none" vence a regra
   global do mockup, que encurtaria o ciclo infinito para um pisca-pisca. */
@media (prefers-reduced-motion: reduce){
  .repeticao-svg *{animation:none !important;}
  html.js .repeticao-svg .linha-r{stroke-dashoffset:0;}
  html.js .repeticao-svg .origem-r{opacity:1;}
  html.js .repeticao-svg .ponto-r{opacity:.9;}
}

/* ══════════ O TRABALHO · CTA FINAL ══════════
   CTA final da home antiga (tema-antigo/assets/css/main.css:655-715 e 1088-1090),
   com o visual de lá: faixa teal, título grande com ênfase laranja, subtexto
   claro, botão laranja com ícone do WhatsApp e espiral ao fundo (decisão 32).
   Fontes e cores pelos tokens do tema novo. A espiral reaproveita a base
   .cta-final__spiral do mockup (faixa teal da home) e muda só posição e tamanho. */
.cta-final{position:relative; overflow:hidden;}
.cta-final--home{background:var(--teal); padding:100px 0;}
.cta-final--home .cta-final__spiral{top:63.5%; bottom:auto; transform:translateY(-50%); width:640px;}
.cta-final__titulo{
  font-family:var(--serif); font-weight:400; font-size:clamp(36px,5vw,72px);
  line-height:1.25; letter-spacing:-0.03em; color:var(--bg); margin:0 0 28px;
}
.cta-final__titulo em{font-style:normal; color:var(--orange);}
.cta-final__sub{font-size:17px; line-height:1.7; color:rgba(247,245,242,0.45); max-width:420px; margin:0 0 52px;}
.cta-final__btn{
  display:inline-flex; align-items:center; gap:10px; background:var(--orange); color:#fff;
  font-family:var(--sans); font-size:14px; font-weight:500; padding:14px 28px; border-radius:3px;
  text-decoration:none; transition:background .2s, transform .2s;
}
.cta-final__btn:hover{background:var(--orange-hover); color:#fff; transform:translateY(-2px);}
.cta-final__btn svg{width:16px; height:16px; flex-shrink:0;}
/* entrada em degraus do tema antigo (.d1, .d2) sobre o reveal do mockup */
html.js .reveal.d1{transition-delay:.10s;}
html.js .reveal.d2{transition-delay:.22s;}
@media (max-width:767.98px){
  .cta-final--home{padding:66px 0;}
  .cta-final--home .cta-final__titulo{font-size:42px;}
  .cta-final--home .cta-final__spiral{display:none;}
}

/* ══════════ AJUSTES DO AUTOR (2026-10-23) ══════════ */

/* Régua vertical colorida à esquerda dos blocos da O trabalho. Espessura e lado
   vêm do Bootstrap (border-start border-2); estas classes só trocam a cor. */
.border-teal{--bs-border-color:var(--teal);}
.border-orange{--bs-border-color:var(--orange-hover);}

/* Parágrafo de apoio abaixo de uma frase monumental (Sobre e O trabalho):
   sans no corpo de texto, sem a escala nem o tracking da frase. */
.frase-monumental .frase-apoio{
  font-family:var(--sans); font-size:var(--fs-body); font-weight:400;
  letter-spacing:0; padding-top:30px;
}
/* Frase monumental um degrau abaixo (Sobre): 50px a partir de md; no celular
   segue a escala proporcional de --fs-monumental. */
@media (min-width:768px){ .frase-monumental .frase-reduzida{font-size:50px;} }

/* .link-txt escuro sobre a faixa laranja da home, branco no hover. Classe
   própria porque .text-black do Bootstrap é !important e travaria o hover. */
.link-txt.link-txt-escuro{color:var(--ink);}
.link-txt.link-txt-escuro:hover{color:#fff;}

/* ══════════ ARTIGOS · COLUNA DE CATEGORIAS ══════════
   Etapas com artigo publicado (template-parts/lista-etapas.php), à direita da
   lista no md+ e acima dela no celular. Rótulo e etiquetas no visual do
   template-parts/etapa-link.php do tema antigo (main.css:1578-1601), em tokens.
   A etapa da página atual fica preenchida (aria-current). */
.etapas{margin-bottom:var(--sp-tight);}
.etapa-label{
  font-family:var(--serif); font-size:16px;  margin:0 0 10px;
}
.etapas-lista{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px;}
@media (max-width:768px){ 
.etapas-lista {display: block;}
}
.etapa-chip{
  display:inline-flex; align-items:center; padding:4px 12px;
  font-family:var(--sans); font-size:14px; line-height:1.3; text-decoration:none;
  border-left:2px solid rgba(31,111,122,1);
  transition:all .2s, color .2s; margin-bottom: 5px;
}
.etapa-chip:hover, .etapa-chip[aria-current="page"]{background:var(--teal); border-color:var(--teal); color:#fff;}
@media (min-width:768px){  .etapas{padding-top:30px;} }

/* Categoria do artigo na byline do single, depois da data: link no padrão dos
   links do corpo (.page-content a). */
.byline-etapa{color:var(--teal); text-underline-offset:2px;}
.byline-etapa:hover{color:var(--orange-deep);}