/* Disciplina — prefixo dc- */
.dc {
  background:
    radial-gradient(45% 40% at 22% 55% in oklch, rgb(179 38 44 / .28) 0%, rgb(179 38 44 / 0) 70%),
    radial-gradient(40% 35% at 95% 0% in oklch, rgb(184 116 63 / .12) 0%, rgb(184 116 63 / 0) 70%),
    var(--cafe);
  padding-bottom: clamp(4rem, 9vh, 6.5rem);
}
.dc-grade {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  grid-template-areas: "fotos cabeca" "fotos corpo";
  grid-template-rows: auto 1fr;
  column-gap: clamp(2.5rem, 6vw, 6rem);
}
.dc-cabeca { grid-area: cabeca; }
.dc-fotos { grid-area: fotos; }
.dc-corpo { grid-area: corpo; }

/* fotos em bicromia, como cartaz de luta */
.dc-fotos { position: relative; padding-bottom: 6rem; }
.dc-foto { margin: 0; position: relative; overflow: hidden; }
.dc-foto img { width: 100%; height: 100%; object-fit: cover; }
.dc-foto--chute { width: 82%; aspect-ratio: 920 / 1540; border-left: 3px solid var(--ringue); box-shadow: 0 0 0 1px rgb(244 236 223 / .1), 0 40px 100px -30px rgb(179 38 44 / .7); }
.dc-foto--chute img { object-position: 40% 0%; }
.dc-foto--guarda {
  position: absolute; right: -5%; bottom: 0; width: 34%; aspect-ratio: 800 / 1620; z-index: 2;
  outline: 6px solid var(--cafe); box-shadow: 0 30px 70px -20px rgb(0 0 0 / .6);
}
.dc-foto--guarda img { object-position: 50% 30%; }
.dc-f13 {
  position: absolute; left: 0; width: 82%; bottom: 6rem; margin: 0; z-index: 1;
  padding: 5rem 40% 1.2rem 1.4rem;
  background: linear-gradient(180deg in oklab, rgb(20 15 13 / 0) 0%, rgb(20 15 13 / .88) 55%);
}
.dc-f13 p { margin: 0; font-size: clamp(1.15rem, 1.7vw, 1.55rem); line-height: 1.3; color: var(--creme); }
.dc-f13 footer, .dc-fecho footer { margin-top: .5rem; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--creme-apagado); }

.dc-intro { margin: 1.6rem 0 0; max-width: 34rem; color: color-mix(in oklab, var(--creme) 86%, var(--cafe)); text-wrap: pretty; }

/* placar de LED */
.dc-placar { margin: 1.8rem 0 0; max-width: 32rem; }
.dc-led {
  display: grid; padding: .8rem 1.1rem 1rem;
  background: radial-gradient(circle at 50% 50%, rgb(232 67 74 / .07) 0 1px, transparent 1.6px) 0 0 / 5px 5px, #0b0807; border: 1px solid rgb(244 236 223 / .1);
  font-family: var(--f-titulo); text-transform: uppercase; line-height: 1; color: #ff5a60;
  text-shadow: 0 0 9px rgb(232 67 74 / .6), 0 0 1px rgb(255 140 140 / .8);
  box-shadow: 0 0 50px -12px rgb(232 67 74 / .4);
}
.dc-led-cab { display: flex; justify-content: space-between; font-size: .95rem; letter-spacing: .2em; color: rgb(232 67 74 / .55); text-shadow: none; padding-bottom: .55rem; margin-bottom: .3rem; border-bottom: 1px dashed rgb(232 67 74 / .25); }
.dc-ponto { display: inline-block; width: .45em; height: .45em; border-radius: 50%; background: var(--led); box-shadow: 0 0 8px var(--led); margin-right: .55em; vertical-align: .12em; }
.dc-led-linha { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .25rem 0; }
.dc-led-nome { font-size: clamp(1.5rem, 2.2vw, 2rem); letter-spacing: .08em; }
.dc-led-num { font-size: clamp(2.6rem, 3.6vw, 3.4rem); font-variant-numeric: tabular-nums; min-width: 1.2ch; text-align: right; }
.dc-led-linha + .dc-led-linha { opacity: .55; }
.dc-placar.dc-tic [data-dc-gols] { animation: dc-tic .3s ease-out; }
@keyframes dc-tic { from { color: #ffd2d2; text-shadow: 0 0 22px rgb(232 67 74 / 1); } to { color: #ff5a60; } }
.dc-placar figcaption { margin-top: .7rem; font-size: .95rem; color: var(--creme-apagado); text-wrap: pretty; }

/* fora do ringue: escalação de cartaz */
.dc-quem { margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid var(--fio); max-width: 36rem; }
.dc-quem-tit { margin: 0 0 .6rem; font-size: .75rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--mel-claro); }
.dc-destaque { margin: 0 0 .7rem; font-family: var(--f-titulo); text-transform: uppercase; font-size: var(--t-sub); line-height: 1; letter-spacing: .02em; color: var(--creme); }
.dc-tracos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 0; font-family: var(--f-titulo); text-transform: uppercase; font-size: clamp(1.2rem, 1.6vw, 1.45rem); letter-spacing: .04em; line-height: 1.2; color: var(--creme-apagado); }
.dc-tracos li { white-space: nowrap; }
.dc-tracos li:not(:last-child)::after { content: "•"; color: var(--ringue); margin: 0 .55rem; }

/* fecho */
.dc-fecho { margin-top: clamp(3.5rem, 9vh, 6rem); padding-top: 2.4rem; border-top: 1px solid var(--fio); text-align: center; }
.dc-fecho p { margin: 0; font-size: clamp(1.7rem, 3.8vw, 3.4rem); line-height: 1.2; color: var(--creme); text-wrap: balance; }
.dc-sub { position: relative; white-space: nowrap; }
.dc-sub::after { content: ""; position: absolute; left: 0; right: 0; bottom: .02em; height: .09em; background: var(--ringue); transform: rotate(-1.5deg); }

@media (max-width: 860px) {
  .dc-grade { grid-template-columns: minmax(0, 1fr); grid-template-areas: "cabeca" "fotos" "corpo"; grid-template-rows: none; }
  .dc-fotos { margin-top: 2rem; padding-bottom: 0; display: grid; grid-template-columns: 920fr 800fr; gap: .5rem; align-items: start; }
  .dc-foto--chute, .dc-foto--guarda { position: relative; width: auto; right: auto; outline: 0; }
  .dc-foto--chute { aspect-ratio: 920 / 1540; }
  .dc-foto--guarda { aspect-ratio: 920 / 1540; margin-top: 2.5rem; }
  .dc-f13 { position: relative; grid-column: 1 / -1; width: auto; bottom: auto; background: none; padding: .4rem 0 0 1rem; margin-top: .6rem; border-left: 3px solid var(--ringue); }
  .dc-f13 p { font-size: 1.3rem; }
}