/* Seção 7 · Dúvidas (prefixo du-)
   O fio do hero vira a espinha da lista: cada pergunta é uma parada;
   ao abrir, o ponto acende e um fio curto liga a parada à resposta. */

.du { --du-espinha: 2.75rem; }
.du-grade { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 6rem); align-items: start; }
.du-cabeca { position: sticky; top: 7.5rem; }
.du-h2 { font-size: clamp(2.6rem, 1.3rem + 3.6vw, 5rem); }

.du-legenda { display: flex; align-items: center; gap: .8rem; margin: 2rem 0 0; font-size: var(--t-mini); letter-spacing: .12em; text-transform: uppercase; color: var(--madeira-escura); }
.du-legenda-ponto { width: 13px; height: 13px; border-radius: 50%; background: var(--ambar); box-shadow: 0 0 0 5px rgb(192 130 58 / .16); }
.du-mais { margin-top: 2.6rem; padding-top: 1.6rem; border-top: 1px solid var(--linha); max-width: 26rem; }
.du-mais p { margin: 0 0 .6rem; font-family: var(--serif); font-size: 1.3rem; line-height: 1.35; }
.du-mais .ligar { display: inline-flex; align-items: center; min-height: 48px; }

/* lista com espinha */
.du-lista { position: relative; padding-left: var(--du-espinha); }
.du-espinha {
  position: absolute; left: 7px; top: .6rem; bottom: .6rem; width: 1px;
  background: linear-gradient(to bottom, transparent, var(--madeira) 5%, var(--madeira) 95%, transparent);
  opacity: .5; transform-origin: top center;
}
.js .du-espinha[data-rev] { translate: none; transform: scaleY(0); transition: transform 1.9s cubic-bezier(.45,.05,.2,1), opacity 1s; }
.js .du-espinha.wf-on { transform: scaleY(1); opacity: .5; }
.du-item { position: relative; border-radius: 72px 20px 20px 20px; transition: background .5s var(--suave), box-shadow .6s var(--suave); }
.du-item + .du-item { margin-top: .35rem; }
.du-item summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 1.2rem;
  padding: 1.15rem 1.6rem; min-height: 56px; border-radius: inherit;
}
.du-item summary::-webkit-details-marker { display: none; }
.du-item summary:hover .du-q { color: var(--madeira-escura); }
.du-item:not([open]):hover { background: color-mix(in oklab, var(--travertino-claro) 45%, transparent); }
.du-item summary:focus-visible { outline: 2px solid var(--ambar); outline-offset: 2px; }
.du-q { flex: 1; font-family: var(--serif); font-size: clamp(1.3rem, 1.1rem + .6vw, 1.625rem); line-height: 1.22; transition: color .3s; text-wrap: pretty; }

/* a parada na espinha */
.du-sinal {
  position: absolute; left: calc(var(--du-espinha) * -1); top: 1.15rem; margin-top: calc((1.22em * 1) / 2);
  width: 15px; height: 15px; border-radius: 50%; translate: 0 -50%;
  font-size: clamp(1.3rem, 1.1rem + .6vw, 1.625rem);
  background: var(--travertino); border: 1px solid var(--madeira);
  transition: background .5s, border-color .5s, box-shadow .8s var(--suave);
}
.du-dele .du-sinal { background: var(--ambar); border-color: var(--ambar); }
.du-sinal::after { /* fio curto da parada até a resposta */
  content: ""; position: absolute; left: 100%; top: 50%; width: calc(var(--du-espinha) - 15px); height: 1px;
  background: linear-gradient(to right, var(--ambar), color-mix(in oklab, var(--ambar) 30%, transparent));
  transform: scaleX(0); transform-origin: left; transition: transform .9s cubic-bezier(.45,.05,.2,1);
}
.du-item[open] .du-sinal { background: var(--ambar); border-color: var(--ambar); box-shadow: 0 0 0 5px rgb(192 130 58 / .16), 0 0 22px 4px rgb(240 194 127 / .7); }
.du-item[open] .du-sinal::after { transform: scaleX(1); }

/* sinal de abrir: + que vira − */
.du-mais-ico { flex: none; position: relative; width: 22px; height: 22px; }
.du-mais-ico::before, .du-mais-ico::after { content: ""; position: absolute; left: 3px; right: 3px; top: 50%; height: 1px; background: var(--cafe); }
.du-mais-ico::after { rotate: 90deg; transition: rotate .5s var(--suave); }
.du-item[open] .du-mais-ico::after { rotate: 0deg; }

/* aberto: vira painel com o canto do hero */
.du-item[open] {
  background: color-mix(in oklab, var(--travertino-claro) 88%, transparent);
  box-shadow: 0 24px 50px -28px rgb(58 42 32 / .45);
  outline: 1px solid rgb(255 255 255 / .7);
}
.du-resp { padding: 0 1.6rem 1.7rem; color: var(--cafe-suave); animation: du-abre .7s var(--suave); }
.du-resp p { margin: 0 0 .8rem; line-height: 1.6; text-wrap: pretty; }
.du-resp p:last-child { margin-bottom: 0; }
.du-resp blockquote { margin: 0 0 1rem; padding-left: 1.2rem; border-left: 1px solid var(--ambar); }
.du-resp blockquote p { font-family: var(--serif); font-size: clamp(1.375rem, 1.1rem + .8vw, 1.875rem); line-height: 1.34; letter-spacing: -.005em; color: var(--cafe); }
.du-selo { font-size: var(--t-mini); letter-spacing: .1em; text-transform: uppercase; color: var(--madeira-escura); }
.du-link { color: var(--cafe); min-height: 48px; display: inline-flex; align-items: center; }
.du-conv { list-style: none; margin: 0 0 1.1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1.3rem; font-family: var(--serif); font-size: 1.25rem; color: var(--cafe); }
.du-conv li { display: inline-flex; align-items: center; gap: .55em; }
.du-conv li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--ambar); }

@keyframes du-abre { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }

@media (max-width: 980px) {
  .du { --du-espinha: 1.9rem; }
  .du-grade { grid-template-columns: 1fr; gap: 2.8rem; }
  .du-grade { gap: 0; }
  .du-cabeca { display: contents; }
  .du-lista { order: 1; margin-top: 2.6rem; }
  .du-mais { order: 2; margin-top: 2.4rem; max-width: none; }
  .du-item summary { padding: 1rem 1.1rem; gap: .9rem; }
  .du-resp { padding: 0 1.1rem 1.4rem; }
  .du-sinal { top: 1rem; }
  .du-item { border-radius: 44px 16px 16px 16px; }
}