/* perguntas · "Antes de marcar" — prefixo fq- */

.fq-secao {
  position: relative;
  isolation: isolate;
  padding: var(--wf-secao) var(--wf-margem);
  background: var(--hd-papel);
  interpolate-size: allow-keywords;
  overflow-x: clip;
}
/* luz: névoa atrás do retrato, pêssego do lado das respostas; some antes das bordas */
.fq-secao::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(42% 46% at 16% 44% in oklab, color-mix(in oklab, var(--hd-nevoa) 78%, transparent), transparent),
    radial-gradient(38% 40% at 92% 62% in oklab, color-mix(in oklab, var(--hd-pessego) 62%, transparent), transparent);
}
.fq-dentro {
  max-width: var(--wf-largura);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 4.4fr) minmax(0, 7.6fr);
  gap: clamp(2.5rem, 6.5vw, 7rem);
  align-items: start;
}

/* quem responde */
.fq-quem { position: sticky; top: clamp(1.25rem, 6vh, 4rem); }
.fq-retrato { position: relative; padding-bottom: 1.9rem; }
.fq-retrato img {
  display: block; width: 100%; height: min(64vh, 33rem); object-fit: cover; object-position: 50% 14%;
  border-radius: 999px 999px 2rem 2rem;
  background: var(--hd-nevoa);
  box-shadow: 0 2.6rem 4rem -2.6rem rgba(90, 60, 40, .55);
}
.fq-retrato figcaption {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  display: flex; align-items: center; gap: .8rem; white-space: nowrap;
  padding: .7rem 1.4rem .7rem 1rem; border-radius: 999px;
  background: color-mix(in oklab, var(--hd-papel-claro) 92%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 1.2rem 2rem -1.2rem rgba(90, 60, 40, .6), 0 0 0 1px rgba(255, 255, 255, .7) inset;
}
.fq-retrato figcaption::before { content: ""; flex: none; width: .55rem; height: .55rem; border-radius: 50%; background: var(--hd-laranja); box-shadow: 0 0 0 4px color-mix(in oklab, var(--hd-ambar) 30%, transparent); }
.fq-retrato figcaption b { display: block; font-family: var(--hd-serifa); font-weight: 400; font-size: 1.2rem; line-height: 1.1; }
.fq-retrato figcaption span { display: block; margin-top: .15rem; font-size: var(--wf-mini); color: var(--hd-tinta-suave); }
.fq-retrato figcaption > i { font-style: normal; }
.fq-voz { position: relative; margin-top: 1.7rem; padding-left: 2.4rem; }
.fq-voz::before { content: "“"; position: absolute; left: 0; top: -.35rem; font-family: var(--hd-serifa); font-size: 4rem; line-height: 1; color: var(--hd-laranja); }
.fq-voz blockquote p { font-family: var(--hd-serifa); font-style: italic; font-size: 1.3rem; line-height: 1.3; }
.fq-voz figcaption { margin-top: .6rem; font-size: var(--wf-mini); letter-spacing: .04em; color: var(--hd-tinta-suave); }

/* título */
.fq-titulo { margin-top: 1.4rem; font-size: clamp(2.3rem, 1.2rem + 3.4vw, 4.4rem); max-width: 11em; }
.fq-apoio { margin-top: 1.4rem; max-width: 30em; color: var(--hd-tinta-suave); }

/* lista */
.fq-lista { margin-top: clamp(2.2rem, 4vw, 3.6rem); border-top: 1px solid var(--hd-fio); }
.fq-item {
  position: relative;
  margin-inline: -1.75rem; padding-inline: 1.75rem;
  border-radius: 2rem;
  transition: background .6s, box-shadow .6s, margin-block .6s var(--wf-curva);
}
.fq-item::before { content: ""; position: absolute; left: 1.75rem; right: 1.75rem; bottom: 0; height: 1px; background: var(--hd-fio); transition: opacity .4s; }
.fq-item[open] {
  margin-block: .5rem .9rem;
  background: linear-gradient(160deg in oklab, var(--hd-papel-claro), color-mix(in oklab, var(--hd-perola) 70%, var(--hd-pessego)));
  box-shadow: 0 2.4rem 3.6rem -2.6rem rgba(120, 70, 30, .5), 0 0 0 1px rgba(255, 255, 255, .8) inset;
}
.fq-item[open]::before, .fq-item:has(+ .fq-item[open])::before { opacity: 0; }
.fq-lista:has(> .fq-item:first-child[open]) { border-top-color: transparent; }
.fq-pergunta {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr) 3.5rem;
  align-items: center;
  gap: .5rem;
  min-height: 5rem;
  padding: 1.1rem 0;
  cursor: pointer;
  list-style: none;
}
.fq-pergunta::-webkit-details-marker { display: none; }
.fq-pergunta h3 {
  font-family: var(--hd-serifa);
  font-weight: 400;
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
  line-height: 1.08;
  letter-spacing: -.01em;
  text-wrap: balance;
  color: var(--hd-tinta);
  transition: color .4s;
}
.fq-item[open] .fq-pergunta h3 { font-size: clamp(1.6rem, 1.1rem + 1.9vw, 2.7rem); }
.fq-num { font-family: var(--hd-serifa); font-style: italic; font-size: 1.5rem; line-height: 1; color: var(--wf-laranja-texto); }
@media (hover: hover) { .fq-pergunta:hover h3 { color: var(--wf-laranja-texto); } }

/* a forma muda de cima para baixo, como no hero: esfera cheia na primeira pergunta, gota assentada na última.
   Fechada, fica pequena e apagada; aberta, cresce e acende. */
.fq-conta { position: relative; justify-self: end; width: 3.5rem; height: 3.5rem; }
.fq-conta::before {
  content: ""; position: absolute; inset: -38%;
  background: url("../img/gel-0.webp") center / contain no-repeat;
  opacity: .88; transform: scale(.7); filter: saturate(.75);
  transition: opacity .9s var(--wf-curva), transform .9s var(--wf-curva), filter .9s;
}
.fq-conta::after {
  content: ""; position: absolute; inset: -30%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side in oklab, color-mix(in oklab, var(--hd-ambar) 55%, transparent), transparent);
  opacity: 0; transform: scale(.5); transition: opacity .9s, transform .9s var(--wf-curva);
}
.fq-item:nth-child(2) .fq-conta::before { background-image: url("../img/gel-1.webp"); }
.fq-item:nth-child(3) .fq-conta::before { background-image: url("../img/gel-2.webp"); }
.fq-item:nth-child(4) .fq-conta::before { background-image: url("../img/gel-3.webp"); }
.fq-item:nth-child(5) .fq-conta::before { background-image: url("../img/gel-4.webp"); }
.fq-item:nth-child(n+6) .fq-conta::before { background-image: url("../img/gel-5.webp"); }
.fq-item:nth-child(7) .fq-conta::before { scale: -1 1; }
.fq-pergunta:hover .fq-conta::before { opacity: 1; filter: none; }
.fq-item[open] .fq-conta::before { opacity: 1; transform: scale(1.22); filter: none; }
.fq-item[open] .fq-conta::after { opacity: 1; transform: none; }
.fq-pergunta { isolation: isolate; }

/* resposta */
.fq-item::details-content { block-size: 0; overflow: clip; opacity: 0; transition: block-size .7s var(--wf-curva), opacity .5s, content-visibility .7s allow-discrete; }
.fq-item[open]::details-content { block-size: auto; opacity: 1; }
.fq-resposta { padding: .2rem 3.5rem 2.2rem 3.9rem; max-width: 46rem; }
.fq-resposta > * + * { margin-top: 1.1rem; }
.fq-resposta p { color: var(--hd-tinta-suave); }
.fq-fala p { font-family: var(--hd-serifa); font-size: clamp(1.3rem, 1.1rem + .7vw, 1.65rem); line-height: 1.25; color: var(--hd-tinta); text-wrap: pretty; }
.fq-fala footer { display: flex; align-items: center; gap: .7rem; margin-top: .8rem; font-size: var(--wf-mini); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--hd-tinta-suave); }
.fq-fala footer::before { content: ""; width: 1.6rem; height: 1px; background: var(--hd-laranja); }
.fq-seta { display: inline-flex; align-items: center; gap: .5rem; min-height: 3rem; font-weight: 500; color: var(--wf-laranja-texto); }
.fq-seta::after, .fq-caminhos::after { content: "→"; transition: transform .4s var(--wf-curva); }
.fq-seta:hover::after, .fq-caminhos:hover::after { transform: translateX(4px); }
.fq-botao { margin-top: 1.5rem; }

/* os quatro caminhos, numa linha só */
.fq-caminhos { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .3rem .9rem; min-height: 3rem; font-family: var(--hd-serifa); font-style: italic; font-size: 1.5rem; line-height: 1.2; color: var(--wf-laranja-texto); }
.fq-caminhos span + span::before { content: "·"; margin-right: .9rem; color: var(--hd-tinta-suave); font-style: normal; }
.fq-caminhos::after { font-family: var(--hd-sem); font-style: normal; font-size: 1.1rem; }

/* os dois registros */
.fq-registro { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin-bottom: 0; }
.fq-registro dt { font-size: var(--wf-mini); font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--hd-tinta-suave); }
.fq-registro dd { margin: 0; font-family: var(--hd-serifa); font-size: clamp(2.6rem, 2rem + 2.4vw, 4rem); line-height: 1; letter-spacing: -.02em; }
.fq-registro dd.fq-registro-nota { margin-top: .4rem; font-family: var(--hd-sem); font-size: var(--wf-mini); line-height: 1.45; letter-spacing: 0; color: var(--hd-tinta-suave); }

/* tabelas de duas colunas (cirurgias, horários) */
.fq-tabela { margin-bottom: 0; }
.fq-tabela > div { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 1rem; padding: .7rem 0; border-top: 1px solid var(--hd-fio); }
.fq-tabela dt { font-family: var(--hd-serifa); font-style: italic; font-size: 1.2rem; line-height: 1.3; }
.fq-tabela dd { margin: 0; color: var(--hd-tinta-suave); }

/* fecho */
.fq-outra { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem 1rem; margin-top: 2.2rem; padding-left: 3.9rem; }
.fq-outra span { font-family: var(--hd-serifa); font-size: 1.5rem; }

@media (max-width: 900px) {
  .fq-secao::before {
    background:
      radial-gradient(80% 22% at 20% 16% in oklab, color-mix(in oklab, var(--hd-nevoa) 78%, transparent), transparent),
      radial-gradient(80% 26% at 96% 66% in oklab, color-mix(in oklab, var(--hd-pessego) 60%, transparent), transparent);
  }
  .fq-dentro { grid-template-columns: minmax(0, 1fr); gap: 2.2rem; }
  .fq-quem { position: static; order: 2; }
  .fq-coluna { display: contents; }
  .fq-cabeca { order: 1; }
  .fq-lista { order: 3; margin-top: 0; }
  .fq-outra { order: 4; margin-top: -.4rem; padding-left: 0; }
  .fq-retrato img { height: auto; aspect-ratio: 1 / 1.08; object-position: 50% 10%; border-radius: 12rem 12rem 1.75rem 1.75rem; }
  .fq-item { margin-inline: -.75rem; padding-inline: .75rem; border-radius: 1.5rem; }
  .fq-item::before { left: .75rem; right: .75rem; }
  .fq-voz { margin-top: 1.5rem; }
  .fq-pergunta { grid-template-columns: 2.1rem minmax(0, 1fr) 2.9rem; padding: 1rem 0; min-height: 4.4rem; }
  .fq-conta { width: 2.9rem; height: 2.9rem; }
  .fq-num { font-size: 1.25rem; }
  .fq-resposta { padding: .1rem .5rem 1.8rem 2.6rem; }
  .fq-registro { gap: 1rem; }
  .fq-tabela > div { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
  .fq-tabela dt { font-size: 1.1rem; }
  .fq-caminhos { font-size: 1.35rem; gap: .2rem 1.1rem; }
  .fq-caminhos span + span::before { content: none; }
}