/* fq · Perguntas — a pergunta é a voz da paciente, a resposta é a dela */
.fq{padding-bottom:calc(var(--sec) * .85);overflow-anchor:none}

/* luz da malha (cacau e rosado sobre a noite) */
.fq-luz{position:absolute;inset:0;z-index:-1;pointer-events:none}
.fq-luz i{position:absolute;border-radius:50%;background:radial-gradient(closest-side, var(--c) 0%, color-mix(in oklab, var(--c) 40%, transparent) 50%, transparent 100%)}
.fq-l1{--c:color-mix(in oklab, var(--cacau) 55%, transparent);width:70vw;height:70vw;left:-28vw;bottom:-20vw}
.fq-l2{--c:color-mix(in oklab, var(--rosado) 14%, transparent);width:60vw;height:60vw;right:-22vw;top:-24vw}
.fq-l3{--c:color-mix(in oklab, var(--ouro) 16%, transparent);width:34vw;height:34vw;left:18vw;top:30%}

.fq-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,110px);align-items:start}

/* ---------- lado: título e o par gigante ---------- */
.fq-lado{position:sticky;top:100px;display:flex;flex-direction:column;gap:24px}
@media (min-width:1024px){.fq-titulo{font-size:calc(var(--t-h2) * .8)}}
.fq-titulo .voz-dela{color:var(--creme)}
.fq-intro{font-size:var(--t-texto);line-height:1.5;color:color-mix(in oklab, var(--creme) 82%, transparent);max-width:26em}

/* o par: a pergunta em contorno (o que se quer) e, por cima, a resposta cheia (o que ela entrega) */
.fq-palco,.fq-par{--fq:min(var(--cap-q), calc(148cqi / var(--n, 9)));--fp:min(var(--cap-p), calc(150cqi / var(--m, 8)));position:relative;container-type:inline-size;height:calc(var(--fq) * .74 + var(--fp) * .92)}
.fq-palco{--cap-q:12rem;--cap-p:9.5rem;margin-top:34px}
.fq-palco .fq-rot{position:absolute;left:0;font-family:var(--f-dela);font-style:normal;font-weight:500;font-size:.75rem;letter-spacing:.24em;text-transform:uppercase;line-height:1;color:var(--ouro-claro)}
.fq-rot-q{top:-26px}
.fq-rot-p{top:calc(var(--fq) * .74 + var(--fp) * .92 + 16px);left:calc(5cqi + .06em)!important}
.fq-p-quer,.fq-p-precisa,.fq-p-brilho{display:block;position:absolute;white-space:nowrap;pointer-events:none;user-select:none}
.fq-p-quer{left:0;top:0;font-family:var(--f-sua);font-style:italic;font-weight:300;font-size:var(--fq);line-height:1;letter-spacing:-.02em;color:transparent;-webkit-text-stroke:1.4px color-mix(in oklab, var(--creme) 62%, transparent)}
.fq-p-precisa,.fq-p-brilho{left:5cqi;top:calc(var(--fq) * .74);font-family:var(--f-dela);font-weight:800;font-size:var(--fp);line-height:.92;letter-spacing:-.04em}
.fq-p-precisa{color:var(--creme);text-shadow:0 .05em .22em rgba(20,10,5,.45)}
.fq-p-brilho{color:transparent;background:linear-gradient(100deg, transparent 30%, var(--ouro-claro) 46%, #fff6dc 50%, var(--ouro-claro) 54%, transparent 70%) no-repeat;background-size:250% 100%;background-position:120% 0;-webkit-background-clip:text;background-clip:text;opacity:0}
.fq-brilha .fq-p-brilho{animation:fq-varre 1.5s var(--ease) forwards}
@keyframes fq-varre{0%{opacity:1;background-position:120% 0}80%{opacity:1}100%{opacity:0;background-position:-30% 0}}

/* ---------- lista ---------- */
.fq-lista{border-top:1px solid color-mix(in oklab, var(--creme) 20%, transparent)}
.fq-item{border-bottom:1px solid color-mix(in oklab, var(--creme) 20%, transparent);position:relative}
.fq-item::before{content:"";position:absolute;inset:-1px -28px;border-radius:var(--raio-card);background:linear-gradient(120deg in oklab, color-mix(in oklab, var(--creme) 7%, transparent), color-mix(in oklab, var(--cacau) 10%, transparent));opacity:0;transition:opacity .5s var(--ease);pointer-events:none;z-index:-1}
.fq-on::before{opacity:1}
.fq-on .fq-q-txt{color:var(--ouro-claro)}
.fq-h{margin:0;font:inherit}
.fq-q{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:grid;grid-template-columns:3.2em minmax(0,1fr) 48px;align-items:center;gap:14px;padding:22px 0;min-height:48px;color:var(--creme);-webkit-tap-highlight-color:transparent}
.fq-q:focus-visible{outline:2px solid var(--ouro-claro);outline-offset:4px;border-radius:6px}
.fq-n{font-family:var(--f-dela);font-weight:500;font-size:.875rem;letter-spacing:.2em;color:var(--ouro-claro);align-self:start;padding-top:.75em}
.fq-q-txt{font-family:var(--f-sua);font-style:italic;font-weight:300;font-size:clamp(1.45rem, 1rem + 1.25vw, 2.3rem);line-height:1.12;letter-spacing:-.01em;text-wrap:balance;transition:color .3s}
.fq-q:hover .fq-q-txt{color:var(--ouro-claro)}
.fq-mais{position:relative;width:48px;height:48px;border-radius:50%;border:1px solid color-mix(in oklab, var(--creme) 35%, transparent);transition:background .3s var(--ease),border-color .3s,transform .5s var(--ease)}
.fq-mais::before,.fq-mais::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:1.5px;margin:-.75px 0 0 -8px;background:currentColor;transition:transform .5s var(--ease)}
.fq-mais::after{transform:rotate(90deg)}
.fq-q[aria-expanded="true"] .fq-mais{background:var(--creme);border-color:var(--creme);color:var(--cafe);transform:rotate(180deg)}
.fq-q[aria-expanded="true"] .fq-mais::after{transform:rotate(0)}
.fq-q:hover .fq-mais{border-color:var(--ouro-claro)}

/* painel: aberto sem JS; com JS abre e fecha pela altura */
.fq-painel-in{padding:0 0 0 calc(3.2em + 14px)}
.fq-resp{margin-bottom:34px}
.js .fq-painel{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .6s var(--ease),visibility 0s linear .6s}
.js .fq-painel > .fq-painel-in{min-height:0;overflow:hidden}
.js .fq-on .fq-painel{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .6s var(--ease),visibility 0s}

.fq-resp{border-left:2px solid var(--ouro);padding:4px 0 4px 22px;max-width:36em}
.fq-resp .quem{margin-bottom:12px}
.fq-resp-txt{font-family:var(--f-dela);font-weight:500;font-size:1.1875rem;line-height:1.55;color:var(--creme)}
.fq-resp-txt .w{display:inline-block;white-space:pre}
.fq-assina{margin:22px 0 0}
.fq-assina-topo{margin:0 0 16px}
.fq-assina p{font-family:var(--f-dela);font-weight:800;font-size:var(--t-h3);line-height:1.05;letter-spacing:-.03em;color:var(--ouro-claro)}
.fq-assina-leve p{font-family:var(--f-sua);font-style:italic;font-weight:400;font-size:clamp(1.25rem, 1.05rem + .55vw, 1.6rem);line-height:1.25;letter-spacing:-.005em;color:color-mix(in oklab, var(--creme) 88%, transparent)}
.fq-assina cite{display:block;margin-top:8px;font-style:normal;font-size:var(--t-mini);color:color-mix(in oklab, var(--creme) 75%, transparent)}
.fq-zap{margin-top:14px}
.fq-btn{margin-top:22px}

/* par gigante dentro do painel: só no celular/tablet */
.fq-par{display:none}

/* faixa prática: três respostas curtas, sempre à vista */
.fq-pratico{margin-top:clamp(64px,7vw,110px);padding-top:30px;border-top:1px solid color-mix(in oklab, var(--ouro-claro) 40%, transparent)}
.fq-pr-rot{margin-bottom:28px}
.fq-pr-grade{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr) minmax(0,1.2fr);gap:0}
.fq-pr{padding:0 clamp(20px,2.6vw,44px)}
.fq-pr:first-child{padding-left:0}
.fq-pr:last-child{padding-right:0}
.fq-pr + .fq-pr{border-left:1px solid color-mix(in oklab, var(--creme) 18%, transparent)}
.fq-pr-q{margin:0 0 16px;color:color-mix(in oklab, var(--creme) 86%, transparent);font-family:var(--f-sua);font-style:italic;font-weight:300;font-size:clamp(1.35rem, 1.05rem + .7vw, 1.75rem);line-height:1.15;letter-spacing:-.01em;text-wrap:balance}
.fq-pr-q .fq-n{display:block;padding:0;margin-bottom:10px;font-style:normal}
.fq-pr-dela{margin:0 0 12px;font-family:var(--f-dela);font-weight:800;font-size:clamp(1.7rem, 1.2rem + 1.3vw, 2.6rem);line-height:1;letter-spacing:-.035em;color:var(--creme)}
.fq-pr-dela a{color:inherit;text-decoration:none;background:linear-gradient(var(--ouro),var(--ouro)) 0 100%/100% 2px no-repeat;padding-bottom:4px}
.fq-pr-dela a:hover{color:var(--ouro-claro)}
.fq-pr-a{font-weight:500;font-size:var(--t-texto);line-height:1.5;color:color-mix(in oklab, var(--creme) 88%, transparent)}
.fq-pr-a a{color:var(--creme);font-weight:700;text-decoration:underline;text-decoration-color:var(--ouro);text-underline-offset:4px;white-space:nowrap}
.fq-pr-a a:hover{color:var(--ouro-claro)}
.fq-fim{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px 28px;margin-top:clamp(48px,5vw,72px);padding:28px clamp(24px,3vw,40px);border-radius:var(--raio-card);background:color-mix(in oklab, var(--creme) 7%, transparent);border:1px solid color-mix(in oklab, var(--creme) 14%, transparent)}
.fq-fim-txt{display:flex;flex-direction:column;gap:2px;line-height:1.1}
.fq-fim-txt .voz-sua{font-size:clamp(1.3rem, 1rem + .8vw, 1.75rem);color:color-mix(in oklab, var(--creme) 82%, transparent)}
.fq-fim-dela{font-weight:800;font-size:clamp(1.6rem, 1.2rem + 1vw, 2.2rem);letter-spacing:-.03em}

/* notebook baixo: o lado não gruda */
@media (min-width:1024px) and (max-height:760px){
  .fq-lado{position:relative;top:0}
}

/* ---------- tablet e celular ---------- */
@media (max-width:1023px){
  .fq-in{grid-template-columns:minmax(0,1fr);gap:40px}
  .fq-lado{position:relative;top:0;gap:20px}
  .fq-palco{display:none}
  .fq-par{--cap-q:6rem;--cap-p:4.6rem;display:block;margin:2px 0 20px}
  .fq-pr-grade{grid-template-columns:minmax(0,1fr)}
  .fq-pr,.fq-pr:first-child,.fq-pr:last-child{padding:22px 0}
  .fq-pr + .fq-pr{border-left:0;border-top:1px solid color-mix(in oklab, var(--creme) 18%, transparent)}
  .fq-pr:first-child{padding-top:0}
  .fq-item::before{inset:-1px -14px}
}
@media (max-width:640px){
  .fq-q{grid-template-columns:2.2em minmax(0,1fr) 44px;gap:10px;padding:22px 0}
  .fq-n{font-size:.875rem;letter-spacing:.12em}
  .fq-mais{width:44px;height:44px}
  .fq-painel-in{padding:0}
  .fq-resp{margin-bottom:26px}
  .fq-resp{padding-left:18px}
  .fq-resp-txt{font-size:1.0625rem}
  .fq-fim .btn-zap{width:100%}
  .fq-fim{padding:24px 20px}
  .fq-q{padding:18px 0}
}

@media (prefers-reduced-motion:reduce){
  .js .fq-painel,.fq-mais,.fq-item::before,.fq-mais::before,.fq-mais::after{transition:none!important}
}