/* ============================================================
   03 · COMOJUEGA ("Cómo funciona el juego deportivo")
   Anatomy unlike siblings: dueto "Prepartido vs En vivo" cara a
   cara (dos paneles con un disco "vs" al centro) y, debajo, una
   banda nota+foto-app invertida respecto al hero. Fondo cal-honda
   para alternar con el bloque anterior.
   ============================================================ */

.comojuega {
  padding: var(--tramo) var(--calle);
  background: var(--cal-honda);
}
.comojuega__cabe {
  width: var(--cancha); max-width: 1300px; margin-inline: auto;
  margin-bottom: clamp(2.4rem, 4vw, 3.6rem);
}
.comojuega__volante { margin-bottom: 1.2rem; }
.comojuega__titulo { font-size: var(--t-titular); margin-bottom: 1.1rem; max-width: 18ch; }
.comojuega__intro { font-size: var(--t-lead); color: var(--tinta-media); max-width: 64ch; }

/* dueto cara a cara */
.comojuega__dueto {
  width: var(--cancha); max-width: 1300px; margin-inline: auto;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch;
  gap: clamp(1rem, 2.5vw, 2rem);
  margin-bottom: clamp(2.4rem, 4vw, 3.6rem);
}
.comojuega__modo {
  background: var(--cal-claro); border: 2.5px solid var(--tinta);
  border-radius: 16px 6px 15px 7px;          /* esquinas dispares "a mano" */
  padding: clamp(1.4rem, 2.5vw, 2.2rem);
  display: grid; gap: 0.9rem; align-content: start;
  box-shadow: 5px 5px 0 var(--tinta);
  transform: rotate(-1.5deg);
}
.comojuega__modo--vivo {
  box-shadow: -5px 5px 0 var(--cesped);
  transform: rotate(1.6deg);
  background: #fff;
}
.comojuega__modo-tag {
  font-family: "Gabarito", sans-serif; font-weight: 800;
  font-size: var(--t-sub); color: var(--tinta);
  display: inline;
  background: linear-gradient(transparent 58%, rgba(22,196,109,0.5) 58%);
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
  padding: 0 0.1em; justify-self: start;
}
.comojuega__modo--vivo .comojuega__modo-tag { color: var(--cesped-hondo); }
.comojuega__modo-txt { color: var(--tinta-media); }

.comojuega__vs {
  align-self: center;
  width: 3.1rem; height: 3.1rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--pizarra); color: var(--brillo-claro);
  border: 2.5px solid var(--tinta); box-shadow: 3px 3px 0 var(--cesped);
  font-family: "Gabarito", sans-serif; font-weight: 800; font-size: 0.95rem;
  text-transform: uppercase; letter-spacing: 0.04em;
  transform: rotate(-8deg);
}

/* banda nota + foto-app (invertida: foto izq, nota der) */
.comojuega__cierre {
  width: var(--cancha); max-width: 1300px; margin-inline: auto;
  display: grid; grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(1.8rem, 3.5vw, 3.5rem); align-items: center;
}
.comojuega__media .pizarra-plano {
  aspect-ratio: 3 / 2.1;
  transform: rotate(1.3deg);
  border: 3px solid var(--tinta); border-radius: 18px 7px 16px 6px;
  box-shadow: -8px 8px 0 var(--cesped);
}
.comojuega__nota p { font-size: var(--t-texto); color: var(--tinta); margin-bottom: 1.6rem; max-width: 52ch; }

@media (max-width: 1024px) {
  .comojuega__dueto { grid-template-columns: 1fr; }
  .comojuega__modo { transform: none; }
  .comojuega__vs { justify-self: center; transform: rotate(90deg); }
  .comojuega__cierre { grid-template-columns: 1fr; gap: 1.6rem; }
  .comojuega__media { order: 2; }
  .comojuega__media .pizarra-plano { aspect-ratio: 3 / 2; transform: none; box-shadow: -6px 6px 0 var(--cesped); }
}