/* Seção Dois rounds (prefixo dr-) */
.dr { background: var(--cafe); }
.dr-luz {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(55% 32% at 82% 0% in oklch, rgb(110 20 24 / .75) 0%, rgb(110 20 24 / 0) 70%),
    radial-gradient(40% 45% at 74% 72% in oklch, rgb(179 38 44 / .26) 0%, rgb(179 38 44 / 0) 72%),
    radial-gradient(35% 40% at 18% 70% in oklab, rgb(10 7 6 / .55) 0%, rgb(10 7 6 / 0) 70%),
    linear-gradient(180deg in oklab, var(--noite) 0%, var(--cafe) 26%, var(--cafe) 100%);
}
.dr-grade { display: grid; gap: clamp(3rem, 8vh, 5.5rem); }

/* cabeçalho em duas colunas */
.dr-cab { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr); gap: 2rem clamp(2rem, 5vw, 5rem); align-items: end; }
.dr-cab .g-t-maior { max-width: 15ch; text-wrap: balance; }
.dr-texto { margin: 0 0 .5rem; max-width: 30rem; justify-self: end; color: color-mix(in oklab, var(--creme) 86%, var(--cafe)); text-wrap: pretty; }

/* o ringue */
.dr-ringue { display: grid; grid-template-columns: minmax(0, 1fr) 4.5rem minmax(0, 1.45fr); gap: clamp(1rem, 2.4vw, 2.4rem); align-items: start; }
.dr-corner { position: relative; isolation: isolate; }
.dr-num {
  position: absolute; z-index: -1; pointer-events: none; user-select: none;
  font-family: var(--f-titulo); line-height: .8; font-size: clamp(12rem, 22vw, 20rem);
  top: -.08em;
}
.dr-c1 .dr-num { right: 0; color: transparent; -webkit-text-stroke: 1px rgb(201 188 170 / .16); }
.dr-c2 .dr-num {
  right: .02em; top: -.36em; font-size: clamp(14rem, 27vw, 25rem);
  background: linear-gradient(180deg in oklch, rgb(232 67 74 / .8) 0%, rgb(179 38 44 / .45) 45%, rgb(110 20 24 / 0) 88%);
  filter: drop-shadow(0 0 40px rgb(179 38 44 / .35));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.dr-c-tit { margin: 0 0 1.4rem; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; font-family: var(--f-titulo); font-weight: 400; text-transform: uppercase; line-height: 1; }
.dr-c-nome { font-size: var(--t-sub); letter-spacing: .02em; }
.dr-c1 .dr-c-nome { color: var(--creme-apagado); }

.dr-r1 { position: relative; font-size: 1.4rem; letter-spacing: .08em; color: var(--creme-apagado); opacity: .6; }
.dr-risco { position: absolute; left: -8%; right: -8%; top: 50%; height: 3px; background: var(--ringue); transform: rotate(-4deg); transform-origin: left center; }
.js .dr-risco { transform: rotate(-4deg) scaleX(0); transition: transform .45s cubic-bezier(.7, 0, .2, 1); }
.dr-riscado .dr-risco { transform: rotate(-4deg) scaleX(1); }

.dr-r2 { display: inline-flex; align-items: center; gap: .35rem; background: var(--ringue); color: var(--creme); padding: .32rem .7rem .22rem; font-size: 1.45rem; letter-spacing: .08em; box-shadow: 0 0 0 1px rgb(244 236 223 / .12) inset, 0 12px 34px -10px rgb(179 38 44 / .75); transform-origin: 30% 60%; }
.dr-r2 b { font-weight: 400; font-size: 2.3rem; line-height: .8; }
.js .dr-r2 { opacity: 0; }
.dr-golpe .dr-r2 { animation: dr-golpe 520ms cubic-bezier(.2, .9, .25, 1) both; }
@keyframes dr-golpe {
  0%   { opacity: 0; transform: scale(2.3) rotate(-3deg); }
  30%  { opacity: 1; transform: scale(.96) rotate(0); }
  42%  { transform: scale(1) translate(-3px, 1px); }
  52%  { transform: translate(3px, -1px); }
  62%  { transform: translate(-2px, 1px); }
  72%  { transform: translate(1px, 0); }
  100% { opacity: 1; transform: none; }
}

.dr-etapas { list-style: none; margin: 0; padding: 0; counter-reset: dr; }
.dr-etapas li { counter-increment: dr; position: relative; display: grid; grid-template-columns: 2.4rem 1fr; align-items: baseline; padding: .6rem 0; }
.dr-etapas li::before { content: counter(dr); font-family: var(--f-titulo); font-size: 1.45rem; line-height: 1; }
.dr-c1 .dr-etapas li { color: var(--creme-apagado); border-top: 1px solid var(--fio); }
.dr-c1 .dr-etapas li::before { color: rgb(201 188 170 / .55); }
.dr-c1 .dr-etapas li > span { position: relative; justify-self: start; }
.dr-c1 .dr-etapas li:not(.dr-sentenca) > span::after {
  content: ""; position: absolute; left: -.2em; right: -.2em; top: 55%; height: 1px; background: var(--ringue);
  transform-origin: left center;
}
.js .dr-c1 .dr-etapas li:not(.dr-sentenca) > span::after { transform: scaleX(0); transition: transform .45s cubic-bezier(.7, 0, .2, 1); transition-delay: calc(450ms + var(--dr-i, 0) * 110ms); }
.js .dr-riscado .dr-c1 .dr-etapas li:not(.dr-sentenca) > span::after { transform: scaleX(1); }
.dr-sentenca { grid-template-columns: 2.4rem auto 1fr !important; }
.dr-sentenca .dr-carimbo { margin-left: .9rem; }
.dr-sentenca > span { color: var(--creme); font-weight: 600; }
.dr-carimbo {
  justify-self: start; align-self: center; font-style: normal; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--mel-claro); border: 1px solid rgb(220 154 94 / .55); padding: .22rem .5rem .18rem; transform: rotate(-3deg);
}

/* ROUND 2 como trilho */
.dr-trilho { position: relative; }
.dr-trilho::before { content: ""; position: absolute; left: .95rem; top: 1.4rem; bottom: 1.4rem; width: 2px; background: linear-gradient(180deg, var(--ringue), var(--led)); }
.dr-trilho li { grid-template-columns: 3.4rem 1fr; align-items: start; padding: .55rem 0; font-weight: 600; font-size: 1.05rem; }
.dr-trilho li::before {
  position: relative; display: grid; place-items: center; width: 2rem; height: 2rem; padding-top: .12rem;
  background: var(--cafe); border: 1px solid var(--ringue); color: var(--creme); font-size: 1.3rem;
}
.dr-trilho li > span { padding-top: .28rem; }
.dr-trilho .dr-fim > span { padding-top: .2rem; }
.dr-trilho .dr-fim::before { background: var(--ringue); box-shadow: 0 0 22px rgb(232 67 74 / .55); }
.dr-trilho .dr-fim { font-family: var(--f-titulo); font-weight: 400; text-transform: uppercase; font-size: var(--t-sub); letter-spacing: .02em; line-height: 1; }

.dr-c2 { margin-top: clamp(2rem, 7vh, 4.5rem); padding: clamp(1.4rem, 2.5vw, 2.2rem); background: color-mix(in oklab, var(--cafe-claro) 70%, transparent); border-top: 3px solid var(--ringue); box-shadow: 0 30px 80px -40px rgb(179 38 44 / .55); }

/* cordas: três fios cônicos */
.dr-cordas { position: relative; align-self: stretch; display: flex; justify-content: center; gap: 9px; }
.dr-cordas i { width: 5px; background: var(--ringue); clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%); opacity: .85; }
.dr-cordas i:nth-child(2) { background: #d9c8b0; opacity: .45; }
.dr-cordas i:nth-child(3) { opacity: .7; }
.dr-intervalo {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
  padding: .45rem .7rem .4rem; background: var(--cafe); border: 1px solid rgb(244 236 223 / .16);
  font-size: .75rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--creme-apagado); white-space: nowrap;
}

.dr-golpe .dr-cordas i { animation: dr-vibra 1.1s linear both; animation-delay: 160ms; }
.dr-golpe .dr-cordas i:nth-child(2) { animation-delay: 200ms; }
.dr-golpe .dr-cordas i:nth-child(3) { animation-delay: 240ms; }
@keyframes dr-vibra {
  0% { transform: translateX(0); } 8% { transform: translateX(5px); } 16% { transform: translateX(-4px); }
  24% { transform: translateX(3px); } 32% { transform: translateX(-2.2px); } 40% { transform: translateX(1.5px); }
  50% { transform: translateX(-1px); } 62% { transform: translateX(.5px); } 100% { transform: none; }
}
@keyframes dr-vibra-h {
  0% { transform: translateY(0); } 8% { transform: translateY(5px); } 16% { transform: translateY(-4px); }
  24% { transform: translateY(3px); } 32% { transform: translateY(-2.2px); } 40% { transform: translateY(1.5px); }
  50% { transform: translateY(-1px); } 62% { transform: translateY(.5px); } 100% { transform: none; }
}

/* a fala mora no round 1 */
.dr-fala { position: relative; margin: clamp(2.5rem, 6vh, 4rem) 0 0; padding-top: 2.4rem; }
.dr-aspas { position: absolute; top: -.02em; left: -.03em; font-family: var(--f-titulo); font-style: normal; font-size: 6.4rem; line-height: .8; color: var(--ringue); text-shadow: 0 0 24px rgb(179 38 44 / .45); }
.dr-fala blockquote { margin: 0; font-size: clamp(1.1rem, 1.35vw, 1.3rem); line-height: 1.5; text-wrap: pretty; }
.dr-fala figcaption { margin-top: .9rem; font-size: .875rem; color: var(--creme-apagado); padding-left: .7rem; border-left: 3px solid var(--ringue); }

@media (max-width: 960px) {
  .dr-cab { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .dr-ringue { grid-template-columns: 1fr; gap: 0; }
  .dr-num { font-size: 11rem; }
  .dr-c2 { margin-top: 0; padding: 1.3rem 1.1rem 1.5rem; }
  .dr-cordas { flex-direction: column; height: 5rem; gap: 7px; justify-content: center; }
  .dr-golpe .dr-cordas i { animation-name: dr-vibra-h; }
  .dr-c2 .dr-num { font-size: 12rem; top: -.3em; }
  .dr-cordas i { width: auto; height: 4px; clip-path: polygon(0 40%, 100% 0, 100% 100%, 0 60%); }
  .dr-intervalo { left: 50%; top: 50%; }
  .dr-fala { margin-top: 2.2rem; }
  .dr-aspas { font-size: 5rem; }
  .dr-trilho li { font-size: 1rem; grid-template-columns: 3rem 1fr; }
  .dr-carimbo { font-size: .875rem; letter-spacing: .08em; padding: .2rem .45rem .16rem; }
  .dr-sentenca .dr-carimbo { margin-left: .7rem; }
  .dr-intervalo { font-size: .875rem; letter-spacing: .16em; }
}

@media (prefers-reduced-motion: reduce) {
  .js .dr-r2 { opacity: 1; }
  .js .dr-risco { transform: rotate(-4deg) scaleX(1); }
  .js .dr-c1 .dr-etapas li:not(.dr-sentenca) > span::after { transform: scaleX(1); }
}