/* dv · Dúvidas */
.dv-luz { position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background:
    radial-gradient(closest-side in oklab, rgb(42 13 11 / .85), transparent) -20vmax 40% / 70vmax 70vmax no-repeat,
    radial-gradient(closest-side in oklab, rgb(29 74 55 / .55), transparent) calc(100% + 18vmax) -12vmax / 80vmax 80vmax no-repeat; }
.dv-grade { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2.5rem, 6vw, 6.5rem); align-items: start; }
.dv-fixo { position: sticky; top: 7rem; }
.dv-fixo .rotulo { margin: 0 0 1.4rem; }
.dv-apoio { margin: 1.6rem 0 0; color: var(--creme-80); max-width: 30rem; }
.dv-titulo .ts-forte { font-size: clamp(3rem, 1.2rem + 6.2vw, 7.6rem); }
.dv-outra { margin-top: clamp(2rem, 4vw, 3rem); }
.dv-outra-fim { display: none; }
.dv-agora { display: none; }
.js .dv-agora { display: flex; align-items: flex-end; gap: .8rem; margin: clamp(1.5rem, 3vw, 2.5rem) 0 0; }
.dv-agora-n { font-family: var(--f-titulo); font-weight: 700; font-size: clamp(6rem, 3rem + 7vw, 11rem); line-height: .78; color: transparent; -webkit-text-stroke: 1.5px rgb(224 83 63 / .75); font-variant-numeric: tabular-nums; }
.dv-agora-n.dv-troca { animation: dv-troca .6s var(--curva); }
@keyframes dv-troca { from { opacity: 0; translate: 0 .15em; } }
.dv-agora-de { font-family: var(--f-nota); font-size: var(--t-mini); color: var(--creme-60); padding-bottom: .3rem; }
.dv-outra .anot { margin: 0 0 .8rem; font-size: 1.1rem; }

.dv-grupo { margin: 0 0 .2rem; padding: 3rem 0 .9rem; font-family: var(--f-titulo); font-weight: 300; text-transform: uppercase; font-size: var(--t-sobre); line-height: 1; color: var(--creme-80); letter-spacing: .015em; border-bottom: 1px solid rgb(241 239 234 / .4); display: flex; align-items: baseline; gap: 1rem; }
.dv-grupo:first-child { padding-top: 0; }
.dv-grupo .rotulo { font-size: var(--t-mini); width: 3rem; flex: none; }

.dv-item { border-bottom: 1px solid var(--linha-escuro); position: relative; }
.dv-item summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 3rem minmax(0, 1fr) 48px; align-items: start; gap: .6rem; padding: 1.35rem 0; min-height: 48px; }
.dv-item summary::-webkit-details-marker { display: none; }
.dv-n { font-family: var(--f-nota); font-size: var(--t-mini); color: var(--creme-60); padding-top: .75em; }
.dv-p { font-family: var(--f-nota); font-style: italic; font-weight: 500; font-size: clamp(1.15rem, .98rem + .55vw, 1.5rem); line-height: 1.32; color: var(--creme); transition: color .3s; text-wrap: balance; padding-top: .35rem; }
.dv-item summary:hover .dv-p { color: #fff; }
.dv-mais { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--linha-escuro); position: relative; transition: background .3s, border-color .3s, rotate .5s var(--curva); }
.dv-mais::before, .dv-mais::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; margin: -1px 0 0 -8px; background: var(--creme); border-radius: 2px; transition: rotate .5s var(--curva), opacity .3s; }
.dv-mais::after { rotate: 90deg; }
.dv-item[open] .dv-mais { background: var(--vermelho-caneta); border-color: var(--vermelho-caneta); rotate: 180deg; }
.dv-item[open] .dv-mais::after { rotate: 0deg; }
.dv-item summary:hover .dv-mais { border-color: rgb(241 239 234 / .6); }

/* a batida: a linha de baixo vira traçado ao abrir */
.dv-batida { position: absolute; right: 64px; bottom: -8px; width: 150px; height: 40px; overflow: visible; pointer-events: none; }
.dv-batida path { fill: none; stroke: var(--vermelho-caneta); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.dv-item::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--vermelho-caneta); transform-origin: left; scale: 0 1; transition: scale .7s var(--curva-traco); }
.dv-item[open]::after { scale: 1 1; }
.dv-item[open] .dv-batida path { stroke-dashoffset: 0; transition: stroke-dashoffset .6s var(--curva-traco) .45s; }

.dv-r { margin: .2rem calc(48px + .6rem) 2rem 3.6rem; padding: clamp(1.1rem, 2vw, 1.6rem) clamp(1.1rem, 2.4vw, 1.9rem) clamp(.9rem, 1.6vw, 1.3rem); position: relative;
  color: var(--texto-papel); background-color: var(--papel); border-radius: 4px; rotate: -.6deg;
  background-image:
    linear-gradient(rgb(157 23 21 / .09) 1px, transparent 1px), linear-gradient(90deg, rgb(157 23 21 / .09) 1px, transparent 1px),
    linear-gradient(rgb(157 23 21 / .04) 1px, transparent 1px), linear-gradient(90deg, rgb(157 23 21 / .04) 1px, transparent 1px);
  background-size: 30px 30px, 30px 30px, 6px 6px, 6px 6px;
  box-shadow: 0 34px 60px -26px rgb(0 0 0 / .7), 0 8px 18px -8px rgb(0 0 0 / .45); }
.dv-r::before { content: "R:"; position: absolute; left: -.2rem; top: -.95rem; font-family: var(--f-nota); font-style: italic; font-weight: 600; font-size: 1.35rem; color: var(--vermelho); background: var(--papel); padding: 0 .4rem; border-radius: 3px; }
.dv-r p { margin: 0 0 .8rem; max-width: 40rem; }
.dv-r p:first-child { color: var(--tinta); }
.dv-r .link-nota { color: var(--verde); text-decoration-color: rgb(157 23 21 / .6); }
.dv-r .link-nota:focus-visible { outline-color: var(--vermelho); }
.dv-end { font-family: var(--f-nota); font-size: .95rem; color: var(--vermelho); }
.dv-item[open] .dv-r { animation: dv-abre .8s var(--curva) both; }
/* altura animada onde o navegador permite */
.dv-item { interpolate-size: allow-keywords; }
.dv-item::details-content { height: 0; overflow: clip; transition: height .55s var(--curva), content-visibility .55s allow-discrete; }
.dv-item[open]::details-content { height: auto; overflow: visible; }
@keyframes dv-abre { from { opacity: 0; translate: 0 -10px; filter: blur(8px); rotate: 0deg; } }

@media (max-width: 980px) {
  .dv-grade { grid-template-columns: minmax(0, 1fr); }
  .dv-fixo { position: static; }
  .dv-fixo .dv-outra, .js .dv-agora { display: none; }
  .dv-outra-fim { display: block; margin-top: 3rem; }
}
@media (max-width: 600px) {
  .dv-item summary { grid-template-columns: 2.2rem minmax(0, 1fr) 48px; }
  .dv-r { margin: .4rem 0 1.8rem; }
  .dv-batida { right: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .dv-item[open] .dv-r { animation: none; }
}