/* =========================================================================
   Ampliação do diagnóstico Locatelli Hardscapes
   Carregado DEPOIS do <style> inline do relatório de agosto, então herda a
   base (Inter/DM Serif, creme #FDFBF8, laranja #C2410C) e só acrescenta.

   Regras que valem para o arquivo inteiro:
   · nada de CDN, nada de biblioteca — CSS puro;
   · a PÁGINA nunca rola na horizontal (tabela larga rola dentro de .table-scroll);
   · as duas datas nunca podem se confundir: 12/08/2026 é o relatório de
     agosto (bege, tracejado, .original-note e .selo) e 08/09/2026 é a nova
     medição (creme com ponto laranja, .selo-novo). Ver "SELOS DE DATA";
   · no mapa de 25 pontos, "não apareceu" e "quase sem resultado no local"
     são coisas diferentes: a segunda é neutra, nunca vermelha.
   ========================================================================= */

:root {
  /* paleta herdada do relatório original, sem inventar tom novo */
  --papel:        #FDFBF8;
  --tinta:        #1a1a1a;
  --tinta-media:  #3a3a3a;
  --cinza:        #6a6a6a;
  --cinza-claro:  #8a8a8a;
  --cinza-pedra:  #A9A29B;
  --linha:        #ECE4DC;
  --linha-forte:  #E6DED6;
  --linha-fina:   #EFE7DE;
  --creme:        #FFF1E8;
  --bege:         #F4F1EE;
  --laranja:      #C2410C;
  --laranja-luz:  #FB923C;
  --laranja-borda:#F3D9C6;

  /* faixas do mapa e status. O "vazio" é de propósito sem cor de veredito. */
  --verde:        #246E48;
  --verde-fundo:  #EDF3EE;
  --verde-borda:  #CFE1D5;
  --ambar:        #8E6410;
  --vermelho:     #8F2C2C;
  --vermelho-fundo:#FBEDEA;
  --vermelho-borda:#F0D4CC;
  --vazio:        #B5AEA4;

  --serif: 'DM Serif Display', Georgia, serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --raio: 20px;
  --raio-p: 12px;
  --altura-nav: 66px;
}

html {
  scroll-behavior: smooth;
  /* o índice é fixo no topo: a seção não pode parar embaixo dele */
  scroll-padding-top: calc(var(--altura-nav) + 22px);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

body { background: var(--papel); }

::selection { background: #FFE0CC; color: var(--tinta); }

:focus-visible { outline: 3px solid var(--laranja); outline-offset: 3px; border-radius: 4px; }

/* Link de pular navegação: só aparece no teclado. */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--tinta); color: #fff; text-decoration: none;
  padding: 12px 20px; border-radius: 0 0 14px 0; font-size: 14px; font-weight: 600;
}
.skip:focus { left: 0; }

/* =========================================================================
   1. BARRA DE NAVEGAÇÃO FIXA
   ========================================================================= */

.report-nav {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 20px;
  min-height: var(--altura-nav);
  padding: 10px max(24px, calc(50% - 590px));
  background: rgba(253, 251, 248, 0.92);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--linha);
}

.report-brand {
  font-size: 15px; font-weight: 700; letter-spacing: -0.015em;
  color: var(--tinta); text-decoration: none; white-space: nowrap;
}
.report-brand span { color: var(--cinza-pedra); font-weight: 500; }

.report-nav nav {
  display: flex; align-items: center; gap: 4px;
  margin-left: auto;
  overflow-x: auto; /* em tela estreita o índice rola sozinho, a página não */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.report-nav nav::-webkit-scrollbar { display: none; }

.report-nav nav a {
  position: relative;
  padding: 8px 13px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--cinza); text-decoration: none; white-space: nowrap;
  transition: color .18s ease, background-color .18s ease;
}
.report-nav nav a:hover { color: var(--tinta); background: var(--bege); }

/* .is-active é aplicada pelo scrollspy do ampliacao.js */
.report-nav nav a.is-active { color: var(--laranja); background: var(--creme); }
.report-nav nav a.is-active::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 3px;
  height: 2px; border-radius: 2px; background: var(--laranja);
}

/* Botão "Modo gravação": utilitário de tela, não faz parte do relatório. */
.record-button {
  flex: 0 0 auto;
  font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
  color: var(--cinza); background: transparent;
  border: 1px solid var(--linha-forte); border-radius: 999px;
  padding: 8px 15px; cursor: pointer;
  transition: all .18s ease;
}
.record-button:hover { color: var(--tinta); border-color: var(--cinza-pedra); }
.record-button[aria-pressed="true"] {
  color: #fff; background: var(--tinta); border-color: var(--tinta);
}
.record-button[aria-pressed="true"]::before {
  content: "●"; color: var(--laranja-luz); margin-right: 7px; font-size: 10px; vertical-align: 1px;
}

/* =========================================================================
   2. SELOS DE DATA
   .selo        = base neutra, o conteúdo de agosto (bege, tracejado)
   .selo-novo   = medição de 08/09/2026 (creme, laranja, ponto cheio)
   .original-note = a faixa que abre o relatório preservado de agosto
   As duas famílias nunca se parecem, nem em preto e branco: uma é
   tracejada e apagada, a outra é sólida e tem o ponto.
   ========================================================================= */

.selo {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px; border-radius: 999px;
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap;
  color: #8A7F74; background: var(--bege); border: 1px dashed #D6CCC2;
}
.selo::before { content: "◷"; font-size: 12px; letter-spacing: 0; }

.selo.selo-novo {
  color: var(--laranja); background: var(--creme); border: 1px solid var(--laranja-borda);
}
.selo.selo-novo::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--laranja); box-shadow: 0 0 0 3px rgba(194, 65, 12, .16);
}

/* Um <p class="eyebrow"> que só carrega o selo não precisa de espaço próprio. */
.eyebrow > .selo { vertical-align: middle; }

.original-note {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 8px 0 34px; padding: 13px 18px;
  background: var(--bege); border: 1px dashed #D6CCC2; border-radius: var(--raio-p);
  color: #6F655C; font-size: 13.5px; line-height: 1.5;
}
.original-note::before {
  content: "Arquivo · 12/08/2026";
  flex: 0 0 auto;
  padding: 5px 12px; border-radius: 999px;
  background: #EAE4DC; color: #7A6E63;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
}

/* =========================================================================
   3. CAPA
   ========================================================================= */

.report-cover {
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 56px 24px 30px;
}

.cover-heading {
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(260px, 0.95fr);
  gap: 54px; align-items: start;
  padding-bottom: 40px; border-bottom: 1px solid var(--linha);
}

.eyebrow {
  font-family: var(--sans);
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--laranja); margin: 0 0 16px;
}

.report-cover h1 {
  font-size: clamp(42px, 6.6vw, 78px);
  line-height: 1.0; letter-spacing: -0.035em;
  margin: 0 0 22px;
}
.report-cover h1 em { font-style: italic; color: var(--laranja); }

.cover-subtitle {
  font-size: clamp(17px, 1.9vw, 21px); line-height: 1.5;
  color: var(--tinta-media); max-width: 50ch; margin: 0;
}
.desktop-break { display: inline; }

/* Ficha técnica do relatório, na lateral do título. */
.report-stamp {
  background: #fff; border: 1px solid var(--linha); border-radius: 18px;
  padding: 22px 24px 24px;
}
.report-stamp span {
  display: block; font-size: 11px; font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--cinza-pedra);
  margin-bottom: 5px;
}
.report-stamp strong { display: block; font-size: 17px; font-weight: 600; }
.report-stamp hr { border: 0; border-top: 1px solid var(--linha); margin: 18px 0; }
.report-stamp b + span { margin-top: 18px; }
.report-stamp b { display: block; font-size: 15px; font-weight: 600; margin-bottom: 2px; }

/* As duas datas da ficha: a primeira é agosto, a segunda é a medição nova. */
.report-stamp b:nth-of-type(1) {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px; border-radius: 999px;
  font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase;
  color: #8A7F74; background: var(--bege); border: 1px dashed #D6CCC2;
}
.report-stamp b:nth-of-type(1)::before { content: "◷"; letter-spacing: 0; }
.report-stamp b:nth-of-type(2) {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px; border-radius: 999px;
  font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--laranja); background: var(--creme); border: 1px solid var(--laranja-borda);
}
.report-stamp b:nth-of-type(2)::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--laranja); box-shadow: 0 0 0 3px rgba(194, 65, 12, .16);
}

/* Três atalhos abaixo do título. */
.report-summary {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px; margin: 34px 0 0;
}
.report-summary a {
  display: flex; flex-direction: column; gap: 11px;
  padding: 22px 22px 20px;
  background: #fff; border: 1px solid var(--linha); border-radius: 18px;
  color: var(--tinta); text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.report-summary a:hover {
  transform: translateY(-3px);
  border-color: var(--linha-forte);
  box-shadow: 0 14px 30px rgba(26, 26, 26, .07);
}
.summary-label {
  align-self: flex-start;
  padding: 5px 11px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
  color: #8A7F74; background: var(--bege); border: 1px dashed #D6CCC2;
}
.report-summary a strong {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(20px, 2.1vw, 25px); line-height: 1.18; letter-spacing: -0.015em;
}
.report-summary a > span:not(.summary-label) {
  font-size: 14.5px; line-height: 1.5; color: var(--cinza);
}
.report-summary a b {
  margin-top: auto; padding-top: 6px;
  font-size: 13.5px; font-weight: 600; color: var(--laranja);
}

/* Cartão de medição nova: creme, com o selo sólido em vez do tracejado. */
.report-summary a.summary-new { background: var(--creme); border-color: var(--laranja-borda); }
.summary-new .summary-label {
  color: var(--laranja); background: #fff; border: 1px solid var(--laranja-borda);
}
.summary-new .summary-label::before {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--laranja); margin-right: 7px; vertical-align: 1px;
}
.summary-new > span:not(.summary-label) { color: #6B5B50; }

.cover-footnote {
  margin: 26px 0 0; padding-top: 18px; border-top: 1px solid var(--linha);
  font-size: 13px; color: var(--cinza-claro); line-height: 1.6;
}

/* =========================================================================
   4. MÓDULOS LARGOS
   Os blocos novos são injetados dentro da .wrap de 660px do relatório
   original. Aqui eles estouram essa coluna e voltam a ser centrados na
   viewport, sem nunca criar rolagem horizontal (a folga de 40px absorve a
   barra de rolagem, que o 100vw conta e a página não tem).
   ========================================================================= */

.report-module {
  --full: min(1180px, calc(100vw - 40px));
  width: var(--full);
  margin: 64px 0 64px calc(50% - var(--full) / 2);
  padding: 44px 46px 46px;
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: 26px;
  scroll-margin-top: calc(var(--altura-nav) + 22px);
}

.map-module { background: #FFFDFA; }
.rivals-module { background: #FCFAF7; }

.report-module img { max-width: 100%; height: auto; }
.report-module a { color: var(--laranja); }
.report-module p { margin: 0 0 16px; }
.report-module h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(27px, 3.4vw, 43px); line-height: 1.1; letter-spacing: -0.025em;
  margin: 0 0 16px; max-width: 32ch;
}
.report-module h2 em { font-style: italic; color: var(--laranja); }
.report-module h3 {
  font-family: var(--serif); font-weight: 400;
  font-size: 23px; line-height: 1.2; letter-spacing: -0.015em; margin: 0 0 10px;
}

/* O bloco corre largo; o parágrafo continua em medida confortável de leitura. */
.module-heading { max-width: 900px; margin-bottom: 32px; }
.module-heading > p:last-child {
  font-size: 17.5px; color: var(--cinza); max-width: 68ch; margin: 0;
}
.module-intro {
  font-size: 17.5px; color: var(--cinza); max-width: 68ch; margin: 0 0 28px;
}

/* O eyebrow do módulo do site é texto puro, mas também é medição de
   setembro: recebe a mesma cara do .selo-novo, para nenhuma data de
   agosto e de setembro dividir a mesma aparência. */
.site-module .module-heading .eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px; border-radius: 999px; letter-spacing: 0.14em;
  color: var(--laranja); background: var(--creme); border: 1px solid var(--laranja-borda);
}
.site-module .module-heading .eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--laranja); box-shadow: 0 0 0 3px rgba(194, 65, 12, .16);
}

/* =========================================================================
   5. MÉTODO (details/summary) E TABELAS
   ========================================================================= */

.method { margin-top: 32px; border-top: 1px solid var(--linha); padding-top: 22px; }
.method summary {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 18px 10px 16px; border-radius: 999px;
  background: var(--bege); border: 1px solid var(--linha-forte);
  font-size: 13.5px; font-weight: 600; color: var(--tinta-media);
  cursor: pointer; list-style: none; user-select: none;
}
.method summary::-webkit-details-marker { display: none; }
.method summary::before {
  content: "+"; font-size: 16px; line-height: 1; color: var(--laranja); font-weight: 700;
}
.method[open] summary::before { content: "−"; }
.method summary:hover { border-color: var(--cinza-pedra); }
.method > *:not(summary) { margin-top: 18px; }
.method p { font-size: 14.5px; line-height: 1.6; color: var(--cinza); max-width: 88ch; }
.method b, .method strong { color: var(--tinta-media); font-weight: 600; }

/* A tabela rola dentro da própria caixa — a página nunca rola na horizontal. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--linha); border-radius: var(--raio-p);
  background: #fff;
  scrollbar-width: thin;
}
.table-scroll table {
  width: 100%; min-width: 520px;
  border-collapse: collapse;
  font-size: 15px;
}
.table-scroll caption {
  caption-side: top; text-align: left;
  padding: 14px 18px 12px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
  color: var(--cinza-pedra);
}
.table-scroll th, .table-scroll td {
  text-align: left; padding: 12px 18px; border-top: 1px solid var(--linha-fina);
  vertical-align: top;
}
.table-scroll th {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--cinza); background: #FCFAF7; white-space: nowrap;
}
.table-scroll td { color: var(--tinta-media); }
.table-scroll tbody tr:hover td { background: #FDFBF8; }

/* Linha do achado: o 404 é o único vermelho da tabela do site. */
.table-scroll tr.error-row td { background: var(--vermelho-fundo); color: var(--vermelho); font-weight: 600; }
.table-scroll tr.error-row:hover td { background: #F8E4E0; }

/* =========================================================================
   6. MÓDULO DO MAPA — grade de 25 pontos
   O container NÃO tem proporção fixa e a imagem NÃO é recortada: os pinos
   são posicionados em % sobre o container, então qualquer recorte da
   imagem desalinharia todos eles. A altura vem da própria imagem.
   Marcação esperada:
     <div class="grid-map"><img …>
       <div class="pino top3" style="left:50%;top:50%">1</div> …
     </div>
   ========================================================================= */

.grid-map-wrap {
  display: grid; grid-template-columns: minmax(0, 640px) minmax(200px, 1fr);
  gap: 34px; align-items: start; margin-bottom: 34px;
}

.grid-map {
  position: relative;
  min-height: 240px; /* rede de segurança se a imagem ainda não estiver no lugar */
  border-radius: 16px;
  border: 1px solid var(--linha-forte);
  background: #EFECE3;
}
.grid-map img { width: 100%; height: auto; display: block; border-radius: 15px; }

/* Crédito do Google Maps: é obrigatório, então fica numa faixa fina na base
   do mapa, sempre legível e acima dos pinos. */
.map-attribution {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  margin: 0; padding: 5px 12px;
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  border-radius: 0 0 15px 15px;
  font-size: 10.5px; line-height: 1.4; letter-spacing: 0.01em;
  color: #6F675E; text-align: right;
}

.pino {
  position: absolute; z-index: 1; width: 9%; aspect-ratio: 1;
  transform: translate(-50%, -50%); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-family: var(--sans); font-weight: 700; line-height: 1;
  /* o corpo acompanha o tamanho do mapa: 25 pinos não podem se encostar */
  font-size: clamp(11px, 1.15vw, 15px);
  box-shadow: 0 0 0 2px #fff, 0 2px 5px rgba(0,0,0,.27);
}
/* o ampliar.py gera <span class="pino …"><b>posição</b></span> */
.pino b { font-weight: 700; color: inherit; font-style: normal; }

.pino.top3  { background: var(--verde); }
.pino.top10 { background: var(--ambar); }
.pino.fora  { background: var(--vermelho); }
/* Ponto onde o Google devolveu quase nada: não é derrota, é área sem
   mercado. Fica apagado de propósito, nunca vermelho. */
.pino.vazio {
  background: #F6F3EE; color: #7C736A;
  border: 2px dashed #9C948A;
  box-shadow: 0 0 0 2px #fff, 0 2px 5px rgba(0,0,0,.16);
  font-weight: 600;
}

.grid-legend {
  display: flex; flex-direction: column; gap: 12px;
  padding: 20px 22px; border-radius: 16px;
  background: #FCFAF7; border: 1px solid var(--linha);
}
.legenda {
  display: flex; align-items: center; gap: 10px;
  font-size: 13.5px; line-height: 1.35; color: var(--tinta-media);
}
.legenda i {
  flex: 0 0 12px; width: 12px; height: 12px; border-radius: 50%;
  display: inline-block; background: var(--cinza-pedra);
}
.legenda.top3 i  { background: var(--verde); }
.legenda.top10 i { background: var(--ambar); }
.legenda.fora i  { background: var(--vermelho); }
.legenda.vazio i { background: #fff; border: 1px dashed var(--vazio); }

/* Os três números da medição. */
.grid-numeros {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--laranja-borda); border-radius: 18px;
  background: var(--creme); overflow: hidden;
  margin-bottom: 30px;
}
.grid-numeros div { padding: 24px 26px; }
.grid-numeros div + div { border-left: 1px solid var(--laranja-borda); }
.grid-numeros b {
  display: block; font-family: var(--serif); font-style: italic;
  font-size: clamp(34px, 4vw, 50px); line-height: 1.05; color: var(--laranja);
  margin-bottom: 6px;
}
.grid-numeros span { display: block; font-size: 14.5px; line-height: 1.45; color: #6B5B50; max-width: 24ch; }

/* Bloco de leitura: o que o quadro acima quer dizer. */
.map-reading {
  padding: 22px 26px;
  border-left: 3px solid var(--laranja); background: #FCFAF7;
  border-radius: 0 16px 16px 0;
}
.map-reading strong { display: block; font-size: 16px; margin-bottom: 8px; }
.map-reading p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--tinta-media); max-width: 80ch; }
.map-reading p + p { margin-top: 14px; }
.map-reading b { font-weight: 600; color: var(--tinta); }

/* Ressalva de método: sóbria e secundária, mas legível. Não é aviso de erro. */
.ressalva {
  margin-top: 14px !important; padding-top: 14px;
  border-top: 1px dashed #D6CCC2;
  font-size: 14.5px !important; color: var(--cinza) !important;
}
.ressalva b { color: var(--tinta-media); }

.ressalva-box {
  margin-top: 28px; padding: 22px 26px;
  background: #FAF8F4; border: 1px dashed #D6CCC2; border-radius: 16px;
}
.ressalva-box strong { display: block; margin-bottom: 8px; font-size: 15.5px; color: var(--tinta-media); }
.ressalva-box p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--cinza); max-width: 86ch; }
.ressalva-box b { color: var(--tinta-media); font-weight: 600; }

/* A conclusão mais importante da página: bloco escuro, alto contraste,
   legível de longe quando a página está rolando no vídeo. */
.map-reading.destaque-leitura {
  margin-top: 30px;
  border-left: 0; border-radius: 20px;
  background: var(--tinta); color: #fff;
  padding: 32px 36px;
}
.destaque-leitura strong {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(21px, 2.4vw, 29px); line-height: 1.22; letter-spacing: -0.015em;
  margin-bottom: 14px; max-width: 30ch;
}
.destaque-leitura p { color: rgba(255,255,255,.78); font-size: 17px; }
.destaque-leitura b { color: var(--laranja-luz); font-weight: 600; }

/* =========================================================================
   7. MÓDULO DOS CONCORRENTES
   ========================================================================= */

.rivals-table { min-width: 640px; } /* 5 colunas: abaixo disso, rola na caixa */
.rivals-table td:first-child, .rivals-table th:first-child { width: 78px; color: var(--cinza-claro); }
.rivals-table td:nth-child(n+3), .rivals-table th:nth-child(n+3) { text-align: right; }
.rivals-table td:nth-child(2) { font-weight: 500; }
.rivals-table caption span { font-style: italic; }

/* Números baixos de avaliação: é o que sustenta o argumento. */
.destaque-num {
  color: var(--laranja) !important; font-weight: 700;
  background: var(--creme);
  box-shadow: inset 0 0 0 1px var(--laranja-borda);
}

/* A linha da própria empresa tem que saltar aos olhos. */
.rivals-table tr.linha-cliente td {
  background: var(--creme);
  border-top: 2px solid var(--laranja);
  border-bottom: 2px solid var(--laranja);
  color: var(--laranja); font-size: 16px; padding-top: 16px; padding-bottom: 16px;
}
.rivals-table tr.linha-cliente td:first-child { color: var(--laranja); }
.rivals-table tr.linha-cliente strong { font-weight: 700; }
.rivals-table tr.linha-cliente:hover td { background: #FFE9DC; }

/* Print em largura total do módulo. */
.evidence-full { margin: 30px 0 0; }

/* O print da busca é uma tira alta (816x3182). Solto na página ele ocupa a rolagem
   inteira e mata o ritmo de quem está passando o relatório na tela. Fica numa janela
   de altura fixa, cortada no topo, que é onde estão as primeiras posições; a lista
   inteira abre no lightbox. */
.evidence-full .janela {
  position: relative; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--linha-forte); background: var(--bege);
  max-width: 720px;
}
.evidence-full .janela::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px;
  background: linear-gradient(to bottom, rgba(252,251,248,0), rgba(252,251,248,.96));
  pointer-events: none;
}
.evidence-full .janela .mais {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  z-index: 2; font-size: 12.5px; font-weight: 600; letter-spacing: .02em;
  color: var(--laranja); background: var(--papel);
  border: 1px solid var(--linha-forte); border-radius: 999px; padding: 7px 16px;
  pointer-events: none; white-space: nowrap;
}
.evidence-full img {
  width: 100%; height: auto; display: block;
  min-height: 120px; background: var(--bege);
  border-radius: 18px; border: 1px solid var(--linha-forte);
}
.evidence-full .janela img {
  border: 0; border-radius: 0;
  max-height: 620px; object-fit: cover; object-position: top center;
}
.evidence-full figcaption {
  margin-top: 12px; font-size: 13.5px; line-height: 1.55; color: var(--cinza-claro);
}

/* =========================================================================
   8. MÓDULO DO SITE
   ========================================================================= */

/* Antes e depois do clique, lado a lado. */
.evidence-pair {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px; margin: 0 0 30px;
}
.evidence-pair figure { margin: 0; }
.evidence-step {
  display: inline-block; margin-bottom: 12px;
  padding: 6px 14px; border-radius: 999px;
  background: var(--bege); border: 1px solid var(--linha-forte);
  font-size: 12.5px; font-weight: 600; color: var(--tinta-media);
}
.evidence-pair img {
  width: 100%; height: auto; display: block;
  border-radius: 16px; border: 1px solid var(--linha-forte);
  background: #fff;
}
.evidence-pair figcaption {
  margin-top: 10px; font-size: 13px; line-height: 1.55; color: var(--cinza-claro);
}

/* Qualquer imagem ampliável ganha o cursor de lupa (classe posta pelo JS). */
.is-zoomable { cursor: zoom-in; }

/* A correção indicada. */
.fix-box {
  display: flex; gap: 28px; align-items: flex-start;
  padding: 28px 30px; margin: 0 0 34px;
  background: var(--creme); border: 1px solid var(--laranja-borda); border-radius: 20px;
}
.fix-label {
  flex: 0 0 auto;
  padding: 6px 14px; border-radius: 999px; background: var(--laranja); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
  white-space: nowrap;
}
.fix-box h3 { margin: 0 0 16px; max-width: 34ch; }
.fix-box p { margin: 16px 0 0; font-size: 15.5px; line-height: 1.55; color: #6B5B50; max-width: 62ch; }

.url-change { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.url-change code {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 15px;
  padding: 10px 14px; border-radius: 10px;
  background: var(--vermelho-fundo); border: 1px solid var(--vermelho-borda); color: var(--vermelho);
}
.url-change code span {
  font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  padding: 3px 8px; border-radius: 999px;
  background: var(--vermelho); color: #fff;
}
.url-change b { font-size: 20px; color: var(--cinza-pedra); }
.url-change code.url-good {
  background: var(--verde-fundo); border-color: var(--verde-borda); color: var(--verde);
}
.url-change code.url-good span { background: var(--verde); }

/* Achados em cartão. Serve para os 2 do site e para os 3 dos concorrentes. */
.site-findings {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 22px; margin: 30px 0 26px;
}
.site-findings article {
  padding: 26px 28px; background: #FCFAF7;
  border: 1px solid var(--linha); border-radius: 20px;
}
.rivals-module .site-findings article { background: #fff; }
.finding-number {
  display: block; margin-bottom: 10px;
  font-family: var(--serif); font-style: italic; font-size: 30px; line-height: 1;
  color: var(--cinza-pedra);
}
.site-findings h3 { margin: 0 0 12px; max-width: 32ch; }
.site-findings p { font-size: 15.5px; line-height: 1.55; color: var(--cinza); margin: 0 0 14px; }
.site-findings p:last-child { margin-bottom: 0; }
.recommendation {
  margin: 0 !important; padding: 14px 16px;
  background: var(--creme); border-radius: 12px;
  font-size: 15px !important; color: #6B5B50 !important;
}
.recommendation strong { color: var(--laranja); }

/* O que já está bom. */
.existing-strength {
  padding: 22px 26px; border-radius: 18px;
  background: var(--verde-fundo); border: 1px solid var(--verde-borda);
}
.existing-strength strong {
  display: block; margin-bottom: 8px; font-size: 15px; color: var(--verde);
}
.existing-strength p { margin: 0; font-size: 15.5px; line-height: 1.6; color: #3F5147; max-width: 82ch; }

/* =========================================================================
   9. MÓDULO DE PRIORIDADES
   ========================================================================= */

.priorities-module { background: var(--creme); border-color: var(--laranja-borda); }

.action-list { list-style: none; margin: 0 0 40px; padding: 0; }
.action-list li {
  display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 8px 22px;
  padding: 26px 0; border-top: 1px solid var(--laranja-borda);
}
.action-list li:last-child { border-bottom: 1px solid var(--laranja-borda); }
.action-list li > span {
  font-family: var(--serif); font-style: italic; font-size: 30px; line-height: 1;
  color: var(--laranja);
}
.action-list h3 { margin: 0 0 8px; max-width: 42ch; }
.action-list p { margin: 0 0 10px; font-size: 16px; line-height: 1.55; color: #6B5B50; max-width: 72ch; }
.action-list small { font-size: 13px; color: #9A897C; }

/* Fecho: bloco escuro, o mesmo preto do original. */
.report-end {
  padding: 44px 46px; border-radius: 22px;
  background: var(--tinta); color: #fff;
}
.report-end .eyebrow { color: var(--laranja-luz); margin-bottom: 20px; }
.report-end h3 {
  font-size: clamp(25px, 3vw, 38px); line-height: 1.15; letter-spacing: -0.02em;
  margin: 0 0 16px; max-width: 32ch;
}
.report-end p { margin: 0; font-size: 17px; line-height: 1.55; color: rgba(255,255,255,.72); max-width: 60ch; }

/* =========================================================================
   10. LIGHTBOX
   ========================================================================= */

#image-viewer {
  width: min(1200px, 94vw); max-width: 94vw; max-height: 94vh;
  padding: 0; border: 0; background: transparent; overflow: visible;
  margin: auto;
}
#image-viewer::backdrop {
  background: rgba(24, 20, 16, .86);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
#large-image {
  display: block; width: 100%; max-height: 78vh; object-fit: contain;
  background: #fff; border-radius: 14px;
}
#image-caption {
  margin: 14px auto 0; max-width: 78ch; text-align: center;
  font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.8);
}
#close-image {
  position: absolute; top: -46px; right: 0;
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  color: #fff; background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.3); border-radius: 999px;
  padding: 8px 16px; cursor: pointer;
}
#close-image:hover { background: rgba(255,255,255,.24); }

/* =========================================================================
   11. MODO GRAVAÇÃO
   Um pouco mais de corpo na tipografia e barra de rolagem escondida, para
   gravar a tela sem a barra aparecendo no vídeo.
   ========================================================================= */

html.modo-gravacao { scrollbar-width: none; -ms-overflow-style: none; }
html.modo-gravacao::-webkit-scrollbar { width: 0; height: 0; }
html.modo-gravacao body { font-size: 18.5px; }
html.modo-gravacao .report-module { padding-top: 52px; padding-bottom: 54px; }
html.modo-gravacao .module-heading > p:last-child,
html.modo-gravacao .module-intro { font-size: 19px; }
html.modo-gravacao .map-reading p { font-size: 17px; }
html.modo-gravacao .destaque-leitura p { font-size: 18px; }

/* =========================================================================
   12. RESPONSIVO
   Tudo vira uma coluna, nada de informação escondida (só o botão de
   gravação sai, porque é ferramenta de tela e não conteúdo do relatório).
   ========================================================================= */

@media (max-width: 1000px) {
  .cover-heading { grid-template-columns: 1fr; gap: 32px; }
  .report-summary { grid-template-columns: 1fr; }
  .grid-map-wrap { grid-template-columns: 1fr; gap: 20px; }
  .grid-legend { flex-direction: row; flex-wrap: wrap; gap: 12px 22px; }
  .evidence-pair { grid-template-columns: 1fr; }
  .report-module { padding: 36px 30px 38px; }
  .report-end, .destaque-leitura { padding: 30px 28px; }
}

@media (max-width: 760px) {
  :root { --altura-nav: 58px; }

  /* A coluna de avaliações É o argumento desta seção: são os 9, 2 e 10 contra os 52
     dela. Numa tela estreita a tabela rolava dentro da caixa e justamente essa coluna
     ficava fora da vista, deixando visível só nome e nota. A categoria sai no celular
     (ela é retomada em texto nos cartões logo abaixo) e as quatro que sustentam o
     argumento passam a caber sem rolagem. */
  .table-scroll .rivals-table { min-width: 0; font-size: 13.5px; }
  /* Ficam POSIÇÃO, EMPRESA e AVALIAÇÕES. Nota e categoria saem: as duas são
     retomadas em texto logo abaixo ("4,9 com 52 avaliações" no bloco de leitura e
     as categorias no cartão 01), enquanto o número de avaliações só existe aqui. */
  .table-scroll .rivals-table th:nth-child(3), .table-scroll .rivals-table td:nth-child(3),
  .table-scroll .rivals-table th:nth-child(5), .table-scroll .rivals-table td:nth-child(5) { display: none; }
  .table-scroll .rivals-table td:first-child, .table-scroll .rivals-table th:first-child { width: 52px; }
  .table-scroll .rivals-table th, .table-scroll .rivals-table td { padding-left: 10px; padding-right: 10px; }
  .desktop-break { display: none; }
  .record-button { display: none; }
  .report-nav { padding: 8px 18px; gap: 12px; }
  .report-nav nav { gap: 2px; }
  .report-nav nav a { padding: 7px 10px; font-size: 12px; }
  .report-cover { padding: 34px 20px 22px; }
  .cover-heading { padding-bottom: 28px; }
  .report-module {
    --full: 100%;
    width: 100%;
    margin: 44px 0;
    padding: 28px 22px 30px;
    border-radius: 20px;
  }
  .report-end { padding: 28px 22px; border-radius: 18px; }
  .map-reading { padding: 18px 20px; }
  .destaque-leitura { padding: 24px 22px; border-radius: 18px; }
  /* três números empilhados viram lista, o número ao lado da explicação */
  .grid-numeros { grid-template-columns: 1fr; }
  .grid-numeros div { display: flex; align-items: center; gap: 18px; padding: 16px 20px; }
  .grid-numeros div + div { border-left: 0; border-top: 1px solid var(--laranja-borda); }
  .grid-numeros b { margin: 0; min-width: 84px; font-size: 34px; }
  .grid-numeros span { max-width: none; }
  .pino { font-size: 11px; }
  .fix-box { flex-direction: column; gap: 16px; padding: 22px 20px; }
  /* de lado não cabe: a troca de endereço vira de cima para baixo */
  .url-change { flex-direction: column; align-items: flex-start; gap: 10px; }
  .url-change b { transform: rotate(90deg); margin-left: 18px; }
  .action-list li { grid-template-columns: 42px minmax(0, 1fr); gap: 6px 14px; padding: 20px 0; }
  .action-list li > span { font-size: 24px; }
  .original-note { padding: 12px 14px; font-size: 13px; }
  #close-image { top: auto; bottom: -44px; right: 50%; transform: translateX(50%); }
  #image-caption { font-size: 13px; }
}

/* =========================================================================
   13. IMPRESSÃO
   ========================================================================= */

@media print {
  .report-nav, .skip, .record-button, #image-viewer { display: none !important; }
  html { scroll-behavior: auto; }
  .report-module {
    --full: 100%;
    width: 100%; margin: 22px 0; padding: 0;
    border: 0; background: transparent;
    break-inside: avoid; page-break-inside: avoid;
  }
  .report-cover { padding: 0; }
  .method[open] > *:not(summary) { display: block; }
  .method summary { border: 0; background: transparent; padding-left: 0; }
  .table-scroll { overflow: visible; }
  .rivals-table { min-width: 0; font-size: 12px; }
  .report-end, .destaque-leitura {
    background: #fff; color: var(--tinta); border: 2px solid var(--tinta);
  }
  .report-end p, .destaque-leitura p { color: var(--cinza); }
  .report-end .eyebrow { color: var(--laranja); }
  .destaque-leitura b { color: var(--laranja); }
  .report-summary a, .site-findings article, .fix-box, .grid-map,
  .existing-strength, .ressalva-box, .evidence-pair figure, .evidence-full {
    break-inside: avoid; page-break-inside: avoid;
  }
}

/* Selo de data injetado pelo ampliar.py em cada título do relatório de agosto.
   Existe porque o aviso do topo não acompanha a rolagem: sem ele, "#14" (agosto)
   e "não aparece" (setembro) se leem como contradição em vez de duas datas. */
.selo-linha { margin: 0 0 10px; }
#relatorio-original .selo-linha + h2 { margin-top: 0; }

/* =========================================================================
   O QUE MUDOU DESDE AGOSTO
   Existe porque o relatório de agosto pede uma correção que já foi feita
   (a categoria saiu de Bricklayer para Paving contractor). Sem este bloco,
   as duas seções se leem como contradição em vez de acompanhamento.
   ========================================================================= */
.changed-list {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 20px; margin-top: 30px;
}
.changed-list article {
  padding: 24px 26px 26px; border-radius: var(--raio);
  border: 1px solid var(--linha-forte); background: var(--papel);
}
.changed-list article.feito { border-color: var(--verde-borda); background: var(--verde-fundo); }
.changed-list article.novo  { border-color: var(--laranja-borda); background: var(--creme); }
.changed-tag {
  display: inline-block; margin-bottom: 13px;
  font-family: var(--sans); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px;
  color: var(--cinza); background: var(--bege);
}
.changed-list .feito .changed-tag { color: var(--verde); background: #DDEAE1; }
.changed-list .novo  .changed-tag { color: var(--laranja); background: #FFE3D2; }
.changed-list h3 {
  font-family: var(--serif); font-size: 21px; line-height: 1.2;
  margin: 0 0 10px; color: var(--tinta);
}
.changed-list p { font-size: 14.5px; line-height: 1.6; color: var(--tinta-media); margin: 0; }
.changed-module .ressalva { margin-top: 26px; }

/* O card "sem mudança" fica de propósito com o estilo base, sem cor de veredito:
   não é conquista nem pendência, é o que continuou igual. Regra explícita para
   que a ausência de cor se leia como decisão, e não como esquecimento. */
.changed-list article.igual { border-color: var(--linha-forte); background: var(--papel); }