/* ============================================================
   07 · ACCESO Y PAGOS
   Anatomy unlike siblings: LEDGER de métodos de pago (filas
   regladas con guion largo del PDF intacto) + un AVISO hecho a
   mano para el "Importante" (filete rojo al canto, leve giro).
   La lámina va a la izquierda, el libro de pagos a la derecha.
   ============================================================ */

.acceso {
  padding: var(--seccion-y) var(--canal);
  background: var(--vitela);
  border-top: 1px solid var(--filete);
}
.acceso__cabe { max-width: 64ch; margin-bottom: clamp(2.4rem, 4vw, 3.8rem); }
.acceso__titulo { font-size: var(--t-titulo); margin-bottom: 1.2rem; }
.acceso__intro { color: var(--tinta-media); font-size: var(--t-lead); }

.acceso__cuerpo { display: grid; grid-template-columns: 0.86fr 1.14fr; gap: clamp(2rem, 4vw, 4.5rem); align-items: start; }
.acceso__media .plancha, .acceso__media img { aspect-ratio: 3 / 3.2; }

.acceso__label {
  font-family: "Public Sans", sans-serif; font-size: var(--t-folio);
  font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; color: var(--tinta-tenue);
  margin-bottom: 1.1rem;
}
.acceso__ledger { border-top: 2px solid var(--oro-hondo); }
.acceso__metodo {
  padding: 1.25rem 0; border-bottom: 1px solid var(--filete);
  color: var(--tinta-media);
}
.acceso__nombre { font-family: "Cormorant Garamond", serif; font-weight: 600; font-size: var(--t-rotulo); color: var(--tinta); }
.acceso__retiros { color: var(--tinta-media); margin-top: 1.6rem; max-width: 64ch; }

/* aviso hecho a mano */
.acceso__aviso {
  margin-top: clamp(2.2rem, 3.5vw, 3.4rem);
  background: var(--papel-claro);
  border: 1px solid var(--filete-hondo); border-left: 4px solid var(--rojo);
  padding: clamp(1.3rem, 2.5vw, 1.9rem) clamp(1.4rem, 3vw, 2.2rem);
  box-shadow: var(--sombra-plancha);
  transform: rotate(-0.5deg);            /* prendido a mano */
  max-width: 70ch;
}
.acceso__aviso b { color: var(--rojo); }

.acceso__cta { margin-top: clamp(2.2rem, 3.5vw, 3rem); }

@media (max-width: 1024px) {
  .acceso__cuerpo { grid-template-columns: 1fr; gap: 2.2rem; }
  .acceso__media .plancha, .acceso__media img { aspect-ratio: 16 / 10; }
  .acceso__metodo { padding: 1.3rem 0; }
  .acceso__retiros, .acceso__aviso { max-width: none; }
  .acceso__aviso { transform: none; }
}