/* Duas medicinas — dm- · a parede escura da sala; dois focos de luz que se encontram,
   a lista do que ele trata como uma linha corrida, os diplomas numa janela. */

.dm { overflow: hidden; }
.dm .wf-rotulo { color: var(--tinta); }

/* pontos de cidade, só à noite */
.dm-cidade {
  position: absolute; top: 27%; right: 0; width: 34%; height: 24%; z-index: -1; pointer-events: none; opacity: 0;
  transition: opacity 2.4s linear;
  background-image:
    radial-gradient(2px 2px at 12% 18%, #ffd9a0, transparent),
    radial-gradient(1.5px 1.5px at 24% 9%, #ffe9c9, transparent),
    radial-gradient(2px 2px at 38% 26%, #fff3e0, transparent),
    radial-gradient(1.5px 1.5px at 47% 12%, #f7c784, transparent),
    radial-gradient(2px 2px at 58% 30%, #dfe9ff, transparent),
    radial-gradient(1.5px 1.5px at 66% 7%, #ffc98a, transparent),
    radial-gradient(2px 2px at 73% 21%, #ffd9a0, transparent),
    radial-gradient(1.5px 1.5px at 82% 13%, #fff3e0, transparent),
    radial-gradient(2px 2px at 90% 28%, #ffe9c9, transparent),
    radial-gradient(1.5px 1.5px at 95% 8%, #ffd9a0, transparent),
    radial-gradient(2px 2px at 30% 40%, #ffc98a, transparent),
    radial-gradient(1.5px 1.5px at 52% 44%, #ffe9c9, transparent),
    radial-gradient(2px 2px at 78% 42%, #dfe9ff, transparent),
    radial-gradient(1.5px 1.5px at 18% 33%, #fff3e0, transparent),
    radial-gradient(2px 2px at 86% 55%, #ffd9a0, transparent),
    radial-gradient(1.5px 1.5px at 62% 58%, #ffe9c9, transparent),
    radial-gradient(1.5px 1.5px at 40% 62%, #f7c784, transparent),
    radial-gradient(2px 2px at 70% 70%, #fff3e0, transparent);
  mix-blend-mode: screen;
  mask-image: radial-gradient(60% 60% at 75% 45%, #000 25%, transparent 100%);
  -webkit-mask-image: radial-gradient(60% 60% at 75% 45%, #000 25%, transparent 100%);
}
html[data-luz="noite"] .dm-cidade { opacity: .9; }

/* ---------- abertura: texto à esquerda, as duas luzes à direita ---------- */
.dm-abre {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 2rem + 4vw, 6.5rem); align-items: start;
}
.dm-abre__texto .wf-titulo { margin: 1.1rem 0 1.5rem; }

.dm-duas {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  padding-top: .6rem;
}
.dm-duas::before, .dm-duas::after { /* os dois focos de luz que se encontram no meio */
  content: ""; position: absolute; z-index: -1; pointer-events: none; border-radius: 50%;
  width: 96%; aspect-ratio: 1; top: 62%; transform: translateY(-50%);
  background: radial-gradient(closest-side in oklab, color-mix(in oklab, var(--luz-b) 17%, transparent), color-mix(in oklab, var(--luz-b) 6%, transparent) 55%, transparent);
  animation: dm-respira 10s ease-in-out infinite;
}
.dm-duas::before { left: -24%; }
.dm-duas::after { right: -24%; animation-delay: -5s; }
@keyframes dm-respira { 0%, 100% { transform: translateY(-50%) scale(1); } 40% { transform: translateY(-50%) scale(1.035); } }
.dm-medicina { position: relative; padding-top: 1.2rem; }
.dm-medicina::before { /* o trilho curto de cada medicina */
  content: ""; position: absolute; top: 0; left: 0; width: 2.2rem; height: 1px; background: var(--caramelo);
}
.dm-medicina__titulo {
  font-family: var(--fonte-titulo); font-weight: 400; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); line-height: 1.1; letter-spacing: -.01em;
}
.dm-medicina__texto { margin-top: .8rem; font-size: var(--fonte-corpo); line-height: 1.55; color: var(--tinta); opacity: .9; max-width: 30ch; }
.dm-medicina__nota { margin-top: .9rem; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta); opacity: .9; }
.dm-encontro { /* a frase no encontro das duas luzes */
  grid-column: 1 / -1; margin: 3.2rem auto 0; max-width: 36ch; text-align: center; }
.dm-encontro figcaption::before { display: none; }
.dm-encontro blockquote { color: var(--tinta); }
.dm-encontro figcaption { color: var(--tinta); }

/* ---------- a lista: uma linha corrida em Petrona com pontos caramelo ---------- */
.dm-trata { margin-top: clamp(4rem, 3rem + 4vw, 7rem); }
.dm-lista {
  margin-top: 1.2rem; max-width: 60rem;
  font-family: var(--fonte-titulo); font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.2rem); line-height: 1.35; letter-spacing: -.005em;
  color: var(--tinta); text-wrap: pretty;
}
.dm-lista li { display: inline; }
.dm-lista li:not(:last-child)::after { content: "\00a0·"; color: var(--ambar); margin-left: .15em; margin-right: .2em; font-weight: 500; }
.dm-lista li:last-child::after { content: "."; }
.dm-como { margin-top: 1.3rem; max-width: 56ch; font-size: var(--fonte-corpo); line-height: 1.55; color: var(--tinta-clara-suave); }

/* ---------- a família: janela com os diplomas e o texto ---------- */
.dm-familia {
  margin-top: clamp(4rem, 3rem + 4vw, 7rem);
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(2rem, 2rem + 3vw, 5rem); align-items: start;
}
.dm-familia__janela .wf-janela { aspect-ratio: 4 / 5; }
.dm-familia__janela .wf-janela > img { object-position: 18% 36%; }
.dm-familia__legenda { margin-top: .7rem; font-size: .78rem; line-height: 1.45; letter-spacing: .02em; color: var(--tinta-clara-suave); max-width: 30ch; }
.dm-sub { font-family: var(--fonte-titulo); font-weight: 400; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.5rem); line-height: 1.1; letter-spacing: -.01em; text-wrap: balance; }
.dm-sub em { font-style: italic; }
.dm-familia__texto .wf-texto { margin-top: 1rem; }
.dm-frase { margin-top: 1.8rem; max-width: 46ch; }
.dm-frase blockquote, .dm-frase figcaption { color: var(--tinta); }
.dm-epigrafe {
  margin-top: clamp(4rem, 3rem + 4vw, 7rem); padding-top: clamp(2rem, 1.5rem + 2vw, 3.5rem); max-width: 40ch; margin-inline: auto; text-align: center;
  border-top: 1px solid color-mix(in oklab, var(--caramelo) 35%, transparent);
}
.dm-epigrafe__texto { font-family: var(--fonte-titulo); font-size: clamp(1.25rem, 1rem + 1vw, 1.9rem); line-height: 1.3; letter-spacing: -.005em; color: var(--tinta); text-wrap: pretty; }
.dm-epigrafe__autor { margin-top: 1rem; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-clara-suave); }
.dm-fecho { margin-top: 1.8rem; font-size: var(--fonte-corpo); line-height: 1.55; color: var(--tinta-clara-suave); }
.dm-fecho .wf-link { color: var(--tinta); margin-left: .3rem; }

/* ---------- telas menores ---------- */
@media (max-width: 900px) {
  .dm-cidade { display: none; }
  .dm-abre, .dm-familia { grid-template-columns: 1fr; gap: 2.5rem; }
  .dm-familia__janela { max-width: 24rem; }
}
@media (max-width: 600px) {
  .dm-duas { grid-template-columns: 1fr; row-gap: 2rem; }
  .dm-medicina__texto { max-width: none; }
  .dm-encontro { margin-top: 2rem; }
  .dm-familia__janela { display: flex; align-items: center; gap: 1rem; max-width: none; }
  .dm-familia__janela .wf-janela { flex: none; width: 7.5rem; aspect-ratio: 1; }
  .dm-familia__legenda { margin: 0; max-width: 22ch; }
}