/* ============================================================
   10 · RESPONSABLE ("Juego responsable")
   Anatomy unlike siblings: AVISO pegado a mano sobre lavado verde.
   Tarjeta torcida con borde tosco, sombra dura y un sello "+18"
   estampado en la esquina. Un párrafo textual del PDF.
   ============================================================ */

.responsable {
  padding: var(--tramo) var(--calle);
  background:
    radial-gradient(70% 60% at 12% 0%, rgba(22,196,109,0.10) 0%, transparent 60%),
    var(--cal);
  border-top: 1px solid var(--linea);
}
.responsable__caja {
  width: var(--cancha); max-width: 940px; margin-inline: auto;
  position: relative;
}
.responsable__aviso {
  position: relative;
  background: var(--cal-claro);
  border: 3px solid var(--tinta);
  border-radius: 20px 7px 18px 6px;
  box-shadow: 9px 9px 0 var(--cesped);
  padding: clamp(1.8rem, 4vw, 3rem);
  transform: rotate(-1.3deg);
}
.responsable__volante { margin-bottom: 1rem; }
.responsable__titulo { font-size: var(--t-titular); margin-bottom: 1.3rem; max-width: 16ch; }
.responsable__p { color: var(--tinta); font-size: var(--t-lead); max-width: 64ch; margin-bottom: 1.6rem; }
.responsable__p .marca {
  background: linear-gradient(transparent 58%, rgba(22,196,109,0.5) 58%);
  box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: 0 0.08em;
  font-weight: 700;
}
.responsable__cta { display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; align-items: center; }

/* sello +18 estampado torcido */
.responsable__stamp {
  position: absolute; right: -0.8rem; top: -1.2rem; z-index: 4;
  width: 4.2rem; height: 4.2rem; border-radius: 50%;
  background: var(--cal-claro); border: 3px solid var(--cesped);
  display: grid; place-items: center; transform: rotate(13deg);
  box-shadow: 3px 3px 0 var(--tinta);
  font-family: "Gabarito", sans-serif; font-weight: 900; font-size: 1.3rem; color: var(--cesped-hondo);
}

@media (max-width: 1024px) {
  .responsable__aviso { transform: none; box-shadow: 6px 6px 0 var(--cesped); }
  .responsable__titulo, .responsable__p { max-width: none; }
  .responsable__stamp { right: 0.4rem; top: -1.4rem; width: 3.6rem; height: 3.6rem; font-size: 1.1rem; }
}