/* ===================================================================
     CORES — organizadas em três grupos, e é isso que permite ter dois
     temas sem duplicar a folha de estilo inteira.

     1. MARCA        vinho e dourado do escritório; nunca mudam.
     2. SOBRE ESCURO o topo, a faixa de números, o rodapé, o formulário
                     de contato e o aviso de cookies continuam escuros
                     nos dois temas — a foto do topo pede texto claro.
                     Estas cores também não mudam.
     3. DOCUMENTO    o corpo do site: fundo, texto e bordas. É só este
                     grupo que o tema troca, lá embaixo em
                     html[data-tema="claro"].

     Os nomes antigos (--paper-50, --slate-700...) continuam existindo,
     apontando para os novos. Assim o resto do arquivo segue valendo.
     =================================================================== */
  :root{
    /* 1. Marca */
    --ink-900:#2E0F1A;
    --ink-800:#5C1A2E;
    --ink-700:#7A2438;
    --brass-500:#A8863E;
    --brass-300:#C9A96A;
    --sage-600:#6E5B45;

    /* 2. Sobre fundo escuro */
    --on-deep:#FFFFFF;
    --on-deep-2:#C9CBD2;
    --on-deep-3:#9CA0AC;
    --on-deep-4:#7C8090;

    /* 3. Documento — tema escuro (padrão) */
    --bg:#120A0D;
    --bg-alt:#1B0E12;
    --border:rgba(255,255,255,.14);
    --text:#EFECE6;
    --text-2:#AFA9A5;
    --accent:#C9A96A;
    --accent-2:#A8863E;
    --accent-hover:#E0C88F;
    --code-bg:rgba(255,255,255,.06);
    --sombra:rgba(0,0,0,.35);

    /* Apelidos antigos */
    --paper-100:var(--bg-alt);
    --paper-50:var(--bg);
    --stone-300:var(--border);
    --slate-700:var(--text);
    --slate-500:var(--text-2);

    --font-display:'Fraunces', serif;
    --font-body:'Inter', sans-serif;
    --font-mono:'IBM Plex Mono', monospace;
    --max-w:1180px;

    /* Multiplicador do texto corrido. Ver o bloco "ESCALA DE TEXTO". */
    --esc:1;
  }

  /* ===================================================================
     TEMA CLARO
     Fundo branco, com o vinho da marca guardado para as âncoras (faixa
     de números, rodapé, formulário) e o dourado escurecido para ficar
     legível sobre branco — o dourado claro sobre papel some.
     =================================================================== */
  html[data-tema="claro"]{
    --bg:#FFFFFF;
    --bg-alt:#F6F2F0;
    --border:rgba(46,15,26,.14);
    --text:#241017;
    --text-2:#584950;
    --accent:#8A6A22;
    --accent-2:#7A5C1B;
    --accent-hover:#5E4512;
    --code-bg:rgba(46,15,26,.06);
    --sombra:rgba(46,15,26,.13);
  }

  /* ===================================================================
     ESCALA DE TEXTO EM TELAS GRANDES

     O PROBLEMA
     Num notebook de 14" o texto está no tamanho certo. Num monitor de
     26" a tela tem quase o dobro da largura, mas o texto continua com os
     mesmos pixels — e o olho, que agora está mais longe, lê pequeno.

     A SOLUÇÃO
     Todo o texto corrido é escrito como calc(tamanho * var(--esc)). Com
     --esc:1 o resultado é exatamente o valor original, então NADA muda
     até 1600px de largura. Acima disso o multiplicador sobe em degraus.

     POR QUE EM DEGRAUS, E NÃO CONTÍNUO COM vw
     Tamanho amarrado à largura da janela muda a cada arrastar de borda e
     produz números quebrados. Três degraus são estáveis e previsíveis.

     O QUE FICA DE FORA
     Títulos, os numerais grandes, ícones e botões. Títulos já crescem
     sozinhos (clamp com vw) e aumentá-los de novo desmontaria a
     hierarquia — o pedido era justamente o contrário: aproximar o texto
     do título, não afastar mais.

     A LARGURA DA COLUNA CRESCE JUNTO
     Se só o texto crescesse, caberiam menos palavras por linha e os
     cartões ficariam apertados. A referência de tipografia é manter algo
     entre 60 e 75 caracteres por linha; por isso --max-w acompanha.
     =================================================================== */
  @media (min-width:1600px){
    :root{ --esc:1.08; --max-w:1240px; }
  }
  @media (min-width:1920px){
    :root{ --esc:1.14; --max-w:1300px; }
  }
  @media (min-width:2400px){
    :root{ --esc:1.20; --max-w:1360px; }
  }
  /* A coluna do artigo tem largura própria e é ajustada no fim deste
     arquivo, depois da regra que a define. */
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    font-family:var(--font-body);
    color:var(--slate-700);
    background:var(--paper-50);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%;display:block;}
  a{color:inherit;text-decoration:none;}
  ul{list-style:none;}
  .wrap{max-width:var(--max-w);margin:0 auto;padding:0 28px;}
  .eyebrow{
    font-family:var(--font-mono);
    font-size:calc(12.5px * var(--esc));
    letter-spacing:.06em;
    color:var(--accent-2);
    text-transform:uppercase;
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-bottom:18px;
  }
  .eyebrow::before{
    content:"";
    width:26px;height:1px;background:var(--accent-2);
    display:inline-block;
  }
  h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;color:var(--slate-700);line-height:1.15;}
  h2{font-size:clamp(28px,3.4vw,42px);letter-spacing:-.01em;}
  h3{font-size:22px;}
  .section{padding:96px 0;}
  .section-alt{background:var(--paper-100);}
  .btn{
    display:inline-flex;align-items:center;gap:10px;
    padding:15px 30px;
    font-family:var(--font-body);font-weight:600;font-size:13px;
    text-transform:uppercase;letter-spacing:.08em;
    border-radius:2px;
    border:1px solid transparent;
    cursor:pointer;
    transition:all .3s ease;
  }
  .btn-primary{background:var(--brass-500);color:var(--ink-900);box-shadow:0 10px 24px rgba(168,134,62,.22);}
  .btn-primary:hover{background:var(--brass-300);transform:translateY(-2px);box-shadow:0 14px 30px rgba(168,134,62,.32);}
  .btn-outline{border-color:rgba(255,255,255,.35);color:#fff;}
  .btn-outline:hover{background:rgba(255,255,255,.08);border-color:#fff;}
  .btn-outline-dark{border-color:var(--ink-800);color:var(--ink-800);}
  .btn-outline-dark:hover{background:var(--ink-800);color:#fff;}

  /* Botões que abrem uma conversa no WhatsApp.
     Usam o verde do próprio aplicativo: o visitante reconhece para onde o
     clique leva antes mesmo de ler o texto. O texto é escrito num verde
     bem escuro (e não em branco) porque sobre esse fundo claro o branco
     ficaria com contraste baixo demais para quem enxerga pouco. */
  .btn-wa{
    background:#25D366;color:#06331D;border-color:#25D366;
    box-shadow:0 10px 24px rgba(37,211,102,.24);
  }
  .btn-wa:hover{
    background:#1EBE5B;border-color:#1EBE5B;color:#06331D;
    transform:translateY(-2px);box-shadow:0 14px 30px rgba(37,211,102,.34);
  }
  .btn-wa .ico-svg{color:inherit;}

  /* TOP LETTERHEAD BAR */
  .letterbar{
    height:4px;width:100%;
    background:linear-gradient(90deg,var(--ink-900) 0%,var(--brass-500) 50%,var(--ink-900) 100%);
    position:fixed;top:0;left:0;right:0;z-index:1001;
  }

  /* HEADER */
  header{
    position:fixed;top:4px;left:0;right:0;z-index:1000;
    background:rgba(46,15,26,0);
    transition:background .35s ease, box-shadow .35s ease, padding .3s ease, border-color .35s ease;
    padding:14px 0;
    border-bottom:1px solid rgba(255,255,255,0);
  }
  header.scrolled{
    background:rgba(46,15,26,.97);
    backdrop-filter:blur(8px);
    box-shadow:0 10px 30px rgba(0,0,0,.22);
    padding:12px 0;
    border-bottom:1px solid rgba(201,169,106,.18);
  }
  header .wrap{display:flex;align-items:center;justify-content:space-between;}
  /* flex-shrink:0 nos dois: a logo é a única coisa do cabeçalho que NUNCA
     pode ceder espaço. Sem isso ela é um item flexível como outro qualquer
     e o navegador a espreme quando o menu cresce — foi o que aconteceu
     quando o item "Livros e Publicações" entrou no ar. Logo deformada é
     sempre erro; quem deve ceder é o espaçamento do menu (ver o bloco
     max-width:1400px mais abaixo). */
  .logo{display:flex;align-items:center;flex-shrink:0;}
  .header-flex{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
  }
  .header-right{display:flex;align-items:center;gap:32px;}
  .logo-img{height:100px;width:auto;display:block;flex-shrink:0;transition:height .3s ease;}
  header.scrolled .logo-img{height:60px;}
  nav.mainnav ul{display:flex;gap:30px;align-items:center;}
  nav.mainnav a{color:#EDEAE0;font-size:12.5px;font-weight:600;position:relative;padding:4px 0;text-transform:uppercase;letter-spacing:.07em;}
  nav.mainnav a::after{
    content:"";position:absolute;left:0;bottom:-2px;width:0;height:1px;background:var(--brass-300);
    transition:width .25s ease;
  }
  nav.mainnav a:hover::after{width:100%;}
  .header-cta{white-space:nowrap;}
  .burger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;}
  .burger span{width:24px;height:2px;background:#fff;}

  /* HERO */
  .hero{
    position:relative;
    display:block;
    background:
      linear-gradient(160deg, rgba(46,15,26,.90) 0%, rgba(18,10,13,.94) 45%, rgba(18,10,13,.98) 100%),
      url('../assets/img/office-interior.jpg') center 30%/cover no-repeat;
    color:#fff;
    overflow:hidden;
    padding-top:200px;
    padding-bottom:120px;
  }
  .hero::before{
    content:"";position:absolute;inset:0;
    background-image:
      repeating-linear-gradient(115deg, rgba(255,255,255,.025) 0px, rgba(255,255,255,.025) 1px, transparent 1px, transparent 90px);
    pointer-events:none;
  }
  .hero-seal{
    position:absolute;right:-60px;top:50%;transform:translateY(-50%);
    width:460px;height:460px;
    border:1px solid rgba(201,169,106,.25);
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    opacity:.7;
  }
  .hero-seal::before{
    content:"";position:absolute;inset:34px;
    border:1px dashed rgba(201,169,106,.3);
    border-radius:50%;
  }
  .hero-seal-text{
    font-family:var(--font-mono);font-size:11px;letter-spacing:.3em;color:var(--brass-300);
    text-transform:uppercase;
  }
  .hero .wrap{position:relative;z-index:2;text-align:left;}
  .hero-grid{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap;}
  .hero-content{max-width:660px;text-align:left;margin:0;}
  .hero h1 em{color:var(--brass-300);font-style:italic;font-weight:400;}
  .hero-facts{display:flex;flex-direction:column;gap:16px;min-width:220px;padding-bottom:6px;}
  .hero-fact{display:flex;justify-content:space-between;align-items:baseline;gap:20px;border-bottom:1px solid rgba(255,255,255,.14);padding-bottom:10px;}
  .hero-fact span{font-size:calc(12px * var(--esc));color:#B9B4B0;text-transform:uppercase;letter-spacing:.05em;}
  .hero-fact strong{font-family:var(--font-display);font-size:20px;color:var(--brass-300);font-weight:600;}
  @media (max-width:760px){
    .hero-grid{flex-direction:column;align-items:flex-start;}
    .hero-facts{flex-direction:row;flex-wrap:wrap;width:100%;gap:20px 28px;}
  }
  .hero h1{
    font-size:clamp(38px,5.2vw,64px);
    color:#fff;
    font-weight:600;
    letter-spacing:-.015em;
    margin-bottom:24px;
  }
  .hero h1 em{color:var(--brass-300);font-style:normal;}
  .hero p.lead{
    font-size:calc(18px * var(--esc));color:#C9CBD2;max-width:520px;margin-bottom:38px;
  }
  .hero-actions{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:56px;}
  .hero-protocol{
    font-family:var(--font-mono);font-size:12.5px;color:rgba(255,255,255,.45);
    letter-spacing:.04em;
  }

  /* STATS BAR */
  .stats{
    background:var(--ink-900);
    border-top:1px solid rgba(255,255,255,.08);
    padding:0;
  }
  .stats .wrap{
    display:grid;grid-template-columns:repeat(5,1fr);
  }
  .stat{
    padding:36px 20px;
    text-align:left;
    border-left:1px solid rgba(255,255,255,.08);
  }
  .stat:first-child{border-left:none;}
  .stat .num{
    font-family:var(--font-display);font-size:40px;color:var(--brass-300);font-weight:600;
    display:flex;align-items:baseline;gap:2px;
  }
  .stat .label{font-size:calc(13px * var(--esc));color:#9CA0AC;margin-top:6px;}
  /* Linha de apoio abaixo do rótulo (ex.: "Desde 2000"). Menor e mais
     apagada de propósito: contextualiza o número sem competir com ele. */
  .stat .sub{
    font-size:calc(11px * var(--esc));color:#7E8290;margin-top:4px;
    letter-spacing:.08em;text-transform:uppercase;
  }

  /* AREAS */
  .areas-grid{
    display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
    background:var(--stone-300);
    border:1px solid var(--stone-300);
    margin-top:56px;
  }
  .area-card{
    background:var(--paper-50);
    padding:44px 40px;
    transition:background .3s ease;
    position:relative;
  }
  .area-card:hover{background:var(--paper-100);}
  .area-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px;}
  .area-icon{font-size:20px;color:var(--accent);}
  .area-code{
    font-family:var(--font-mono);font-size:calc(12px * var(--esc));color:var(--slate-500);letter-spacing:.05em;
  }
  .area-card h3{margin-bottom:12px;font-size:20px;}
  .area-card p{font-size:calc(14.5px * var(--esc));color:var(--slate-500);margin-bottom:20px;}
  .area-link{font-size:calc(13px * var(--esc));font-weight:600;color:var(--accent);}

  /* CTA IMAGE SECTION */
  .cta-image{
    position:relative;
    padding:140px 0;
    background:
      linear-gradient(160deg, rgba(18,10,13,.88) 0%, rgba(18,10,13,.94) 100%),
      url('../assets/img/office-interior.jpg') center 40%/cover no-repeat;
    text-align:left;
  }
  .cta-image-content{max-width:600px;}
  .cta-image-content h2{color:#fff;margin-bottom:32px;}

  /* ABOUT */
  .about-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;}
  .about-copy p{color:var(--slate-500);margin-bottom:18px;font-size:calc(15.5px * var(--esc));}
  h2 em, h1 em{color:var(--accent);font-style:italic;font-weight:400;}
  .pillars{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px;margin-top:40px;}
  .pillar{border-top:2px solid var(--accent-2);padding-top:14px;}
  .pillar h4{font-family:var(--font-body);font-size:14.5px;font-weight:700;color:var(--accent);margin-bottom:8px;}
  .pillar p{font-size:calc(13.5px * var(--esc));color:var(--slate-500);margin:0;}
  .about-photo{
    position:relative;
  }
  .about-photo img{border-radius:2px;width:100%;height:460px;object-fit:cover;filter:saturate(.85) contrast(1.05);}
  .photo-tag{
    position:absolute;bottom:-22px;left:-22px;
    background:var(--bg-alt);color:var(--text);
    border:1px solid var(--border);
    padding:20px 24px;
    font-family:var(--font-display);font-style:italic;font-size:calc(15px * var(--esc));line-height:1.4;
    max-width:230px;
    box-shadow:0 20px 40px var(--sombra);
  }
  .photo-tag strong{font-family:var(--font-display);font-size:30px;color:var(--accent);font-weight:600;font-style:normal;line-height:0;}

  /* TEAM */
  .team-lead{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:56px;}
  .team-card{
    background:var(--paper-100);
    border:1px solid var(--stone-300);
    overflow:hidden;
    transition:transform .3s ease, box-shadow .3s ease;
  }
  .team-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px var(--sombra);}
  .team-photo{width:100%;aspect-ratio:4/5;overflow:hidden;background:var(--ink-900);}
  .team-photo img{width:100%;height:100%;object-fit:cover;object-position:top center;filter:grayscale(.15) contrast(1.05);}
  .team-card h4{font-family:var(--font-display);font-size:17px;color:var(--slate-700);margin:20px 22px 8px;}
  .bio-short{font-size:calc(13.5px * var(--esc));color:var(--slate-500);margin:0 22px 14px;}
  .bio-toggle{
    display:flex;align-items:center;gap:6px;
    background:none;border:none;cursor:pointer;
    font-family:var(--font-body);font-size:12px;font-weight:600;
    color:var(--accent-2);text-transform:uppercase;letter-spacing:.05em;
    margin:0 22px 24px;padding:0;
  }
  .bio-toggle span{font-family:var(--font-mono);font-size:15px;transition:transform .3s ease;}
  .bio-toggle.active span{transform:rotate(45deg);}
  .bio-toggle.active{color:var(--accent);}
  .team-card p{font-size:calc(13.5px * var(--esc));color:var(--slate-500);margin:0 22px 24px;}

  /* Painel horizontal compartilhado — abre abaixo de toda a grade da equipe */
  .team-detail{
    margin-top:32px;
    background:var(--paper-100);
    border:1px solid var(--stone-300);
    position:relative;
    max-height:0;
    opacity:0;
    overflow:hidden;
    transition:max-height .5s ease, opacity .4s ease, margin-top .4s ease;
  }
  .team-detail.open{max-height:600px;opacity:1;}
  .team-detail[hidden]{display:block;} /* controlado via max-height, não via [hidden] visual */
  .team-detail-close{
    position:absolute;top:20px;right:20px;
    background:none;border:none;cursor:pointer;
    color:var(--slate-500);font-size:16px;
    width:32px;height:32px;display:flex;align-items:center;justify-content:center;
    transition:color .2s ease, transform .2s ease;
  }
  .team-detail-close:hover{color:var(--accent);transform:rotate(90deg);}
  .team-detail-inner{
    display:grid;grid-template-columns:220px 1fr;gap:40px;
    padding:40px 48px 40px 40px;
  }
  .team-detail-photo{width:220px;height:270px;overflow:hidden;border-radius:2px;flex:none;}
  .team-detail-photo img{width:100%;height:100%;object-fit:cover;object-position:top center;}
  .team-detail-text h4{font-family:var(--font-display);font-size:22px;color:var(--slate-700);margin-bottom:16px;}
  .team-detail-text p{font-size:calc(14.5px * var(--esc));color:var(--slate-500);line-height:1.75;margin-bottom:14px;}
  @media (max-width:760px){
    .team-detail-inner{grid-template-columns:1fr;padding:60px 24px 32px;}
    .team-detail-photo{width:140px;height:170px;}
  }

  /* BLOG */
  .blog-header{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;}
  .blog-all-link{font-size:calc(13px * var(--esc));font-weight:600;color:var(--accent);white-space:nowrap;padding-bottom:6px;}
  .blog-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;margin-top:56px;}
  .blog-card{
    border:1px solid var(--stone-300);background:var(--paper-50);
    display:flex;flex-direction:column;
    transition:box-shadow .3s ease, transform .3s ease;
  }
  .blog-card:hover{box-shadow:0 16px 32px var(--sombra);transform:translateY(-4px);}
  .blog-num{
    display:block;padding:28px 24px 0;
    font-family:var(--font-display);font-size:44px;font-weight:600;
    color:var(--accent-2);opacity:.55;line-height:1;
  }
  .blog-featured{grid-column:1 / -1;flex-direction:row;align-items:stretch;}
  .blog-featured .blog-num{font-size:76px;display:flex;align-items:center;padding:0 0 0 40px;}
  .blog-featured .blog-body{flex:1;padding:36px 40px 36px 24px;}
  .blog-featured h4{font-size:26px;}
  .blog-body{padding:8px 24px 26px;display:flex;flex-direction:column;flex:1;}
  .blog-tag{font-family:var(--font-mono);font-size:calc(11.5px * var(--esc));color:var(--accent-2);text-transform:uppercase;letter-spacing:.05em;}
  .blog-card h4{font-family:var(--font-display);font-size:18px;margin:10px 0 12px;color:var(--slate-700);}
  .blog-excerpt{font-size:calc(13.5px * var(--esc));color:var(--slate-500);margin-bottom:18px;line-height:1.6;}
  .blog-link{font-size:calc(13.5px * var(--esc));font-weight:600;color:var(--accent);margin-top:auto;}
  @media (max-width:760px){
    .blog-featured{flex-direction:column;}
    .blog-featured .blog-num{padding:24px 24px 0;font-size:44px;}
  }

  /* TESTIMONIALS */
  /* ---------------------------------------------------------------
     DEPOIMENTOS — bloco removido da página inicial em agosto de 2026
     por causa do Provimento 205/2021 da OAB. Os estilos ficam aqui,
     sem uso, para o caso de o escritório rever a decisão.
     --------------------------------------------------------------- */
  .testi-wrap{margin-top:56px;position:relative;}
  .testi-track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;}
  .testi-track::-webkit-scrollbar{height:4px;}
  .testi-track::-webkit-scrollbar-thumb{background:var(--stone-300);}
  .testi-card{
    scroll-snap-align:start;
    min-width:340px;
    background:var(--ink-900);color:#EDEAE0;
    padding:34px 30px;
  }
  .testi-stars{color:var(--brass-300);font-size:15px;letter-spacing:2px;margin-bottom:16px;}
  .testi-card p.quote{font-size:14.5px;color:#C9CBD2;margin-bottom:22px;}
  .testi-name{font-weight:600;font-size:14px;color:#fff;}
  .testi-role{font-size:12.5px;color:#8B8F9C;}
  .testi-note{font-size:12.5px;color:var(--slate-500);margin-top:18px;}

  /* FAQ CHAT */
  .faq-shell{
    max-width:760px;margin:56px auto 0;
    border:1px solid var(--stone-300);
    background:var(--paper-50);
    border-radius:4px;
    overflow:hidden;
  }
  .faq-header{
    background:var(--ink-900);color:#fff;
    padding:20px 26px;display:flex;align-items:center;gap:14px;
  }
  .faq-header .dot{width:9px;height:9px;border-radius:50%;background:var(--sage-600);}
  .faq-header strong{font-family:var(--font-display);font-size:16px;}
  .faq-header span{font-size:calc(12.5px * var(--esc));color:#9CA0AC;display:block;}
  .faq-body{padding:12px 0;}
  .faq-item{border-bottom:1px solid var(--stone-300);}
  .faq-item:last-child{border-bottom:none;}
  .faq-q{
    width:100%;text-align:left;background:none;border:none;cursor:pointer;
    padding:20px 26px;display:flex;justify-content:space-between;align-items:center;
    font-family:var(--font-body);font-weight:600;font-size:calc(15px * var(--esc));color:var(--slate-700);
  }
  .faq-q .plus{font-family:var(--font-mono);font-size:18px;color:var(--accent-2);transition:transform .25s ease;}
  .faq-item.open .plus{transform:rotate(45deg);}
  .faq-a{
    max-height:0;overflow:hidden;transition:max-height .3s ease;
    padding:0 26px;
  }
  .faq-item.open .faq-a{max-height:220px;padding:0 26px 22px;}
  .faq-a p{font-size:calc(14px * var(--esc));color:var(--slate-500);background:var(--paper-100);padding:14px 18px;border-radius:2px;}
  .faq-footer{
    padding:20px 26px;background:var(--paper-100);
    display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;
  }
  .faq-footer p{font-size:calc(13.5px * var(--esc));color:var(--slate-500);}

  /* CONTACT */
  .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;margin-top:56px;}
  .contact-info-item{display:flex;gap:16px;margin-bottom:28px;}
  .contact-info-item .ico{
    width:40px;height:40px;flex:none;border:1px solid var(--accent-2);
    color:var(--accent-2);display:flex;align-items:center;justify-content:center;
    font-family:var(--font-mono);font-size:14px;
  }
  .contact-info-item h4{font-size:14.5px;color:var(--accent);margin-bottom:4px;}
  .contact-info-item p, .contact-info-item a{font-size:calc(14px * var(--esc));color:var(--slate-500);}
  .map-embed{margin-top:8px;border:1px solid var(--stone-300);height:200px;overflow:hidden;}
  .map-embed iframe{width:100%;height:100%;border:0;filter:grayscale(.3) contrast(1.05);}
  form.contact-form{background:var(--ink-900);padding:40px;color:#fff;}
  .field{margin-bottom:20px;}
  .field label{display:block;font-size:calc(12.5px * var(--esc));font-family:var(--font-mono);color:#9CA0AC;margin-bottom:8px;text-transform:uppercase;letter-spacing:.04em;}
  .field input, .field textarea{
    width:100%;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.15);
    padding:13px 14px;color:#fff;font-family:var(--font-body);font-size:calc(14.5px * var(--esc));border-radius:2px;
  }
  .field input:focus, .field textarea:focus{outline:1.5px solid var(--brass-300);border-color:transparent;}
  .field textarea{resize:vertical;min-height:110px;}
  .form-note{font-size:calc(12.5px * var(--esc));color:#8B8F9C;margin-top:14px;}

  /* FOOTER */
  footer{background:var(--ink-900);color:#B9BCC6;padding:72px 0 28px;}
  .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:56px;}
  .footer-logo{margin-bottom:18px;}
  .footer-logo-img{height:68px;width:auto;}
  .footer-col h5{font-size:calc(12.5px * var(--esc));letter-spacing:.06em;text-transform:uppercase;color:#7C8090;margin-bottom:18px;font-family:var(--font-mono);}
  .footer-col li{margin-bottom:11px;font-size:calc(14px * var(--esc));}
  .footer-col a:hover{color:#fff;}
  .footer-bottom{
    border-top:1px solid rgba(255,255,255,.08);padding-top:24px;
    display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;
    font-size:calc(12.5px * var(--esc));color:#7C8090;
  }
  .social-row{display:flex;gap:16px;}

  /* Faixa de serviço do rodapé (painel e webmail). Fica propositalmente
     apagada: é atalho para quem trabalha no escritório, não chamada para
     o visitante. Ganha cor só ao passar o mouse. */
  .footer-admin{
    display:flex;flex-wrap:wrap;gap:22px;
    margin-bottom:22px;
    font-size:calc(12.5px * var(--esc));
  }
  .footer-admin a{
    display:inline-flex;align-items:center;gap:8px;
    color:#6B6F7D;transition:color .25s ease;
  }
  .footer-admin a:hover{color:var(--brass-300);}
  .footer-admin .ico-svg{color:inherit;}

  /* FLOAT WHATSAPP */
  .float-wa{
    position:fixed;bottom:26px;right:26px;z-index:999;
    background:#25D366;color:#fff;
    width:58px;height:58px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 8px 22px rgba(0,0,0,.25);
    font-size:26px;
    transition:transform .25s ease;
  }
  .float-wa:hover{transform:scale(1.08);}

  /* REVEAL */
  .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease, transform .7s ease;}
  .reveal.in{opacity:1;transform:translateY(0);}

  /* Passo intermediário: cinco colunas ficam estreitas demais antes de
     a tela chegar aos 980px, e os rótulos quebram em três linhas. */
  @media (max-width:1180px){
    .stats .wrap{grid-template-columns:repeat(3,1fr);}
    .stat:nth-child(3n+1){border-left:none;}
    .stat:nth-child(n+4){border-top:1px solid rgba(255,255,255,.08);}
  }
  @media (max-width:980px){
    .areas-grid{grid-template-columns:repeat(2,1fr);}
    .about-grid, .contact-grid{grid-template-columns:1fr;}
    .about-photo{order:-1;}
    .team-lead{grid-template-columns:1fr 1fr;}
    .blog-grid{grid-template-columns:1fr;}
    /* Com 5 números, a faixa quebra em linhas. As bordas precisam
       acompanhar: sem borda à esquerda em quem abre a linha, e uma
       borda em cima em quem cai para a linha de baixo. */
    .stats .wrap{grid-template-columns:1fr 1fr;}
    .stat{border-left:none;}
    .stat:nth-child(even){border-left:1px solid rgba(255,255,255,.08);}
    .stat:nth-child(n+3){border-top:1px solid rgba(255,255,255,.08);}
    .footer-grid{grid-template-columns:1fr 1fr;}
  }
  @media (max-width:1024px){
    nav.mainnav, .header-cta{display:none;}
    .burger{display:flex;}
    .logo-img{height:64px;}
    header.scrolled .logo-img{height:48px;}
  }
  @media (max-width:760px){
    .hero-seal{display:none;}
    .logo-img{height:42px;}
    .areas-grid{grid-template-columns:1fr;}
    .team-lead, .team-spec{grid-template-columns:1fr;}
    .pillars{grid-template-columns:1fr;}
    .footer-grid{grid-template-columns:1fr;}
    .section{padding:64px 0;}
  }
  @media (prefers-reduced-motion: reduce){
    .reveal{opacity:1;transform:none;transition:none;}
    html{scroll-behavior:auto;}
  }

  /* ============================================
     HOVER MICRO-INTERACTIONS — movimento no site
     ============================================ */

  /* Logo */
  .logo-img{transition:height .3s ease, transform .3s ease;}
  .logo:hover .logo-img{transform:scale(1.06);}
  .footer-logo-img{transition:transform .3s ease;}
  .footer-logo:hover .footer-logo-img{transform:scale(1.05) rotate(-1deg);}

  /* Header nav + WhatsApp button */
  nav.mainnav a{transition:color .25s ease;}
  nav.mainnav a:hover{color:var(--brass-300);}
  .btn{transition:all .3s ease, transform .25s ease;}
  .btn-outline:hover{transform:translateY(-2px);}
  .burger span{transition:background .25s ease, transform .25s ease;}
  .burger:hover span{background:var(--brass-300);}
  .burger:hover span:nth-child(1){transform:translateX(2px);}
  .burger:hover span:nth-child(3){transform:translateX(-2px);}

  /* Hero facts + stats */
  .hero-fact{transition:border-color .3s ease;}
  .hero-fact:hover{border-color:var(--brass-300);}
  .hero-fact strong{display:inline-block;transition:transform .3s ease;}
  .hero-fact:hover strong{transform:scale(1.08);}
  .stat{transition:background .3s ease, transform .3s ease;}
  .stat:hover{background:rgba(255,255,255,.03);transform:translateY(-3px);}
  .stat .num{transition:transform .3s ease;}
  .stat:hover .num{transform:scale(1.08);}

  /* Area cards */
  .area-card{transition:background .3s ease, transform .3s ease, box-shadow .3s ease;}
  .area-card:hover{transform:translateY(-5px);box-shadow:0 18px 36px var(--sombra);}
  .area-icon{display:inline-block;transition:transform .35s ease;}
  .area-card:hover .area-icon{transform:scale(1.2) rotate(-8deg);}
  .area-link{display:inline-flex;align-items:center;gap:4px;transition:transform .3s ease, color .3s ease;}
  .area-card:hover .area-link{transform:translateX(5px);color:var(--accent);}

  /* CTA image section — leve zoom no fundo ao passar o mouse */
  .cta-image{transition:background-size 1s ease;background-size:100%;}
  .cta-image:hover{background-size:108%;}
  .cta-image-content .btn-primary:hover{transform:translateY(-3px) scale(1.02);}

  /* About photo zoom */
  .about-photo-frame{overflow:hidden;border-radius:2px;}
  .about-photo-frame img{transition:transform .6s ease;}
  .about-photo-frame:hover img{transform:scale(1.05);}
  .photo-tag{transition:transform .3s ease;}
  .photo-tag:hover{transform:translateY(-4px);}

  /* Pillars */
  .pillar{transition:border-color .3s ease, transform .3s ease;}
  .pillar:hover{border-top-color:var(--accent);transform:translateY(-3px);}

  /* Team cards */
  .team-photo img{transition:transform .6s ease, filter .4s ease;}
  .team-card:hover .team-photo img{transform:scale(1.08);filter:grayscale(0) contrast(1.05);}
  .bio-toggle{transition:color .25s ease;}
  .bio-toggle:hover{color:var(--accent);}
  .bio-toggle:hover span{transform:rotate(90deg);}

  /* Blog cards */
  .blog-num{transition:transform .35s ease, opacity .35s ease;}
  .blog-card:hover .blog-num{transform:translateX(4px) scale(1.05);opacity:.8;}
  .blog-link{display:inline-flex;align-items:center;gap:4px;transition:transform .3s ease;}
  .blog-card:hover .blog-link{transform:translateX(5px);}
  .blog-all-link{transition:transform .3s ease, color .25s ease;display:inline-block;}
  .blog-all-link:hover{transform:translateX(4px);color:var(--accent-hover);}

  /* Testimonials */
  .testi-card{transition:transform .3s ease, box-shadow .3s ease;}
  .testi-card:hover{transform:translateY(-5px);box-shadow:0 18px 36px rgba(0,0,0,.4);}
  .testi-stars{display:inline-block;transition:transform .3s ease, letter-spacing .3s ease;}
  .testi-card:hover .testi-stars{transform:scale(1.08);letter-spacing:3px;}

  /* FAQ */
  .faq-q{transition:color .25s ease;}
  .faq-q:hover{color:var(--accent);}
  .faq-item:not(.open) .faq-q:hover .plus{transform:rotate(90deg);}
  .faq-footer .btn-primary:hover{transform:translateY(-3px) scale(1.02);}

  /* Contact */
  .contact-info-item .ico{transition:background .3s ease, color .3s ease, transform .3s ease;}
  .contact-info-item:hover .ico{background:var(--brass-500);color:var(--ink-900);transform:scale(1.1) rotate(-4deg);}
  .contact-info-item a{transition:color .25s ease;}
  .contact-info-item a:hover{color:var(--accent);}
  .field input, .field textarea{transition:border-color .25s ease, background .25s ease;}
  .field input:hover, .field textarea:hover{border-color:rgba(255,255,255,.32);}

  /* Footer */
  .footer-col a{display:inline-block;transition:color .25s ease, transform .25s ease;}
  .footer-col a:hover{transform:translateX(4px);}
  .social-row a{display:inline-block;transition:color .25s ease, transform .25s ease;}
  .social-row a:hover{color:#fff;transform:translateY(-3px);}

  /* Float WhatsApp — leve pulso contínuo além do hover */
  .float-wa{animation:wa-pulse 2.8s ease-in-out infinite;}
  .float-wa:hover{transform:scale(1.1);animation-play-state:paused;}
  @keyframes wa-pulse{
    0%,100%{box-shadow:0 8px 22px rgba(0,0,0,.25), 0 0 0 0 rgba(37,211,102,.35);}
    50%{box-shadow:0 8px 22px rgba(0,0,0,.25), 0 0 0 10px rgba(37,211,102,0);}
  }

  @media (prefers-reduced-motion: reduce){
    .float-wa{animation:none;}
    .about-photo-frame img, .team-photo img, .cta-image{transition:none;}
  }
  /* ============================================
     BLOG — página de listagem e artigos
     ============================================ */

  /* Mini header (hero reduzido) para páginas internas */
  .page-hero{
    position:relative;
    padding:170px 0 70px;
    background:linear-gradient(160deg, rgba(46,15,26,.95) 0%, rgba(18,10,13,.97) 100%);
    color:#fff;
  }
  .breadcrumb{font-family:var(--font-mono);font-size:calc(12px * var(--esc));color:#9C9490;letter-spacing:.04em;margin-bottom:18px;}
  .breadcrumb a{color:#9C9490;transition:color .2s ease;}
  .breadcrumb a:hover{color:var(--brass-300);}
  .page-hero h1{color:#fff;font-size:clamp(32px,4.4vw,52px);max-width:760px;}
  .page-hero .lead{color:#C9CBD2;max-width:600px;margin-top:18px;font-size:calc(16.5px * var(--esc));}

  /* Filtro de categorias (visual) */
  .blog-filters{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px;}
  .blog-filter{
    font-family:var(--font-mono);font-size:calc(12px * var(--esc));letter-spacing:.04em;
    padding:8px 16px;border:1px solid rgba(255,255,255,.18);border-radius:20px;
    color:#C9CBD2;transition:all .25s ease;cursor:pointer;
  }
  .blog-filter.active, .blog-filter:hover{border-color:var(--brass-300);color:var(--brass-300);}

  /* Grid de listagem (todos os artigos) */
  .blog-index-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:0;}
  .blog-index-grid .blog-card{display:flex;flex-direction:column;}
  .blog-index-grid .blog-num{padding:24px 24px 0;font-size:38px;}
  .blog-index-grid .blog-body{padding:8px 24px 26px;}
  .blog-date{font-family:var(--font-mono);font-size:calc(11.5px * var(--esc));color:var(--slate-500);margin-top:2px;display:block;}

  /* Artigo individual */
  .article-body{max-width:720px;margin:0 auto;}
  .article-meta{display:flex;gap:18px;align-items:center;flex-wrap:wrap;color:#9C9490;font-size:calc(13px * var(--esc));font-family:var(--font-mono);margin-top:10px;}
  .article-content{padding:64px 0 40px;}
  .article-content .wrap{max-width:760px;}
  .article-content h2{font-size:26px;margin:40px 0 16px;}
  .article-content h3{font-size:19px;margin:32px 0 12px;color:var(--slate-700);}
  .article-content p{font-size:calc(16px * var(--esc));line-height:1.8;color:var(--slate-500);margin-bottom:20px;}
  .article-content ul{margin:0 0 20px 20px;}
  .article-content li{font-size:calc(16px * var(--esc));line-height:1.8;color:var(--slate-500);margin-bottom:10px;list-style:disc;}
  .article-content strong{color:var(--slate-700);}
  .article-divider{border:none;border-top:1px solid var(--stone-300);margin:48px 0;}
  .article-cta{
    background:var(--paper-100);border:1px solid var(--stone-300);
    padding:36px 40px;text-align:center;margin-top:16px;
  }
  .article-cta h3{margin-bottom:10px;}
  .article-cta p{color:var(--slate-500);margin-bottom:22px;font-size:calc(14.5px * var(--esc));}
  .article-tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px;}
  .article-tag{
    font-family:var(--font-mono);font-size:calc(11.5px * var(--esc));color:var(--accent-2);
    border:1px solid var(--stone-300);padding:5px 12px;border-radius:20px;
  }
  .related-articles{padding:64px 0 96px;}
  .related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:32px;}

  @media (max-width:980px){
    .blog-index-grid{grid-template-columns:1fr 1fr;}
    .related-grid{grid-template-columns:1fr 1fr;}
  }
  @media (max-width:760px){
    .blog-index-grid{grid-template-columns:1fr;}
    .related-grid{grid-template-columns:1fr;}
    .page-hero{padding:150px 0 50px;}
    .article-content{padding:44px 0 24px;}
  }

  /* ==================================================================
     ADIÇÕES DA VERSÃO COM PAINEL (conteúdo vindo do banco de dados)
     ================================================================== */

  /* Campo-armadilha anti-robô: invisível para pessoas, presente no HTML */
  .hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

  .muted{color:var(--slate-500);font-size:calc(14.5px * var(--esc));}

  /* Registro na OAB no cartão da equipe */
  .team-oab{
    font-family:var(--font-mono);font-size:calc(11.5px * var(--esc));color:var(--accent-2);
    letter-spacing:.04em;margin:2px 0 10px;
  }

  /* Formulário de contato: o <select> agora é estilizado pelo CSS */
  .contact-form select{
    width:100%;background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.15);
    padding:13px 14px;color:#fff;
    font-family:var(--font-body);font-size:calc(14.5px * var(--esc));border-radius:2px;
  }
  .contact-form select option{color:#000;}

  /* Filtros do blog viraram links de verdade */
  a.blog-filter{cursor:pointer;transition:color .2s ease,border-color .2s ease;}
  a.blog-filter:hover{color:var(--brass-300);}

  /* Cartões do blog com imagem de capa */
  .blog-cover{overflow:hidden;aspect-ratio:16/9;background:var(--paper-100);}
  .blog-cover img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
  .blog-card:hover .blog-cover img{transform:scale(1.04);}
  .blog-meta-line{
    display:block;font-family:var(--font-mono);font-size:calc(11.5px * var(--esc));
    color:var(--slate-500);margin:14px 0 6px;
  }
  .blog-grid-all{grid-template-columns:repeat(3,1fr);}

  /* Imagem de capa dentro do artigo */
  .article-cover{width:100%;margin-bottom:36px;border:1px solid var(--stone-300);}
  .article-body img{margin:28px auto;border:1px solid var(--stone-300);}
  .article-body blockquote{
    border-left:2px solid var(--accent-2);
    padding:4px 0 4px 22px;margin:28px 0;
    color:var(--slate-500);font-style:italic;
  }
  .article-body code{
    font-family:var(--font-mono);font-size:calc(13px * var(--esc));
    background:var(--code-bg);padding:2px 6px;border-radius:2px;
  }
  .article-body ol{list-style:decimal;padding-left:22px;margin:18px 0;}
  .article-body ol li{margin-bottom:10px;}

  .article-related{margin-top:72px;padding-top:56px;border-top:1px solid var(--stone-300);}
  .article-related .blog-grid{margin-top:24px;}

  /* Paginação */
  .pagination{display:flex;gap:8px;justify-content:center;margin-top:56px;}
  .page-link{
    min-width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;
    border:1px solid var(--stone-300);font-family:var(--font-mono);font-size:calc(13px * var(--esc));
    color:var(--slate-500);transition:all .25s ease;
  }
  .page-link:hover{border-color:var(--accent-2);color:var(--accent);}
  .page-link.active{background:var(--brass-500);border-color:var(--brass-500);color:var(--ink-900);font-weight:600;}

  @media (max-width:980px){
    .blog-grid-all{grid-template-columns:1fr 1fr;}
  }
  @media (max-width:700px){
    .blog-grid-all{grid-template-columns:1fr;}
  }

  /* ==================================================================
     ÍCONES (SVG embutido — ver app/icons.php)
     ================================================================== */

  /* O ícone herda a cor do texto ao lado e acompanha o alinhamento da
     linha, então nunca "pula" em relação à palavra. */
  .ico-svg{
    display:inline-block;
    vertical-align:middle;
    flex:none;
  }

  /* Redes sociais no rodapé: ícone + nome, lado a lado */
  .social-row{display:flex;gap:22px;flex-wrap:wrap;}
  .social-row a{
    display:inline-flex;align-items:center;gap:8px;
    font-size:calc(13.5px * var(--esc));
    transition:color .25s ease, transform .25s ease;
  }
  .social-row a:hover{color:var(--brass-300);transform:translateY(-3px);}
  .social-row a .ico-svg{transition:color .25s ease;}

  /* Coluna "Atendimento" no rodapé: ícone + texto alinhados pelo topo,
     para endereços de duas linhas não ficarem tortos */
  .footer-col-icons ul li{margin-bottom:10px;}
  .footer-col-icons a,
  .footer-col-icons .footer-line{
    display:inline-flex;align-items:flex-start;gap:9px;
    line-height:1.5;
  }
  .footer-col-icons .ico-svg{margin-top:3px;color:var(--brass-500);}
  .footer-col-icons a:hover .ico-svg{color:var(--brass-300);}

  /* Botão flutuante do WhatsApp: agora o logo da rede, não um telefone */
  .float-wa .ico-svg{color:#fff;}

  /* Seção Contato: o SVG ocupa o lugar do antigo caractere dentro do quadro */
  .contact-info-item .ico .ico-svg{display:block;}

  /* Aviãozinho do botão "Enviar mensagem": ao passar o mouse, ele decola
     um pouquinho na diagonal — o mesmo movimento que o clique sugere. */
  .btn-enviar .ico-svg{transition:transform .28s ease;}
  .btn-enviar:hover .ico-svg{transform:translate(3px,-3px);}

  @media (prefers-reduced-motion: reduce){
    .btn-enviar:hover .ico-svg{transform:none;}
  }

  /* Logo do rodapé: maior, aproveitando a largura da coluna.
     Dimensionado pela LARGURA (não por altura fixa) para casar com o
     parágrafo logo abaixo, que tem 260px — os dois passam a alinhar pela
     mesma borda direita, e em telas estreitas a imagem encolhe junto em vez
     de estourar a coluna. */
  .footer-logo{margin-bottom:22px;}
  .footer-logo-img{
    width:100%;
    max-width:260px;
    height:auto;
  }

  @media (max-width:760px){
    /* Numa coluna só, o logo respira melhor um pouco menor */
    .footer-logo-img{max-width:220px;}
  }

  /* ==================================================================
     REDES SOCIAIS NO CABEÇALHO (só ícone, sem o nome)
     ================================================================== */
  .header-social{display:flex;align-items:center;gap:14px;margin-right:4px;}
  .header-social a{
    color:rgba(255,255,255,.75);
    display:inline-flex;
    transition:color .25s ease, transform .25s ease;
  }
  .header-social a:hover{color:var(--brass-300);transform:translateY(-2px);}

  /* ==================================================================
     AVISO DE COOKIES
     Aparece por baixo, sem bloquear a leitura da página. Um aviso que
     cobre a tela inteira faz a pessoa clicar em "aceitar" só para se
     livrar dele — e um consentimento assim não vale nada.
     ================================================================== */
  .cookie-aviso{
    position:fixed;left:0;right:0;bottom:0;z-index:1200;
    background:rgba(27,14,18,.97);
    border-top:1px solid var(--brass-500);
    box-shadow:0 -8px 30px rgba(0,0,0,.4);
    transform:translateY(100%);
    transition:transform .32s cubic-bezier(.4,0,.2,1);
  }
  .cookie-aviso.visivel{transform:translateY(0);}
  .cookie-inner{
    max-width:var(--max-w);margin:0 auto;padding:20px 28px;
    display:flex;align-items:center;justify-content:space-between;
    gap:28px;flex-wrap:wrap;
  }
  .cookie-texto{flex:1;min-width:280px;}
  .cookie-texto strong{
    display:block;font-family:var(--font-display);font-size:16px;
    color:var(--on-deep);margin-bottom:5px;
  }
  .cookie-texto p{font-size:calc(13.5px * var(--esc));color:var(--on-deep-3);line-height:1.6;margin:0;}
  .cookie-acoes{display:flex;gap:12px;flex-wrap:wrap;}
  .cookie-acoes .btn{padding:12px 24px;font-size:12px;}

  /* Botão "Só o essencial": presente e legível, sem competir com o
     "Aceitar". Recusar precisa ser tão fácil quanto aceitar. */
  .btn-ghost-light{
    border-color:rgba(255,255,255,.4);color:var(--on-deep);background:transparent;
  }
  .btn-ghost-light:hover{background:rgba(255,255,255,.08);border-color:#fff;}

  .link-cookies{
    color:var(--on-deep-4);text-decoration:underline;
    text-underline-offset:3px;transition:color .25s ease;
  }
  .link-cookies:hover{color:var(--brass-300);}

  /* O botão flutuante do WhatsApp sobe quando o aviso está na tela,
     para um não tapar o outro no celular. */
  .cookie-aviso.visivel ~ .float-wa{bottom:150px;}

  @media (max-width:760px){
    .cookie-inner{padding:18px 20px;gap:16px;}
    .cookie-acoes{width:100%;}
    .cookie-acoes .btn{flex:1;justify-content:center;}
    .header-social{display:none;}
  }
  @media (prefers-reduced-motion: reduce){
    .cookie-aviso{transition:none;}
  }

  /* Ícone da rede na tabela do painel */
  .rede-ico{color:var(--brass-500);display:inline-flex;}

  /* ==================================================================
     TEMA CLARO — ajustes finais

     Duas coisas precisam de atenção especial ao trocar o tema:

     1. Os trechos que ficam sobre FOTO ou sobre o vinho da marca são
        escuros nos dois temas. Ali o dourado tem de continuar CLARO,
        senão o texto some. Estas regras vêm depois das genéricas de
        propósito, para vencer no cascata.
     2. No claro, cartão branco sobre fundo branco fica sem contorno.
        Uma sombra discreta resolve melhor que uma borda mais forte.
     ================================================================== */

  /* 1. Sempre sobre fundo escuro */
  .hero .eyebrow,
  .page-hero .eyebrow,
  .cta-image .eyebrow{color:var(--brass-300);}
  .hero .eyebrow::before,
  .page-hero .eyebrow::before,
  .cta-image .eyebrow::before{background:var(--brass-300);}
  .cta-image h2 em,
  .page-hero h1 em{color:var(--brass-300);}

  /* 2. Respiro dos cartões no tema claro */
  html[data-tema="claro"] .faq-shell{box-shadow:0 12px 32px rgba(46,15,26,.07);}
  /* O número do artigo é decorativo, mas com .55 de opacidade sobre
     branco ele quase desaparece. No claro precisa de mais corpo. */
  html[data-tema="claro"] .blog-num{opacity:.72;}
  html[data-tema="claro"] .team-photo{background:var(--bg-alt);}
  html[data-tema="claro"] .about-photo img{filter:saturate(.92) contrast(1.02);}
  html[data-tema="claro"] .map-embed iframe{filter:grayscale(.15) contrast(1.02);}

  /* ==================================================================
     BOTÃO DE TROCA DE TEMA

     Fica no cabeçalho, que é escuro nos dois temas — por isso o botão
     não muda de cor junto com a página. Mostra o ícone do tema para o
     qual vai mudar, não o do tema atual: é o que a pessoa espera ao
     olhar um botão.
     ================================================================== */
  .tema-toggle{
    width:38px;height:38px;flex:none;
    display:inline-flex;align-items:center;justify-content:center;
    background:none;cursor:pointer;
    border:1px solid rgba(255,255,255,.28);
    border-radius:50%;
    color:#EDEAE0;
    transition:color .25s ease, border-color .25s ease, transform .25s ease;
  }
  .tema-toggle:hover{color:var(--brass-300);border-color:var(--brass-300);transform:translateY(-2px);}
  .tema-toggle:focus-visible{outline:2px solid var(--brass-300);outline-offset:3px;}

  /* No escuro aparece o sol (clique = clarear); no claro, a lua. */
  .tema-toggle .ico-lua{display:none;}
  html[data-tema="claro"] .tema-toggle .ico-sol{display:none;}
  html[data-tema="claro"] .tema-toggle .ico-lua{display:block;}

  /* O botão e o menu-sanduíche andam juntos na ponta direita. */
  .header-acoes{display:flex;align-items:center;gap:14px;}

  /* ==================================================================
     BOTÕES QUE SÓ APARECEM COM A BARRA FIXA

     No alto da página o cabeçalho fica só com a logo e o menu. O botão
     do WhatsApp e o de tema entram quando a barra encolhe e gruda no
     topo (classe .scrolled, posta por js/main.js).

     POR QUÊ: com o item "Livros e Publicações" no menu, os dois botões
     não cabem junto da logo em tela de notebook — o de tema ficava
     cortado na borda. Perto do topo eles fazem pouca falta: o botão
     flutuante do WhatsApp já está na tela e o CTA verde do topo também.

     Note que estas regras só ESCONDEM. Não existe uma regra para
     mostrar de volta, e isso é de propósito: abaixo de 1024px o botão
     do WhatsApp é escondido pelo menu-sanduíche, e uma regra do tipo
     "header.scrolled .header-cta{display:inline-flex}" venceria aquela
     por especificidade — o botão voltaria a aparecer no celular.
     ================================================================== */
  header:not(.scrolled) .header-cta,
  header:not(.scrolled) .tema-toggle{display:none;}

  /* Entram com uma aparecida suave. Só opacidade: animar o transform
     apagaria o leve levantar que os dois têm no hover. */
  header.scrolled .header-cta,
  header.scrolled .tema-toggle{animation:header-acoes-entra .3s ease;}

  @keyframes header-acoes-entra{from{opacity:0;}to{opacity:1;}}

  @media (prefers-reduced-motion: reduce){
    .tema-toggle{transition:none;}
    .tema-toggle:hover{transform:none;}
    header.scrolled .header-cta,
    header.scrolled .tema-toggle{animation:none;}
  }

  /* ==================================================================
     LIVROS E PUBLICAÇÕES

     A forma é proposital: LISTA, não grade de cartões. O blog usa grade
     de cartões numerados; se esta página usasse o mesmo desenho, as duas
     seções se confundiriam — que é justamente o risco desta adição.

     Aqui cada item é uma linha bibliográfica: capa à esquerda, dados à
     direita, ações que SAEM do site. É a mesma forma de uma referência
     de currículo, e o olho reconhece isso na hora.
     ================================================================== */
  .pub-lista{
    list-style:none;
    display:flex;flex-direction:column;
    gap:1px;
    background:var(--border);
    border:1px solid var(--border);
  }
  .pub-item{
    display:grid;grid-template-columns:132px 1fr;gap:32px;
    background:var(--bg);
    padding:34px 36px;
    transition:background .3s ease;
  }
  .pub-item:hover{background:var(--bg-alt);}

  .pub-capa{
    width:132px;
    aspect-ratio:3/4;
    overflow:hidden;
    border:1px solid var(--border);
    background:var(--bg-alt);
    display:flex;align-items:center;justify-content:center;
  }
  .pub-capa img{width:100%;height:100%;object-fit:cover;}
  /* Sem capa, a inicial segura o alinhamento da lista. */
  .pub-capa-vazia{
    font-family:var(--font-display);
    font-size:44px;font-weight:600;
    color:var(--accent);opacity:.5;
  }

  .pub-tipo{
    display:inline-block;
    font-family:var(--font-mono);
    font-size:calc(11px * var(--esc));
    letter-spacing:.1em;text-transform:uppercase;
    color:var(--accent-2);
    margin-bottom:10px;
  }
  .pub-titulo{
    font-family:var(--font-display);
    font-size:calc(21px * var(--esc));
    line-height:1.25;
    color:var(--text);
    margin-bottom:4px;
  }
  .pub-subtitulo{
    font-family:var(--font-display);
    font-size:calc(15.5px * var(--esc));
    font-style:italic;font-weight:400;
    color:var(--text-2);
    margin-bottom:12px;
  }
  .pub-autores{
    font-size:calc(14px * var(--esc));
    color:var(--text);
    font-weight:600;
    margin-bottom:2px;
  }
  /* A referência bibliográfica em fonte de máquina: é o detalhe que faz
     a lista parecer catálogo, e não post de blog. */
  .pub-ref{
    font-family:var(--font-mono);
    font-size:calc(12.5px * var(--esc));
    color:var(--text-2);
    margin-bottom:16px;
  }
  .pub-resumo p{
    font-size:calc(14.5px * var(--esc));
    color:var(--text-2);
    margin-bottom:12px;
    max-width:62em;
  }
  .pub-resumo p:last-child{margin-bottom:0;}

  .pub-acoes{
    display:flex;align-items:center;gap:22px;flex-wrap:wrap;
    margin-top:20px;
  }
  .btn-sm{padding:11px 20px;font-size:calc(12px * var(--esc));}
  .pub-link{
    display:inline-flex;align-items:center;gap:6px;
    font-size:calc(13.5px * var(--esc));font-weight:600;
    color:var(--accent);
    transition:color .25s ease, transform .25s ease;
  }
  .pub-link:hover{color:var(--accent-hover);transform:translateX(3px);}

  .pub-rodape{
    margin-top:40px;padding-top:26px;
    border-top:1px solid var(--border);
  }
  .pub-rodape .pub-link{display:inline-flex;}

  @media (max-width:760px){
    .pub-item{grid-template-columns:92px 1fr;gap:20px;padding:24px 20px;}
    .pub-capa{width:92px;}
    .pub-capa-vazia{font-size:32px;}
    .pub-acoes{gap:14px;}
  }

  /* ------------------------------------------------------------------
     FAIXA NA PÁGINA INICIAL
     Mora dentro da seção Equipe. Só capas e títulos — o suficiente para
     dizer "esta gente publica", sem virar um segundo bloco de conteúdo.
     ------------------------------------------------------------------ */
  .pub-faixa{
    margin-top:48px;padding-top:32px;
    border-top:1px solid var(--border);
  }
  .pub-faixa-topo{
    display:flex;align-items:center;justify-content:space-between;
    gap:20px;flex-wrap:wrap;margin-bottom:24px;
  }
  .pub-faixa-lista{
    list-style:none;
    display:grid;grid-template-columns:repeat(4,1fr);gap:28px;
  }
  .pub-faixa-lista a{
    display:flex;flex-direction:column;gap:10px;
  }
  .pub-faixa-capa{
    width:100%;max-width:110px;
    aspect-ratio:3/4;
    overflow:hidden;
    border:1px solid var(--border);
    background:var(--bg-alt);
    display:flex;align-items:center;justify-content:center;
    transition:transform .35s ease, border-color .25s ease;
  }
  .pub-faixa-capa img{width:100%;height:100%;object-fit:cover;}
  .pub-faixa-lista a:hover .pub-faixa-capa{
    transform:translateY(-4px);border-color:var(--accent);
  }
  .pub-faixa-nome{
    font-family:var(--font-display);
    font-size:calc(15px * var(--esc));
    line-height:1.3;color:var(--text);
  }
  .pub-faixa-ref{
    font-family:var(--font-mono);
    font-size:calc(11.5px * var(--esc));
    color:var(--text-2);
  }
  @media (max-width:980px){
    .pub-faixa-lista{grid-template-columns:repeat(2,1fr);}
  }
  @media (max-width:520px){
    .pub-faixa-lista{grid-template-columns:1fr 1fr;gap:18px;}
  }

  @media (prefers-reduced-motion: reduce){
    .pub-link:hover{transform:none;}
    .pub-faixa-lista a:hover .pub-faixa-capa{transform:none;}
  }

  /* ==================================================================
     COLUNA DO ARTIGO EM TELAS GRANDES

     Fica aqui, no fim, porque precisa vir depois de
     .article-content .wrap{max-width:760px} para valer.

     Com o texto maior, manter 760px deixaria a linha curta demais. A
     coluna cresce menos que o texto de propósito: a leitura fica
     confortável perto de 65 caracteres por linha, não quanto mais
     largo melhor.
     ================================================================== */
  @media (min-width:1920px){
    .article-content .wrap{max-width:820px;}
  }
  @media (min-width:2400px){
    .article-content .wrap{max-width:860px;}
  }

  /* Redes no rodapé em grade de 2 colunas: com 3 ou 4 redes, a quebra
     natural deixava uma sozinha na segunda linha. A grade mantém o bloco
     alinhado independentemente de quantas redes existirem. */
  .social-row{
    display:grid;
    grid-template-columns:repeat(2, auto);
    justify-content:start;
    gap:12px 24px;
  }
  .social-row a{white-space:nowrap;}

  /* Uma ou duas redes cabem numa linha só */
  .social-row:has(a:only-child){grid-template-columns:auto;}

  @media (max-width:520px){
    .social-row{grid-template-columns:auto;}
  }

  /* ------------------------------------------------------------------
     CABEÇALHO COM OS ÍCONES DE REDE
     Acrescentar ícones ao topo tira espaço do menu. Sem tratamento, um
     item longo como "ÁREAS DE ATUAÇÃO" quebra em duas linhas e desalinha
     a barra inteira. Duas medidas resolvem:
     ------------------------------------------------------------------ */

  /* 1. Nenhum item do menu quebra no meio */
  nav.mainnav a{white-space:nowrap;}

  /* 2. O espaçamento cede antes de o texto quebrar.
        A logo também encolhe aqui: com o item "Livros e Publicações" no
        menu (que só aparece quando há alguma publicação cadastrada), os
        260px da logo em tamanho cheio não cabem mais junto do menu e do
        botão do WhatsApp dentro dos 1180px do .wrap. */
  @media (max-width:1400px){
    .header-right{gap:24px;}
    nav.mainnav ul{gap:22px;}
    .logo-img{height:78px;}
    header.scrolled .logo-img{height:54px;}
  }
  @media (max-width:1240px){
    .header-right{gap:18px;}
    nav.mainnav ul{gap:16px;}
    .header-social{gap:11px;}
    .header-cta{padding:13px 20px;}
  }

  /* 3. Abaixo disso os ícones saem do topo — eles são um extra, o menu e
        o botão do WhatsApp não são. Continuam todos no rodapé. */
  @media (max-width:1150px){
    .header-social{display:none;}
  }