/* fq · #perguntas — "Fofocas com respaldo" */
.fq-grade {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.fq-cabeca { position: sticky; top: 3.5rem; padding-top: 1rem; }
.fq-abre { margin: 2.2rem 0 0; padding: 0; }
.fq-abre .wf-texto { margin: 0; }
.fq-legenda { list-style: none; margin: 2.4rem 0 0; padding: 1.4rem 0 0; display: flex; flex-wrap: wrap; gap: .8rem 1.8rem; border-top: 1px solid color-mix(in oklab, var(--tinta) 13%, transparent); max-width: 30rem; }
.fq-legenda li { display: inline-flex; align-items: center; gap: .55em; font-size: .78rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--tinta-suave); }
.fq-legenda b { font-family: var(--f-titulo); font-weight: 400; font-size: 1.5rem; letter-spacing: 0; color: var(--tinta); line-height: 1; }
.fq-abre__fala { margin: 1.3rem 0 0; font-size: var(--t-sub); line-height: 1.2; color: var(--tinta); max-width: 28rem; }

/* ---------- lista ---------- */
.fq-lista { display: flex; flex-direction: column; }
.fq-item {
  position: relative; border-radius: 26px;
  border: 1px solid transparent;
  transition: background-color .7s var(--ease), border-color .7s var(--ease), box-shadow .7s var(--ease), margin .7s var(--ease);
}
.fq-item + .fq-item::before {
  content: ''; position: absolute; left: 1.4rem; right: 1.4rem; top: 0; height: 1px;
  background: color-mix(in oklab, var(--tinta) 13%, transparent);
  transition: opacity .5s;
}
.fq-item.fq-aberta {
  margin-block: .6rem;
  background: color-mix(in oklab, white 62%, transparent);
  border-color: color-mix(in oklab, white 80%, transparent);
  box-shadow: 0 30px 60px -36px color-mix(in oklab, var(--outono) 45%, transparent), 0 8px 20px -14px color-mix(in oklab, var(--outono) 25%, transparent);
}
.fq-item.fq-aberta::before, .fq-item.fq-aberta + .fq-item::before { opacity: 0; }

.fq-q { margin: 0; font: inherit; }
.fq-botao {
  all: unset; box-sizing: border-box; cursor: pointer;
  display: grid; grid-template-columns: 3.4rem 1fr 2.6rem; grid-template-rows: auto auto;
  column-gap: .8rem; align-items: center;
  width: 100%; min-height: 48px; padding: 1.25rem 1.1rem 1.25rem .6rem;
  border-radius: 26px;
}
.fq-botao:focus-visible { outline: 2px solid var(--magenta); outline-offset: -2px; }
.fq-tipo { grid-column: 2; display: flex; gap: .7em; align-items: baseline; font-size: .72rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-suave); }

/* mentira: aberta, o mito é riscado (mesmo gesto do anel) */
.fq-risco {
  background: linear-gradient(color-mix(in oklab, var(--verao) 85%, transparent), color-mix(in oklab, var(--verao) 85%, transparent)) no-repeat 0 58% / 0% .08em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size 1.1s var(--ease) .15s;
}
.fq-aberta .fq-risco { background-size: 100% .08em; }
.fq-texto {
  grid-column: 2; margin-top: .3rem;
  font-family: var(--f-titulo); font-size: clamp(1.3rem, 1.05rem + .7vw, 1.75rem); line-height: 1.16; color: var(--tinta);
  text-wrap: pretty; transition: color .5s;
}
.fq-botao:hover .fq-texto { color: var(--outono); }
.fq-mais {
  grid-column: 3; grid-row: 1 / 3; justify-self: center; position: relative;
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  border: 1px solid color-mix(in oklab, var(--tinta) 16%, transparent);
  transition: background-color .5s var(--ease), border-color .5s var(--ease);
}
.fq-mais::before, .fq-mais::after { content: ''; position: absolute; left: 30%; top: calc(50% - .75px); width: 40%; height: 1.5px; background: var(--tinta); transition: transform .6s var(--ease), background-color .5s; }
.fq-mais::after { transform: rotate(90deg); }
.fq-aberta .fq-mais { background: var(--magenta); border-color: var(--magenta); }
.fq-aberta .fq-mais::before, .fq-aberta .fq-mais::after { background: #fff; }
.fq-aberta .fq-mais::after { transform: rotate(0deg); }

/* o ponto da estação; aberta, ele ganha o anel das estações em volta */
.fq-ponto {
  grid-row: 1 / 3; justify-self: center; position: relative;
  width: .8rem; height: .8rem; border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--c) 30%, transparent), inset 0 0 0 1px color-mix(in oklab, var(--tinta) 14%, transparent);
  transition: transform .9s var(--ease), box-shadow .9s var(--ease);
}
.fq-ponto::before {
  content: ''; position: absolute; inset: -1.05rem; border-radius: 50%;
  background: conic-gradient(from 200deg in oklch, var(--inverno), var(--primavera), var(--verao), color-mix(in oklab, var(--outono) 75%, var(--verao)), var(--inverno));
  -webkit-mask: radial-gradient(closest-side, transparent 76%, #000 82%, #000 95%, transparent 100%);
          mask: radial-gradient(closest-side, transparent 76%, #000 82%, #000 95%, transparent 100%);
  opacity: 0; transform: scale(.3) rotate(-120deg);
  transition: opacity .9s var(--ease), transform 1.2s var(--ease);
}
.fq-aberta .fq-ponto { box-shadow: 0 0 0 3px color-mix(in oklab, var(--c) 18%, transparent); }
.fq-aberta .fq-ponto::before { opacity: 1; transform: scale(1) rotate(0deg); animation: wf-gira 40s linear 1.2s infinite; }

/* ---------- resposta ---------- */
.fq-r { display: grid; grid-template-rows: 1fr; }
.fq-r__in { overflow: hidden; min-height: 0; padding: 0 3.6rem 0 4.8rem; }
.fq-r__in > :first-child { margin-top: .2rem; }
.fq-r__in > :last-child { margin-bottom: 1.8rem; }
.fq-r p { margin: 0 0 .75rem; font-size: var(--t-corpo); font-weight: 350; line-height: 1.6; color: var(--tinta-suave); max-width: 34rem; }
.fq-r .fq-curta { font-family: var(--f-titulo); font-style: italic; font-size: clamp(1.4rem, 1.2rem + .6vw, 1.85rem); line-height: 1.15; color: var(--outono); margin-bottom: .6rem; }
.fq-r .fq-verdade { font-size: .75rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--outono); margin-bottom: .4rem; }
.fq-r .fq-selo {
  display: inline-block; max-width: 23rem; text-wrap: balance;
  font-size: 1rem; font-weight: 600; line-height: 1.3; color: #fff;
  background: var(--magenta); padding: .4em .8em .45em;
  margin: 0 0 1.1rem -.2rem;
  box-shadow: 0 10px 22px -12px color-mix(in oklab, var(--magenta) 80%, transparent);
  transform: rotate(-1.2deg); transform-origin: 0 50%;
}
.js .fq-r .fq-selo { transition: transform .9s var(--ease) .2s, opacity .6s var(--ease) .2s; }
.js .fq-item:not(.fq-aberta) .fq-selo { transform: rotate(-6deg) scale(.85); opacity: 0; }
.fq-r .fq-curta + p, .fq-r .fq-verdade + p { color: var(--tinta); }
.js .fq-r { transition: grid-template-rows .75s var(--ease), visibility .75s; }
.js .fq-item:not(.fq-aberta) .fq-r { grid-template-rows: 0fr; visibility: hidden; }

/* ---------- fecho ---------- */
.fq-fecho {
  margin-top: clamp(4.5rem, 9vw, 8rem);
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: center;
  padding: clamp(2rem, 4vw, 3.6rem);
  border-radius: 36px;
  background: color-mix(in oklab, white 45%, transparent);
  border: 1px solid color-mix(in oklab, white 75%, transparent);
  box-shadow: 0 40px 80px -50px color-mix(in oklab, var(--outono) 45%, transparent);
}
.fq-antes { margin: 0; display: flex; flex-direction: column; gap: .35rem; font-size: clamp(1.05rem, .98rem + .3vw, 1.25rem); font-weight: 350; color: var(--tinta-suave); }
.fq-antes s { text-decoration-color: color-mix(in oklab, var(--verao) 90%, transparent); text-decoration-thickness: .14em; }
.fq-pergunte {
  margin: 1.4rem 0 0; font-family: var(--f-titulo); font-size: var(--t-sec); line-height: 1.02; letter-spacing: -.012em;
  color: var(--tinta); text-wrap: balance;
}
.fq-pergunte em { color: var(--outono); }
.fq-form { display: flex; flex-direction: column; align-items: flex-start; gap: .9rem; }
.fq-form__rotulo { display: inline-flex; align-items: center; gap: .6em; font-size: .75rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--tinta); }
.fq-form__rotulo .wf-ponto { box-shadow: 0 0 0 3px color-mix(in oklab, var(--tinta-suave) 22%, transparent); }
.fq-campo {
  width: 100%; resize: vertical; min-height: 6rem; font: inherit; font-size: 1rem; line-height: 1.5; color: var(--tinta);
  padding: 1rem 1.15rem; border-radius: 20px; border: 1px solid color-mix(in oklab, var(--tinta) 16%, transparent);
  background: color-mix(in oklab, var(--papel) 85%, white);
  transition: border-color .4s, box-shadow .4s;
}
.fq-campo::placeholder { color: color-mix(in oklab, var(--tinta-suave) 80%, transparent); }
.fq-campo:focus { border-color: var(--magenta); box-shadow: 0 0 0 4px color-mix(in oklab, var(--primavera) 60%, transparent); outline: none; }
.fq-enviar { border: 0; font: inherit; cursor: pointer; text-align: left; }
.fq-aviso { margin: .4rem 0 0; font-size: .8rem; color: var(--tinta-suave); }

/* ---------- celular ---------- */
@media (max-width: 899px) {
  .fq-grade { grid-template-columns: 1fr; gap: 2.5rem; }
  .fq-cabeca { position: static; padding-top: 0; }
  .fq-lista { margin-inline: calc(var(--margem) * -.5); }
  .fq-botao { grid-template-columns: 2.6rem 1fr 2.6rem; column-gap: .6rem; padding: 1.1rem .6rem 1.1rem .3rem; }
  .fq-item + .fq-item::before { left: .9rem; right: .9rem; }
  .fq-ponto::before { inset: -.85rem; }
  .fq-tipo { font-size: .875rem; letter-spacing: .12em; }
  .fq-r__in { padding: 0 1.1rem 0 3.5rem; }
  .fq-r .fq-selo { font-size: .9rem; }
  .fq-legenda { gap: .6rem 1.3rem; }
  .fq-legenda li { font-size: .875rem; letter-spacing: .12em; }
  .fq-fecho { grid-template-columns: 1fr; align-items: start; padding: 1.8rem 1.3rem; border-radius: 28px; margin-inline: calc(var(--margem) * -.5); }
  .fq-form { align-items: stretch; }
  .fq-enviar { justify-self: start; }
  .fq-aviso, .fq-form__rotulo { font-size: .875rem; }
}
@media (prefers-reduced-motion: reduce) {
  .fq-aberta .fq-ponto::before { animation: none; }
}