/* ============================================================
 * recaudaciones.css — Tasas y servicios
 * © 2026 AS Sistemas · Alberto Salafia · Todos los derechos reservados
 * ============================================================ */

/* ── Hero partido: texto + foto identitaria ─────────────── */
.rec-herowrap { display: grid; grid-template-columns: 1fr; gap: var(--s-6); margin-bottom: var(--s-8); }
@media (min-width: 880px) {
  .rec-herowrap { grid-template-columns: 1.05fr 1fr; gap: var(--s-10); align-items: center; }
}
.rec-herowrap__text { margin-bottom: 0; }

.rec-herowrap__media { position: relative; margin: 0; }
.rec-herowrap__frame {
  position: absolute; inset: 0;
  border: 2px solid var(--c-accent); border-radius: var(--r-lg);
  transform: translate(16px, 16px); z-index: 0; pointer-events: none;
}
.rec-herowrap__mediabox {
  display: block; position: relative; z-index: 1;
  border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 3 / 2;
  background: var(--c-bg-soft); box-shadow: 0 18px 40px rgba(14, 31, 64, .16);
  animation: recHeroReveal 1100ms cubic-bezier(.23, 1, .32, 1) both;
}
.rec-herowrap__mediabox img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform-origin: 62% 42%;
  animation: recHeroKen 24s ease-in-out 1.1s infinite alternate; will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
  .rec-herowrap__media:hover .rec-herowrap__mediabox img { animation-play-state: paused; }
}
@keyframes recHeroReveal { from { clip-path: inset(0 0 100% 0); opacity: 0; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
@keyframes recHeroKen { from { transform: scale(1.01); } to { transform: scale(1.09) translate(-1.6%, -1.2%); } }
@media (prefers-reduced-motion: reduce) {
  .rec-herowrap__mediabox, .rec-herowrap__mediabox img { animation: none; }
}

/* ── Par de botones de contacto (misma fortaleza) ───────── */
.rec-cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-2); }
.rec-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: var(--s-4) var(--s-6); border-radius: var(--r-md);
  font-family: inherit; font-size: var(--fs-base); font-weight: 700;
  font-variation-settings: 'wght' 720; color: #fff; text-decoration: none;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.rec-btn svg { width: 22px; height: 22px; }
.rec-btn:hover { transform: translateY(-2px); }
.rec-btn--wa { background: var(--c-accent); box-shadow: 0 6px 18px rgba(2, 165, 82, .32); }
.rec-btn--wa:hover { background: var(--c-accent-2); box-shadow: 0 10px 24px rgba(2, 165, 82, .42); }
.rec-btn--mail { background: var(--c-primary); box-shadow: 0 6px 18px rgba(27, 61, 121, .30); }
.rec-btn--mail:hover { background: var(--c-primary-darkest); box-shadow: 0 10px 24px rgba(27, 61, 121, .42); }
@media (max-width: 480px) { .rec-btn { flex: 1 1 100%; } }