/* ============================================================
   resguardo — bloque 10 (Juego responsable)
   Anatomy unlike siblings: aviso sereno, sin imagen ni venta dura.
   Panel sobrio con folio al margen y un subrayado que abre desde el
   centro. CTA de canto (no empuja, "configurar límites").
   Animación propia: el subrayado del título se abre del centro
   hacia los lados.
   ============================================================ */

.resguardo { padding-block: var(--aire-l); }

.resguardo__panel {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.4rem, 4vw, 3rem);
  align-items: start;
  background: var(--fieltro-alto);
  border: 1px solid var(--linde);
  border-radius: var(--radio);
  padding: clamp(1.8rem, 4vw, 3.2rem);
}
.resguardo__marca {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
}
.resguardo__titulo {
  position: relative;
  display: inline-block;
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--t-h2);
  line-height: 1.05;
  color: var(--marfil);
  margin-bottom: calc(var(--aire-s) + .4rem);
}
.resguardo__titulo::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -.7rem;
  width: 62%; height: 2px;
  background: var(--oro);
  transform: translateX(-50%);
}
.resguardo__texto p {
  color: var(--marfil-medio);
  font-size: var(--t-cuerpo);
  line-height: 1.62;
  max-width: 64ch;
  margin-bottom: var(--aire-m);
}

@media (max-width: 640px) {
  .resguardo__panel { grid-template-columns: 1fr; }
  .resguardo__marca { flex-direction: row; }
}

@media (min-width: 721px) and (prefers-reduced-motion: no-preference) {
  .resguardo__panel { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
  .resguardo__titulo::after { width: 0; transition: width .55s ease .45s; }
  .resguardo.en-vista .resguardo__panel { opacity: 1; transform: none; }
  .resguardo.en-vista .resguardo__titulo::after { width: 62%; }
}