/* =========================================================
   B2 Rocket Layout — Distribuidora Paris
   faq.css: sanfona de perguntas, em dois grupos.

   Medida de leitura, não de grade: resposta é texto corrido e a linha precisa
   caber no olho. Por isso a coluna é estreita mesmo em monitor grande.
   ========================================================= */

.brl-faq-topo{
  max-width:var(--paris-larg);
  margin:0 auto;
  padding:clamp(56px, 6vw, 92px) var(--paris-pad) 0;
  text-align:center;
}

/* Duas colunas: o assunto fica à esquerda, acompanhando a rolagem, e as
   perguntas correm à direita. Numa página de pouco conteúdo, é a composição
   que sustenta — lista corrida de oito itens não tem o que mostrar. */

.brl-faq{
  max-width:var(--paris-larg);
  margin:clamp(48px, 5vw, 80px) auto 0;
  padding:0 var(--paris-pad);
}
.brl-faq-grupo{
  display:grid;
  grid-template-columns:minmax(0,230px) minmax(0,1fr);
  gap:clamp(32px, 4vw, 72px);
}
.brl-faq-grupo + .brl-faq-grupo{margin-top:clamp(56px, 5.5vw, 88px)}

.brl-faq-coluna{
  position:sticky;
  top:120px;
  align-self:start;
}
.brl-faq-coluna .brl-rotulo{
  margin:0;
  /* Serifada na coluna do assunto e reta na pergunta: as fontes trocam de
     papel. E aqui o assunto deixa de ser rótulo para virar título de bloco —
     em corpo grande, caixa alta com espaçamento largo não funciona: a serifada
     precisa de caixa mista e espaçamento fechado para ter desenho. */
  font-family:var(--fonte-titulo);
  font-size:clamp(28px, 2.8vw, 36px);
  font-weight:600;
  line-height:1.12;
  letter-spacing:-.01em;
  text-transform:none;
  padding-left:0;
  color:var(--paris-azul);
}
/* O número do grupo em serifada grande e clara: pesa como marca d'água, dá
   escala à coluna e não compete com as perguntas. */
.brl-faq-conta{
  margin:16px 0 0;
  font-family:var(--fonte-titulo);
  font-size:44px;line-height:1;
  color:var(--paris-marcador);
}

.brl-faq-lista{
  list-style:none;
  margin:0;padding:0;
  border-top:1px solid var(--paris-linha);
}
.brl-faq-item{
  margin:0;
  border-bottom:1px solid var(--paris-linha);
}
.brl-faq-item h3{margin:0;font-size:inherit;font-weight:inherit}

/* Especificidade acima do reset global, senão o recheio e a largura do botão
   são anulados por ele. */
.brl-faq-item .brl-faq-p{
  width:100%;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:start;
  gap:20px;
  padding:17px 0;
  border:0;background:none;cursor:pointer;
  text-align:left;
  font-family:var(--fonte-texto);
  font-size:19px;font-weight:600;line-height:1.4;
  letter-spacing:-.005em;
  color:var(--paris-azul);
  /* O tema aplica white-space:nowrap em button, e pergunta longa não cabe
     numa linha. Declarado aqui, com especificidade acima da dele. */
  white-space:normal;
  /* ver nota sobre !important na cor, em marcas.css */
  overflow-wrap:break-word;
  transition:color .2s ease;
}
.brl-faq-item .brl-faq-p,
.brl-faq-item .brl-faq-p:focus,
.brl-faq-item .brl-faq-p:active{color:var(--paris-azul) !important}
.brl-faq-item .brl-faq-p:hover{color:var(--paris-vermelho) !important}

.brl-faq-num{
  font-family:var(--fonte-texto);
  font-size:12px;font-weight:600;
  letter-spacing:.12em;
  color:var(--paris-vermelho);
  padding-top:9px;
}
.brl-faq-txt{display:block;min-width:0}

/* O sinal é um mais que vira menos: dois traços retos, sem arredondamento. */
.brl-faq-sinal{
  position:relative;
  width:18px;height:18px;
  margin-top:7px;
}
.brl-faq-sinal::before,
.brl-faq-sinal::after{
  content:"";
  position:absolute;left:0;top:50%;
  width:18px;height:1px;
  background:currentColor;
  transition:transform .3s ease,opacity .2s ease;
}
.brl-faq-sinal::after{transform:rotate(90deg)}
.brl-faq-item.e-aberto .brl-faq-sinal::after{transform:rotate(0deg);opacity:0}

/* A abertura anima a altura real sem JavaScript medir nada: a linha do grid
   vai de 0fr a 1fr e o navegador resolve o resto. */
.brl-faq-r{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .32s ease;
}
.brl-faq-item.e-aberto .brl-faq-r{grid-template-rows:1fr}
.brl-faq-r > div{overflow:hidden}
.brl-faq-r p{
  margin:0 0 14px;
  padding-left:38px;
  font-size:16px;line-height:1.8;color:var(--paris-tinta-2);
  max-width:62ch;
}
.brl-faq-r > div > p:last-child{margin-bottom:24px}
.brl-faq-r a{
  color:var(--paris-vermelho);
  border-bottom:1px solid rgba(151,33,32,.35);
  word-break:break-word;
}
.brl-faq-r a:hover{border-bottom-color:var(--paris-vermelho)}

/* ---------- chamada final ---------- */

.brl-chamada{
  max-width:var(--paris-larg);
  margin:clamp(72px, 7vw, 110px) auto 0;
  padding:0 var(--paris-pad);
  text-align:center;
}
.brl-chamada-par{
  margin:26px auto 0;
  max-width:520px;
  font-size:17px;line-height:1.8;color:var(--paris-tinta-2);
}
.brl-chamada-acoes{
  margin:34px 0 0;
  display:flex;align-items:center;justify-content:center;
  gap:34px;flex-wrap:wrap;
}

@media (prefers-reduced-motion:reduce){
  .brl-faq-r{transition:none}
  .brl-faq-sinal::before,.brl-faq-sinal::after{transition:none}
}

@media (max-width:1100px){
  .brl-faq-grupo{grid-template-columns:minmax(0,180px) minmax(0,1fr)}
  .brl-faq-conta{font-size:38px}
}

@media (max-width:860px){
  .brl-faq-grupo{grid-template-columns:minmax(0,1fr);gap:16px}
  .brl-faq-coluna{position:static;display:flex;align-items:baseline;gap:14px}
  .brl-faq-conta{margin:0;font-size:26px}
  .brl-faq-item .brl-faq-p{font-size:17px;padding:15px 0;gap:14px}
  .brl-faq-num{font-size:11px;padding-top:6px}
  .brl-faq-r p{font-size:15.5px;padding-left:30px}
  .brl-chamada-acoes{gap:24px}
}