/*
 * perguntas-v2.css: só o que é da página Perguntas frequentes v2. O comum está em assets/css/v2.css.
 * Texto em _spec/04-COPY/perguntas-v2.md. Página de consulta: calma, só tipografia no herói, índice por âncoras,
 * seis grupos com título à esquerda e perguntas em <details> à direita.
 */

/* ============================================================ */
/* 1. Herói tipográfico                                           */
/* ============================================================ */
.pagina--perguntas-v2 .heroi--tipo{
  min-height: 0;
  align-items: flex-end;
}
@media (max-width: 700px){ .pagina--perguntas-v2 .heroi--tipo{ background: #F7F9F8; } }
.pagina--perguntas-v2 .heroi--tipo .heroi__texto{
  padding-block: calc(var(--cabecalho-h) + clamp(2.5rem, 7vw, 6rem)) clamp(2rem, 4vw, 3.25rem);
  display: grid;
  gap: 1.5rem;
}
.pagina--perguntas-v2 .heroi h1{
  font-size: clamp(2.375rem, 1rem + 4.4vw, 4.5rem);
  line-height: 1.04;
  max-inline-size: 19ch;
}
.pagina--perguntas-v2 .heroi__apoio{ margin-block-start: 0; max-inline-size: 48ch; }
@media (min-width: 900px){
  .pagina--perguntas-v2 .heroi--tipo .heroi__texto{
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: clamp(2.5rem, 6vw, 6rem);
    align-items: end;
  }
  .pagina--perguntas-v2 .heroi__apoio{ padding-block-end: .6rem; }
}

/* ============================================================ */
/* 2. Índice de grupos: chips-âncora                               */
/* ============================================================ */
.indice{
  position: relative;
  z-index: 2;
  padding-block: .75rem;
  border-block-end: 1px solid var(--linha-v2);
}
.indice__lista{
  display: flex;
  gap: .6rem;
  margin: 0;
  padding: .25rem 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.indice__lista::-webkit-scrollbar{ display: none; }
.indice__lista li{ flex: none; }
.chip{
  display: inline-flex;
  align-items: center;
  min-block-size: 2.75rem;
  padding: .3rem 1.1rem;
  background: #fff;
  border: 1px solid #8E9A93;
  border-radius: 999px;
  font-size: .9375rem;
  line-height: 1.2;
  color: #151A17;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--d-hover, 160ms) var(--ease), border-color var(--d-hover, 160ms) var(--ease), color var(--d-hover, 160ms) var(--ease);
}
.chip:focus-visible{ outline: 2px solid var(--esm); outline-offset: 2px; box-shadow: none; }
.chip[aria-current="true"]{ background: #EAF4EF; border-color: var(--esm); color: var(--esm); }
@media (hover: hover) and (pointer: fine){
  .chip:hover{ background: #EAF4EF; border-color: var(--esm); color: var(--esm); }
}
/* desktop: o índice fica preso logo abaixo do cabeçalho, sem sombra */
@media (min-width: 900px){
  .indice{
    position: sticky;
    top: var(--cabecalho-h);
    background: rgba(247, 249, 248, .96);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
  .indice__lista{ flex-wrap: wrap; overflow: visible; }
}

/* ============================================================ */
/* 3. Grupos de perguntas                                          */
/* ============================================================ */
.pagina--perguntas-v2 main > section.grupo{ padding-block: clamp(2.5rem, 5vw, 5rem); scroll-margin-top: calc(var(--cabecalho-h) + 5rem); }
.pagina--perguntas-v2 .grupo [id]{ scroll-margin-top: calc(var(--cabecalho-h) + 5.5rem); }
.grupo__grade{ display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: start; }
/* a classe "cenas" (usada só pelo fio de luz, que mede a margem do texto por ".cenas .envelope") traz um h2 menor */
.pagina--perguntas-v2 .grupo h2{
  grid-column: auto;
  grid-row: auto;
  align-self: start;
  font-size: clamp(1.875rem, 1.2rem + 2.1vw, 2.875rem);
  line-height: 1.1;
  max-inline-size: 20ch;
}
@media (min-width: 861px){
  .grupo__grade{ grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: clamp(2.5rem, 6vw, 6rem); }
}

/* perguntas: o resumo em Jost 500, a resposta em Jost 400, a nota em corpo menor */
.pagina--perguntas-v2 .faq__item > summary{ font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem); }
.pagina--perguntas-v2 .faq__item:target{ background: linear-gradient(to right, rgba(11, 61, 46, .045), transparent 70%); }
.pagina--perguntas-v2 .faq__resp{ display: grid; gap: .75rem; padding-block-end: 1.6rem; }
.pagina--perguntas-v2 .faq__resp p{ margin: 0; font-size: var(--t-corpo); line-height: 1.65; max-inline-size: 62ch; }
.pagina--perguntas-v2 .faq__resp .nota{
  max-inline-size: 62ch;
  font-size: var(--t-mini);
  line-height: 1.55;
  color: var(--suave);
}
.pagina--perguntas-v2 .faq__resp .nota em{ font-style: italic; }
.nota__ast{ display: block; margin-block-start: .25rem; }
.pagina--perguntas-v2 .faq__resp .faq__link{ font-size: var(--t-pequeno); line-height: 1.5; }
.pagina--perguntas-v2 .faq__resp a{
  color: var(--esm);
  text-decoration: underline;
  text-underline-offset: .22em;
  text-decoration-thickness: 1px;
  border-radius: 3px;
}
.pagina--perguntas-v2 .faq__resp a:focus-visible{ outline: 2px solid var(--esm); outline-offset: 2px; box-shadow: none; }
@media (hover: hover) and (pointer: fine){ .pagina--perguntas-v2 .faq__resp a:hover{ text-decoration-thickness: 2px; } }
.pagina--perguntas-v2 .faq__item > summary{ min-block-size: 3.75rem; }

/* ============================================================ */
/* 4. Fechamento esmeralda, sem foto                                */
/* ============================================================ */
.fecho--sem-foto .fecho__grade{ grid-template-columns: minmax(0, 1fr); }
.fecho--sem-foto .fecho__texto{ max-inline-size: 40rem; }
.fecho .fecho__micro{ margin-block: .9rem 0; font-size: var(--t-pequeno); color: var(--tinta-suave); }