/* QivoN - as 6 paginas de politica
   GERADO por catalogo-sync/gen_politicas_layout.py - NAO editar a mao.

   Linkada SO nas 6, depois do css/tema.css e do css/institucional.css
   (que define a coluna de leitura de 68ch -- ela continua valendo).
   ------------------------------------------------------------------ */

/* ------------------------------------------------------------
   1. DUAS COLUNAS: indice fixo a esquerda, texto a direita.

   `.pol-w` e classe NOVA no wrapper, nao `.sobre-hero-w` direto:
   aquele envolve tambem checkout, conta e obrigado, e virar
   grade mudaria telas que ninguem pediu para tocar.

   240px e medido: "Cuidados com a Joia" e o rotulo mais longo
   do indice e cabe em uma linha a partir de 228px.
   ------------------------------------------------------------ */
@media (min-width: 1025px) {
  .pol-w {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 3rem;
    max-width: 1100px;
    margin: 0 auto;
    align-items: start;
  }
  .pol-idx {
    position: sticky;
    top: 92px;
    /* A pagina mais longa tem 6 secoes; em tela baixa o indice
       inteiro nao cabe e o fim dele ficaria inalcancavel -- que e
       pior que nao grudar. */
    max-height: calc(100vh - 120px);
    overflow: auto;
  }
  .pol-w .sobre-content { padding-top: 0; }
}

/* ------------------------------------------------------------
   2. O INDICE.
   ------------------------------------------------------------ */
/* `min-width: 0` NAO E ENFEITE, e foi o defeito de 17/10/2026.

   `.sobre-hero-w` ja e `display:grid` na propria pagina -- eu li a
   minha media query de 1025px e supus que abaixo dela o wrapper
   fosse bloco. Nao e: vira `grid-template-columns:1fr`.

   E `1fr` e `minmax(AUTO, 1fr)`: o minimo do item e o min-content
   dele. O meu indice de celular e um `<ol>` em flex com
   `white-space:nowrap`, entao o min-content dele e a soma dos
   rotulos. O item estourou a coluna e a `garantia.html` a 390px
   ficou com 659px de documento -- barra horizontal na pagina
   inteira.

   O `overflow-x:auto` do `<ol>` nao salva: quem estoura e o PAI,
   que e o item da grade. */
.pol-idx { padding: 2.2rem 1.5rem 0; min-width: 0; }
.pol-idx-tit {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #5F5C58;
  margin-bottom: .9rem;
}
.pol-idx ol {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--border, #E5E2DD);
}
.pol-idx li { margin: 0; }
.pol-idx a {
  display: block;
  padding: .46rem 0 .46rem .85rem;
  margin-left: -1px;
  border-left: 2px solid transparent;
  font-size: .82rem;
  line-height: 1.45;
  color: #5F5C58;
  text-decoration: none;
  transition: color .15s, border-color .15s;
}
.pol-idx a:hover,
.pol-idx a:focus-visible {
  color: var(--black, #141414);
  border-left-color: var(--teal, #63615F);
}

/* ------------------------------------------------------------
   3. O RODAPE DAS OUTRAS POLITICAS.
   ------------------------------------------------------------ */
.pol-outras {
  border-top: 1px solid var(--border, #E5E2DD);
  margin: 3.5rem 1.5rem 0;
  padding: 2rem 0 3.5rem;
}
.pol-outras-tit {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #5F5C58;
  margin-bottom: 1rem;
}
.pol-outras-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .6rem;
}
.pol-outras a {
  display: block;
  padding: .85rem .9rem;
  border: 1px solid var(--border, #E5E2DD);
  font-size: .8rem;
  line-height: 1.35;
  color: var(--black, #141414);
  text-decoration: none;
  transition: background .15s, border-color .15s;
}
.pol-outras a:hover {
  background: var(--bg, #faf9f7);
  border-color: var(--teal, #63615F);
}

@media (max-width: 1024px) {
  /* O indice vira faixa rolavel acima do texto. Empilhado como lista
     ele empurraria o primeiro paragrafo para fora da tela. */
  .pol-idx { padding: 1.6rem 1.2rem .4rem; }
  .pol-idx ol {
    display: flex;
    gap: .4rem;
    overflow-x: auto;
    border-left: none;
    scrollbar-width: none;
    padding-bottom: .3rem;
  }
  .pol-idx ol::-webkit-scrollbar { display: none; }
  .pol-idx a {
    white-space: nowrap;
    padding: .5rem .85rem;
    border: 1px solid var(--border, #E5E2DD);
    margin-left: 0;
  }
  .pol-idx a:hover { border-color: var(--teal, #63615F); }
  .pol-outras-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ------------------------------------------------------------
   4. O ALVO DA ANCORA NAO PODE FICAR EMBAIXO DO CABECALHO.

   O header e `position:sticky`; sem isto, clicar no indice rola
   ate a secao e o titulo dela para ATRAS da barra. Nada quebra,
   e a pessoa acha que o link levou ao lugar errado.
   ------------------------------------------------------------ */
.sobre-sec[id] { scroll-margin-top: 92px; }

/* ------------------------------------------------------------
   5. O PAR "COBERTO" x "NAO COBERTO", na garantia.

   PUS A CLASSE E ACHEI QUE ESTAVA FEITO. Nao estava: as regras da
   `institucional.css` miram `.sobre-dif-ok .sobre-dif-title`, e
   aquela classe vem dos CARDS da Sobre antiga. Aqui o titulo e um
   `.sobre-h2`. A classe entrou, o seletor nao casou, e as duas
   secoes ficaram identicas na tela -- sem erro, sem aviso, com
   `grep` achando `sobre-dif-ok` dentro do HTML.

   Classe aplicada nao e regra que casa. Quem responde e o
   navegador, e foi ele que respondeu.

   AS CORES SAO LIDAS DA institucional.css, nao digitadas aqui.
   Elas foram escolhidas contra o `--teal-l` e medidas (5,73:1 e
   5,98:1); redigita-las criaria a segunda copia de um numero que
   so vale por ter sido medido.
   ------------------------------------------------------------ */
.sobre-dif-ok, .sobre-dif-no {
  border-left: 3px solid;
  padding-left: 1.4rem;
}
.sobre-dif-ok { border-left-color: #1A6B40; }
.sobre-dif-no { border-left-color: #8A4B00; }
/* O fio acima do titulo some: ele e o separador NEUTRO das demais
   secoes, e aqui a borda da esquerda ja faz esse trabalho com cor. */
.sobre-dif-ok > .sobre-divider,
.sobre-dif-no > .sobre-divider { display: none; }
/* O TITULO FICA PRETO, de proposito.

   Pintar o `.sobre-h2` de verde e ambar foi a primeira tentativa, e
   ela reprova: na Sobre o titulo colorido tinha 11px e MAIUSCULAS
   dentro de um card pequeno, e as cores foram medidas para aquele
   uso. Aqui o h2 e serifado, de 36px, e e o titulo principal da
   secao -- colori-lo puxa o olho para a cor antes do texto e muda
   a hierarquia da pagina inteira.

   A borda carrega o mesmo sentido com menos barulho. */
@media (max-width: 1024px) {
  .sobre-dif-ok, .sobre-dif-no { padding-left: 1rem; }
}