/* Torres Soares Advocacia — tema claro e botão de alternância
 *
 * Direção "Platinum Executive": pérola, platina, prata, grafite e azul-marinho.
 * A sofisticação vem da hierarquia entre superfícies, das linhas finas de 1px
 * em prata e do contraste controlado — não de efeito. Nenhuma medida, margem,
 * espaçamento, posição, geometria ou tipografia é alterada aqui: só cor,
 * gradação, sombra e transparência.
 *
 * Este arquivo NÃO altera o tema escuro. Ele carrega depois de styles.css e
 * redefine os mesmos tokens apenas quando o elemento raiz traz
 * data-theme="light". Sem esse atributo, nada aqui se aplica e o site fica
 * exatamente como sempre foi — o escuro continua sendo o padrão.
 *
 * A escolha de redefinir os tokens existentes, em vez de criar nomes novos,
 * é deliberada: styles.css tem 586 usos de var(), e renomeá-los seria uma
 * refatoração fora do escopo desta tarefa.
 */

/* ==================================================================
   1. Paleta — os mesmos tokens, outros valores

   Escada de superfícies, da mais clara à mais estruturada:
     pérola      #FCFCFA   fundo principal
     branco frio #F7F8F9   cards
     platina gelo#F1F3F4   seções alternadas
     platina     #E8EBEC   blocos e hover de card
     platina cl. #E3E7E9   rodapé
   Metais:
     prata polida #D3D9DD
     prata        #C9D0D5   bordas
     aço luminoso #BAC4CA
     aço azulado  #91A8B5
   Tinta:
     grafite metálico #303A42
     cinza-azulado    #566574
     marinho profundo #103B5F
     azul institucional #1F64A3
     azul técnico       #367FAE   (só linha e grafismo, nunca texto corrido)

   Contrastes medidos contra a superfície mais escura da escada (#E3E7E9,
   do rodapé) e contra a pérola: grafite 9.3/11.3, --cream-soft 6.4/7.8,
   --cream-mute 4.8/5.8, --cream-dim 4.6/5.5, azul 5.0/6.0, marinho 9.3/11.3.
   Todos acima de 4.5:1. Prata e aço só pintam linha, nunca texto.
   ================================================================== */
:root[data-theme="light"] {
  /* Superfícies — cinco degraus, nunca o mesmo branco duas vezes */
  --bg:           #FCFCFA;   /* pérola          — fundo principal   */
  --bg-1:         #F1F3F4;   /* platina gelo    — seções alternadas */
  --bg-2:         #E8EBEC;   /* platina         — blocos            */
  --bg-card:      #F7F8F9;   /* branco frio     — cards             */
  --bg-card-h:    #E8EBEC;
  --bg-deeper:    #E3E7E9;   /* platina clara   — rodapé            */

  /* Azuis institucionais */
  --petrol:       #1F64A3;
  --petrol-soft:  #367FAE;   /* azul técnico */
  --petrol-deep:  #103B5F;   /* azul-marinho profundo */

  /* Tinta — do grafite metálico ao cinza-azulado */
  --cream:        #303A42;
  --cream-soft:   #45525E;
  --cream-mute:   #566574;
  --cream-dim:    #5C6875;

  /* Acento — no claro, o âmbar dá lugar ao azul institucional.
     O nome do token permanece por causa dos 98 usos em styles.css. */
  --gold:         #1F64A3;
  --gold-bright:  #103B5F;
  --gold-deep:    #103B5F;
  --gold-soft:    rgba(31, 100, 163, 0.07);
  --gold-glow:    rgba(31, 100, 163, 0.16);

  /* Linhas — o filete comum é grafite a 10%; onde styles.css já pede uma
     borda visível, ela passa a prata. As duas medem 1px, como antes. */
  --hair:         rgba(48, 58, 66, 0.10);
  --hair-strong:  #C9D0D5;
  --hair-gold:    rgba(31, 100, 163, 0.34);
}

/* Os campos do formulário usam --hair-strong como contorno, e é o contorno
   que identifica o campo. A prata delicada dos cards renderia 1.6:1 ali;
   aqui o mesmo desenho de 1px recebe um aço mais firme, 3.1:1 sobre o
   branco frio do campo, que é o mínimo da regra de contraste não textual. */
:root[data-theme="light"] .field input,
:root[data-theme="light"] .field textarea,
:root[data-theme="light"] .field select {
  border-color: #98A4AC;
}

/* ==================================================================
   2. Cabeçalho — pérola sobre platina, com o desfoque que já existia
   ================================================================== */
:root[data-theme="light"] .site-header {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.90) 0%, rgba(236, 237, 239, 0.86) 100%);
  border-bottom-color: #D4D7DA;
}

/* Idioma ativo: a pílula passa a ter fundo azul, então o texto sobre ela
   precisa ser branco — no escuro era quase preto sobre âmbar. */
:root[data-theme="light"] .lang-switch a.is-active,
:root[data-theme="light"] .mobile-lang a.is-active {
  color: #FFFFFF;
}

/* O botão do cabeçalho é o único que não usa o par padrão do .btn-primary:
   ele pinta o fundo com --petrol-deep e o texto com --cream. No escuro isso
   é creme sobre petróleo; no claro os dois viraram tons escuros e o texto
   sumiria. Branco sobre o marinho #123F68 rende 10.8:1. */
:root[data-theme="light"] .header-cta.btn-primary,
:root[data-theme="light"] .header-cta.btn-primary:hover,
:root[data-theme="light"] .header-cta.btn-primary:focus-visible {
  color: #FFFFFF;
}

/* ==================================================================
   3. Hero claro — platina polida sob luz arquitetônica

   A fotografia é a mesma, no mesmo arquivo, enquadramento e dimensões.
   Todo o tratamento é CSS, distribuído pelas quatro camadas do .hero-bg e
   por pseudo-elementos delas — nenhum nó novo, nenhuma medida alterada.

   O desenho da luz foi tirado da própria fotografia, medida em uma grade de
   12x8 sobre o mesmo enquadramento de 1440x900 (background-size: cover,
   centro). Luminância média por célula, 0 = preto, 1 = branco:

       .40 .59 .72 .82 .91 .91 .90 .86 .71 .68 .52 .39
       .66 .84 .90 .61 .81 .91 .91 .91 .75 .47 .32 .28
       .78 .74 .32 .26 .39 .67 .92 .92 .92 .80 .46 .11
       .15 .10 .20 .24 .25 .40 .71 .49 .77 .91 .72 .32
       .04 .06 .21 .20 .19 .27 .46 .41 .36 .91 .77 .37
       .12 .09 .07 .12 .12 .11 .18 .38 .14 .52 .67 .19
       .21 .11 .12 .07 .09 .11 .10 .09 .05 .09 .62 .45
       .10 .06 .06 .11 .07 .07 .07 .07 .05 .04 .14 .61

   Daí saem os três fatos que orientam tudo: o céu ocupa o alto ao centro e
   chega a 0.92; existe uma fresta luminosa vertical à direita, em x ~ 79%,
   que desce até 60% da altura; e a metade esquerda abaixo de y ~ 38% é a
   parte mais escura da imagem, entre 0.04 e 0.25 — justamente onde ficam o
   título e o texto.

   As arestas dominantes, por quadrante (Sobel, ângulo da aresta em tela):
     esquerda alta e central .... 127°   (a mais forte de todas)
     alto e coluna da esquerda .. 142°
     torres centrais ............  82°   (quase vertical)
     torres da direita ..........  52°

   Os reflexos e as linhas finas seguem esses quatro ângulos. É isso que os
   faz parecer luz sobre vidro, e não mancha branca solta.
   ================================================================== */

/* --- 3.1 a fotografia ------------------------------------------------
   O tom metálico não vem de um filtro forte, que achataria a imagem, e sim
   de três gradientes fundidos em soft-light dentro do próprio elemento.
   O soft-light levanta muito os meios-tons e quase nada as altas luzes: é
   essa curva que transforma cinza fosco em platina, sem estourar o céu.
   O primeiro gradiente é a luz que desce do alto e vaza pela fresta da
   direita; o segundo concentra essa fresta; o terceiro dá a queda vertical
   de pérola a grafite. Só então entra um ajuste moderado de brilho e
   contraste — 1.06 de contraste, não menos, porque é o contraste que faz o
   metal parecer polido. */
:root[data-theme="light"] .hero-image {
  background-image:
    radial-gradient(56% 44% at 68% 20%,
      rgba(255, 255, 255, 0.50) 0%,
      rgba(255, 255, 255, 0.20) 44%,
      rgba(255, 255, 255, 0) 74%),
    radial-gradient(26% 50% at 79% 40%,
      rgba(252, 252, 250, 0.56) 0%,
      rgba(241, 243, 244, 0.20) 46%,
      rgba(241, 243, 244, 0) 76%),
    linear-gradient(178deg,
      rgba(255, 255, 255, 0.34) 0%,
      rgba(241, 243, 244, 0.46) 30%,
      rgba(186, 196, 202, 0.30) 58%,
      rgba(48, 58, 66, 0.32) 84%,
      rgba(16, 59, 95, 0.38) 100%),
    url("https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=1920&q=80&auto=format&fit=crop");
  background-blend-mode: soft-light, soft-light, soft-light, normal;
  filter: saturate(0.32) contrast(1.12) brightness(1.02);
}

/* --- 3.2 atmosfera ---------------------------------------------------
   A malha mantém geometria, desfoque e a animação meshMove de 24s. Só as
   quatro manchas trocam de cor: azul técnico, platina e aço azulado. */
:root[data-theme="light"] .hero-mesh {
  background:
    radial-gradient(35% 40% at 78% 20%, rgba(54, 127, 174, 0.12), transparent 70%),
    radial-gradient(40% 50% at 15% 30%, rgba(211, 217, 221, 0.46), transparent 65%),
    radial-gradient(60% 60% at 50% 90%, rgba(16, 59, 95, 0.07), transparent 70%),
    radial-gradient(45% 45% at 90% 80%, rgba(145, 168, 181, 0.28), transparent 70%);
}

/* A trama inverte o sinal: pontos de grafite sobre claro, no mesmo passo de
   28px e com a mesma máscara elíptica. */
:root[data-theme="light"] .hero-dots {
  background-image: radial-gradient(rgba(48, 58, 66, 0.075) 1px, transparent 1px);
}

/* A vinheta deixa de escurecer as bordas e passa a fechá-las em platina —
   uma moldura, não um escurecimento. */
:root[data-theme="light"] .hero-vignette {
  background: radial-gradient(78% 62% at 50% 46%, transparent 38%, rgba(145, 168, 181, 0.26) 94%);
}

/* --- 3.3 reflexos especulares ---------------------------------------
   .hero-vignette compartilha exatamente a mesma moldura de 100vw x 100vh da
   fotografia (styles.css declara as duas juntas), então os seus
   pseudo-elementos caem no mesmo sistema de coordenadas da imagem — é por
   isso que os reflexos podem seguir as fachadas.

   São cinco faixas estreitas, uma por família de aresta, em screen e com
   alfa baixo. A máscara horizontal mantém tudo fora do terço esquerdo, onde
   fica o texto: nenhum reflexo atravessa palavra alguma. */
:root[data-theme="light"] .hero-vignette::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  background:
    /* aresta principal da torre da esquerda — 127°, a mais forte da foto */
    linear-gradient(127deg,
      transparent 40%,
      rgba(255, 255, 255, 0.10) 45%,
      rgba(252, 252, 250, 0.26) 48.4%,
      rgba(255, 255, 255, 0.09) 52%,
      transparent 57%),
    /* segunda aresta paralela, mais discreta e mais funda */
    linear-gradient(127deg,
      transparent 60%,
      rgba(241, 243, 244, 0.13) 65.4%,
      transparent 70%),
    /* torre central — quase vertical */
    linear-gradient(82deg,
      transparent 54%,
      rgba(255, 255, 255, 0.16) 59.6%,
      rgba(252, 252, 250, 0.07) 62%,
      transparent 66%),
    /* torres da direita — 52° */
    linear-gradient(52deg,
      transparent 58%,
      rgba(255, 255, 255, 0.14) 63%,
      rgba(226, 234, 238, 0.22) 65.2%,
      transparent 70%),
    /* alto, na inclinação de 142° das lajes superiores */
    linear-gradient(142deg,
      transparent 22%,
      rgba(255, 255, 255, 0.12) 27.5%,
      transparent 33%);
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, transparent 24%, #000 44%, #000 100%),
    linear-gradient(180deg, transparent 0%, transparent 12%, #000 30%, #000 100%);
  mask-image:
    linear-gradient(90deg, transparent 0%, transparent 24%, #000 44%, #000 100%),
    linear-gradient(180deg, transparent 0%, transparent 12%, #000 30%, #000 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  /* Chegada em uma passagem só: a luz assenta, não pisca nem repete.
     Anima apenas opacidade, que o compositor resolve sem repintura. */
  animation: heroLuz 1500ms cubic-bezier(0.22, 0.61, 0.36, 1) 220ms 1 both;
}

@keyframes heroLuz {
  from { opacity: 0.42; }
  to   { opacity: 1; }
}

/* --- 3.4 linhas arquitetônicas --------------------------------------
   Quatro fios de 1px, nos mesmos ângulos das arestas, em prata polida, aço
   e azul técnico, com opacidade baixa. Não formam grade: são poucos, seguem
   a perspectiva que já está na fotografia e param antes do texto e das
   bordas. */
:root[data-theme="light"] .hero-vignette::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(127deg,
      transparent calc(43% - 1px), rgba(211, 217, 221, 0.50) calc(43% - 1px),
      rgba(211, 217, 221, 0.50) 43%, transparent 43%),
    linear-gradient(127deg,
      transparent calc(67% - 1px), rgba(186, 196, 202, 0.34) calc(67% - 1px),
      rgba(186, 196, 202, 0.34) 67%, transparent 67%),
    linear-gradient(52deg,
      transparent calc(61% - 1px), rgba(54, 127, 174, 0.30) calc(61% - 1px),
      rgba(54, 127, 174, 0.30) 61%, transparent 61%),
    linear-gradient(82deg,
      transparent calc(64% - 1px), rgba(211, 217, 221, 0.40) calc(64% - 1px),
      rgba(211, 217, 221, 0.40) 64%, transparent 64%);
  /* Três máscaras que se cruzam: fora do terço esquerdo, onde fica o texto;
     abaixo do céu, para os fios não flutuarem no vazio; e dentro de uma
     elipse, para que morram antes das bordas. O que sobra é exatamente a
     faixa em que as fachadas aparecem. */
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, transparent 26%, #000 46%, #000 100%),
    linear-gradient(180deg, transparent 0%, transparent 17%, #000 36%, #000 88%, transparent 99%),
    radial-gradient(84% 76% at 64% 56%, #000 32%, transparent 86%);
  mask-image:
    linear-gradient(90deg, transparent 0%, transparent 26%, #000 46%, #000 100%),
    linear-gradient(180deg, transparent 0%, transparent 17%, #000 36%, #000 88%, transparent 99%),
    radial-gradient(84% 76% at 64% 56%, #000 32%, transparent 86%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* Movimento reduzido: a luz já entra assentada. */
@media (prefers-reduced-motion: reduce) {
  :root[data-theme="light"] .hero-vignette::before {
    animation: none;
    opacity: 1;
  }
}

/* --- 3.5 véu de leitura ---------------------------------------------
   Pintado por último, acima de todas as camadas, e concentrado à esquerda —
   onde a fotografia é mais escura (0.04 a 0.25) e onde ficam título, texto
   e itens de atuação. À direita ele é praticamente nulo: é lá que a platina
   polida e o gráfico aparecem inteiros. */
:root[data-theme="light"] .hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(74% 82% at 2% 44%,
      rgba(252, 252, 250, 0.95) 0%,
      rgba(252, 252, 250, 0.82) 26%,
      rgba(252, 252, 250, 0.44) 52%,
      rgba(252, 252, 250, 0.12) 72%,
      rgba(252, 252, 250, 0) 86%),
    linear-gradient(180deg,
      rgba(252, 252, 250, 0.16) 0%,
      rgba(252, 252, 250, 0.06) 46%,
      rgba(252, 252, 250, 0.34) 84%,
      rgba(252, 252, 250, 0.62) 100%);
}

/* Nas páginas internas o hero não tem o gráfico: o texto ocupa a faixa
   central-esquerda, mais larga e mais baixa do que na home, e cai justamente
   sobre as fachadas mais claras — onde a fotografia tem detalhe demais para
   servir de fundo de leitura. Ali o véu deixa de ser um realce à esquerda e
   passa a ser um campo amplo de pérola, que só se abre depois de 74% da
   largura. A home continua com o véu leve: lá o bloco de expertise já traz o
   seu próprio fundo de leitura. */
:root[data-theme="light"] .hero--page .hero-bg::after {
  background:
    radial-gradient(92% 92% at 24% 44%,
      rgba(252, 252, 250, 0.97) 0%,
      rgba(252, 252, 250, 0.93) 32%,
      rgba(252, 252, 250, 0.78) 54%,
      rgba(252, 252, 250, 0.44) 74%,
      rgba(252, 252, 250, 0.10) 92%,
      rgba(252, 252, 250, 0) 100%),
    linear-gradient(180deg,
      rgba(252, 252, 250, 0.30) 0%,
      rgba(252, 252, 250, 0.14) 44%,
      rgba(252, 252, 250, 0.42) 84%,
      rgba(252, 252, 250, 0.68) 100%);
}

/* Título do hero em marinho profundo: dá peso sem competir com o azul
   institucional dos acentos. */
:root[data-theme="light"] .hero .display {
  color: var(--petrol-deep);
}

/* ==================================================================
   4. Bloco de expertise, que vive dentro do hero da home

   Os tokens --tse-* são declarados no próprio .ts-expertise, com
   especificidade (0,1,0); os seletores abaixo têm (0,2,1) e vencem sem
   precisar de !important e sem tocar em ts-expertise.css.
   ================================================================== */
:root[data-theme="light"] .ts-expertise {
  --tse-ground: #FCFCFA;
  --tse-gold:   #1F64A3;
  --tse-ink:    #103B5F;
  --tse-body:   #45525E;
  --tse-mute:   #566574;
  --tse-risk:   #A8433A;
  --tse-line:   rgba(48, 58, 66, 0.13);

  /* ---- paleta do canvas, lida por ts-expertise.js ----
     O gráfico é desenhado em SVG por JavaScript, que recalcula o alfa de
     cada traço a cada quadro — é o alfa que faz a animação de entrada.
     Trocar as cores por regras CSS congelaria essa animação, e um filtro
     global não distingue um traço do outro. Por isso o JS lê estas dez
     chaves e usa cada uma no lugar do literal correspondente. O tema escuro
     não declara nenhuma delas e cai nos valores originais, que continuam
     sendo o padrão dentro do próprio arquivo.

     Formato "r,g,b", que é como o desenho monta as cores com alfa variável.

       gold  azul institucional  linhas estruturais, anéis e valores
       cool  aço-grafite         eixos, grade e movimentos de redução
       risk  terracota           exposição em alta — mantém o sentido
       meta  verde               abaixo da meta   — mantém o sentido
       ink   pérola              miolo dos nós e fundo das caixas de rótulo
       rot   grafite             rótulo da origem processual
       leg   cinza-azulado       legendas da faixa de movimentação
       c1    grafite             traço do plano inclinado e valores
       c2    marinho             traço do ícone do tribunal
       c3    aço                 colunas do ícone do tribunal

     Contrastes sobre a pérola: gold 5.9, cool 5.1, risk 5.7, meta 5.2,
     leg 5.7, c1 13.5, c2 10.4, c3 4.4. */
  --tse-rgb-gold: 31,100,163;
  --tse-rgb-cool: 95,108,122;
  --tse-rgb-risk: 168,67,58;
  --tse-rgb-meta: 42,120,79;
  --tse-rgb-ink:  252,252,250;
  --tse-rgb-rot:  48,58,66;
  --tse-rgb-leg:  86,101,116;
  --tse-rgb-c1:   48,58,66;
  --tse-rgb-c2:   16,59,95;
  --tse-rgb-c3:   100,113,127;
}

/* Véu de leitura do bloco sobre a fotografia. Mesma geometria dos dois
   gradientes originais; a passagem é de pérola a transparente, e o lado
   direito — o do gráfico — fica quase limpo. */
:root[data-theme="light"] .ts-expertise::before {
  background:
    /* campo de pérola sob o gráfico. O canvas ocupa a metade direita, entre
       20% e 80% da altura, e é ali que precisa de fundo calmo: a arquitetura
       polida continua visível acima e abaixo, mas para de disputar com os
       eixos, os rótulos e os valores. Sem isto o gráfico some na fachada. */
    radial-gradient(54% 52% at 76% 48%,
      rgba(252, 252, 250, 0.92) 0%,
      rgba(252, 252, 250, 0.78) 42%,
      rgba(252, 252, 250, 0.44) 68%,
      rgba(252, 252, 250, 0.12) 86%,
      rgba(252, 252, 250, 0) 98%),
    linear-gradient(100deg,
      rgba(252, 252, 250, 0.90) 0%,
      rgba(252, 252, 250, 0.74) 32%,
      rgba(247, 248, 249, 0.30) 56%,
      rgba(247, 248, 249, 0.08) 76%,
      rgba(247, 248, 249, 0.02) 100%);
}

@media (max-width: 1023px) {
  :root[data-theme="light"] .ts-expertise::before {
    background:
      linear-gradient(180deg,
        rgba(252, 252, 250, 0.88) 0%,
        rgba(252, 252, 250, 0.78) 42%,
        rgba(241, 243, 244, 0.52) 66%,
        rgba(241, 243, 244, 0.36) 100%),
      radial-gradient(84% 36% at 50% 58%,
        rgba(252, 252, 250, 0.44) 0%,
        rgba(252, 252, 250, 0) 78%);
  }
}

/* Os literais do componente que não passam por token. O filete e a borda do
   item ativo são brancos a 14% e 7% — invisíveis sobre claro; aqui invertem
   o sinal e mantêm a mesma altura de 1px. */
:root[data-theme="light"] .ts-expertise-rule { background: rgba(48, 58, 66, 0.15); }
:root[data-theme="light"] .ts-expertise-item[aria-current="true"] {
  border-top-color: rgba(48, 58, 66, 0.13);
}
/* Nome do item inativo: #A9BCC5 sobre claro rende 1.97:1. Passa ao mesmo
   cinza-azulado dos demais textos secundários, 5.7:1, mantendo a hierarquia
   em relação ao item ativo, que é marinho. */
:root[data-theme="light"] .ts-expertise-name { color: #566574; }
:root[data-theme="light"] .ts-expertise-axislabel { color: #566574; }

/* As etiquetas da cena de fluxo são HTML, não SVG. No escuro são texto claro
   sobre pastilha azul-petróleo; no claro, grafite sobre pérola com borda
   platinada — mesma medida, mesma borda de 1px, mesma transição. */
:root[data-theme="light"] .ts-expertise-tag {
  color: #303A42;
  background: rgba(252, 252, 250, 0.93);
  border-color: #C9D0D5;
}

/* ==================================================================
   5. Acabamento das superfícies

   Sombras amplas e muito suaves, nunca escuras nem curtas. Nenhuma delas
   ocupa espaço no fluxo, então nada de layout se desloca. Os cards já
   trazem border de 1px em styles.css: a aparência metálica vem dos tokens
   --hair e --hair-strong, não de bordas novas.
   ================================================================== */
:root[data-theme="light"] .phase,
:root[data-theme="light"] .insight-feature,
:root[data-theme="light"] .pilares,
:root[data-theme="light"] .person,
:root[data-theme="light"] .person-feature,
:root[data-theme="light"] .contact-form,
:root[data-theme="light"] .legal-index,
:root[data-theme="light"] .portal-duo .legal-block,
:root[data-theme="light"] .candidatura-bloco {
  box-shadow: 0 1px 2px rgba(37, 44, 51, 0.03), 0 12px 32px -18px rgba(37, 44, 51, 0.16);
}

:root[data-theme="light"] .phase:hover,
:root[data-theme="light"] .insight-feature:hover {
  box-shadow: 0 1px 2px rgba(37, 44, 51, 0.04), 0 18px 40px -20px rgba(18, 63, 104, 0.22);
}

/* A marca do rodapé é branca: styles.css aplica brightness(0) invert(1)
   nela, o que é certo sobre o azul-petróleo do rodapé escuro e some por
   completo sobre a platina do claro. Aqui ela recebe o mesmo tratamento que
   já tem no cabeçalho — sem filtro, com multiply, que apaga o fundo branco
   do PNG e devolve o azul da marca. No escuro nada disto se aplica. */
:root[data-theme="light"] .site-footer .brand-mark img {
  filter: none;
  mix-blend-mode: multiply;
  opacity: 1;
}

/* Rodapé: a trama vertical e o halo do canto eram creme e âmbar sobre
   escuro. Aqui viram prata e azul sobre platina — mesma geometria, mesmo
   passo de 100px, mesma posição do halo. O fio interno de champanhe a 22%
   é o único ponto dourado do tema: percebe-se de perto, não de longe. */
:root[data-theme="light"] .site-footer {
  background: linear-gradient(180deg, #ECEDEF 0%, #E5E6E8 100%);
  border-top-color: #D4D7DA;
  box-shadow: inset 0 1px 0 rgba(182, 154, 104, 0.22);
}
:root[data-theme="light"] .site-footer::before {
  background-image:
    linear-gradient(to right, rgba(37, 44, 51, 0.045) 1px, transparent 1px),
    radial-gradient(50% 60% at 80% 0%, rgba(31, 100, 163, 0.07), transparent 70%);
}

/* ==================================================================
   5b. Botões de ação do Portal de Privacidade

   São os três .btn-outline dentro de .portal-actions: "Solicitar
   atendimento de privacidade", "Contato para privacidade corporativa" e
   "Ir para Contato". Não existem equivalentes em inglês — .portal-actions
   só aparece em portal-de-privacidade.html.

   A moldura vinha incompleta por uma razão concreta: .btn declara
   `border: 1px solid transparent` e .btn-outline pinta essa borda, mas duas
   regras de styles.css — `.legal-block .portal-actions a` e
   `.portal-card .portal-actions a`, ambas com especificidade (0,3,0) —
   zeram o border-bottom para desfazer o sublinhado dos links legais. O
   contorno ficava então em três lados. O seletor abaixo tem (0,3,1) e
   devolve a borda inteira nos quatro lados, com o atalho `border`, sem
   tocar em styles.css.

   Contrastes: pérola sobre o tom mais claro do fundo, 8.4:1; sobre o mais
   claro do hover, 6.9:1. A borda rende 5.1:1 contra o próprio botão. Nada
   de dimensão, canto, espaçamento ou posição muda — só cor, borda, sombra.
   O botão não se desloca no hover porque nenhum botão do site se desloca:
   o único movimento existente é o da seta interna, que continua o mesmo.
   ================================================================== */
:root[data-theme="light"] .portal-actions .btn-outline {
  background: linear-gradient(180deg, #123F68 0%, #1B4F76 100%);
  color: #FCFCFA;
  border: 1px solid #BFC7CD;
  box-shadow:
    0 1px 2px rgba(16, 59, 95, 0.12),
    0 14px 32px -18px rgba(16, 59, 95, 0.38);
}

:root[data-theme="light"] .portal-actions .btn-outline:hover,
:root[data-theme="light"] .portal-actions .btn-outline:focus-visible {
  background: linear-gradient(180deg, #164870 0%, #215C87 100%);
  color: #FFFFFF;
  border: 1px solid #D3D9DD;
  box-shadow:
    0 1px 2px rgba(16, 59, 95, 0.14),
    0 18px 38px -20px rgba(16, 59, 95, 0.42);
}

:root[data-theme="light"] .portal-actions .btn-outline:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ==================================================================
   6. Troca de tema instantânea
   O site anima `color` e `background` em dezenas de componentes. Sem isto,
   trocar de tema dispara todas essas transições ao mesmo tempo — um fade
   geral, chamativo, e que fica pela metade nos elementos fora da tela.
   O atributo vive só os dois quadros da troca; quem anima é o ícone.
   ================================================================== */
:root[data-trocando-tema] *,
:root[data-trocando-tema] *::before,
:root[data-trocando-tema] *::after {
  transition: none !important;
}

/* ==================================================================
   7. Barra de cookies

   Pérola semitransparente sobre desfoque leve, fio de prata no topo e uma
   sombra ampla que a descola da página sem pesá-la. Texto, ordem, medidas,
   botões, links, comportamento e registro de consentimento permanecem os
   mesmos — muda só a cor. No escuro nada aqui se aplica.
   ================================================================== */
:root[data-theme="light"] #ts-cookie-banner {
  background: linear-gradient(180deg, rgba(250, 250, 248, 0.96) 0%, rgba(236, 237, 239, 0.94) 100%);
  -webkit-backdrop-filter: saturate(130%) blur(14px);
  backdrop-filter: saturate(130%) blur(14px);
  color: #252C33;
  border-top: 1px solid #D4D7DA;
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.70), 0 -18px 44px -16px rgba(37, 44, 51, 0.20);
}

:root[data-theme="light"] #ts-cookie-banner .ts-cookie-text,
:root[data-theme="light"] #ts-cookie-banner .ts-cookie-cat {
  color: #566574;
}

:root[data-theme="light"] #ts-cookie-banner .ts-cookie-text strong {
  color: #252C33;
}

:root[data-theme="light"] #ts-cookie-banner .ts-cookie-text a {
  color: #1F64A3;
}

:root[data-theme="light"] #ts-cookie-banner .ts-cookie-detalhe {
  border-color: #C5CBD1;
  background: rgba(250, 250, 248, 0.72);
}

:root[data-theme="light"] #ts-cookie-banner .ts-cookie-cat + .ts-cookie-cat {
  border-top-color: rgba(37, 44, 51, 0.10);
}

/* Recusar e Ver detalhes mantêm tamanho, corpo e área de clique do Aceitar —
   a diferença segue sendo só de preenchimento, nunca de dificuldade. */
:root[data-theme="light"] #ts-cookie-banner .ts-cookie-reject,
:root[data-theme="light"] #ts-cookie-banner .ts-cookie-detalhes {
  background: #FAFAF8;
  border-color: #C5CBD1;
  color: #123F68;
}

:root[data-theme="light"] #ts-cookie-banner .ts-cookie-reject:hover,
:root[data-theme="light"] #ts-cookie-banner .ts-cookie-detalhes:hover {
  background: #ECEDEF;
  border-color: #AEB7C1;
}

:root[data-theme="light"] #ts-cookie-banner .ts-cookie-accept {
  background: #123F68;
  color: #FFFFFF;
  box-shadow: 0 1px 2px rgba(18, 63, 104, 0.18);
}

:root[data-theme="light"] #ts-cookie-banner .ts-cookie-accept:hover {
  background: #1F64A3;
}

:root[data-theme="light"] #ts-cookie-banner .ts-cookie-btn:focus-visible {
  outline-color: #1F64A3;
}

/* ==================================================================
   8. O botão sol / lua

   Herda a cor de quem o contém, que é escuro nos dois temas. No claro ganha
   um acabamento platinado permanente e discreto: fundo de meio tom e fio de
   prata, o suficiente para se ler como controle e não como enfeite.

   Ele existe em duas posições, e apenas uma fica visível de cada vez:
     .theme-toggle-nav  item da navegação principal, entre "Conteúdo" e
                        "Privacidade" — é a posição do desktop;
     .theme-toggle-bar  ao lado do botão de menu, para quando a navegação
                        colapsa. Fica fora do menu, não dentro dele.
   Duas posições em vez de uma que se move: abaixo de 1180px a .primary-nav
   inteira recebe display:none, e um nó dentro dela desapareceria junto —
   inclusive da árvore de acessibilidade. Como só uma das duas é exibida por
   vez, o leitor de tela também enxerga um botão só.
   ================================================================== */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  background: none;
  color: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color var(--dur, 280ms) var(--ease, ease),
              border-color var(--dur, 280ms) var(--ease, ease),
              color var(--dur, 280ms) var(--ease, ease);
}

/* Na navegação o botão é mais um item da sequência: o <li> não traz marca
   nem contador, e o respiro à esquerda e à direita é o mesmo gap que a lista
   já usa entre os links. O quadrado de 34px seria alto demais ao lado de
   texto de 0.8rem, então aqui ele acompanha a linha. */
.primary-nav li.theme-toggle-item {
  display: flex;
  align-items: center;
}

.theme-toggle-nav { width: 30px; height: 30px; }
.theme-toggle-nav svg { width: 16px; height: 16px; }

.theme-toggle:hover {
  background: var(--gold-soft, rgba(212, 168, 88, 0.10));
  border-color: var(--hair-gold, rgba(212, 168, 88, 0.28));
  color: var(--gold);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* Acabamento platinado, só no claro. */
:root[data-theme="light"] .theme-toggle {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(236, 237, 239, 0.92));
  border-color: #C5CBD1;
  color: #3F4A56;
}
:root[data-theme="light"] .theme-toggle:hover {
  background: linear-gradient(180deg, #FFFFFF, #E5E6E8);
  border-color: #AEB7C1;
  color: #123F68;
}

.theme-toggle svg {
  width: 18px;
  height: 18px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* A troca do ícone é uma passagem curta, não uma animação. */
  transition: opacity 160ms var(--ease, ease), transform 160ms var(--ease, ease);
}

.theme-toggle[data-trocando="1"] svg {
  opacity: 0;
  transform: rotate(-25deg) scale(0.86);
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle,
  .theme-toggle svg {
    transition: none;
  }
  .theme-toggle[data-trocando="1"] svg {
    opacity: 1;
    transform: none;
  }
}

/* Acima de 1180px vale a posição da navegação; a de reserva fica fora. */
.theme-toggle-bar { display: none; }

/* Abaixo de 1180px o site passa ao menu compacto: nav, CTA e idioma somem e
   só restam a marca e o hambúrguer. A posição de reserva entra, encostada no
   botão de menu, e assume o "margin-left: auto" que empurra os dois para a
   direita. */
@media (max-width: 1180px) {
  .theme-toggle-bar {
    display: inline-flex;
    order: 4;
    margin-left: auto;
  }
  /* A marca, o CTA e o idioma já declaram flex-shrink: 0 em styles.css; o
     botão de menu não. Com um item a mais na linha, ele passava a ser
     comprimido e as três barras (width: 100%) colapsavam para zero — o menu
     ficava um retângulo vazio. Fixar o encolhimento devolve o ícone. */
  .header-inner .nav-toggle { order: 5; margin-left: 0.35rem; flex-shrink: 0; }
}

/* Área de toque de 40px no mobile, sem alterar a altura do cabeçalho. */
@media (max-width: 980px) {
  .theme-toggle-bar { width: 40px; height: 40px; }
}