/* ════════════════════════════════════════════════
   RENTING EN LA PORTADA Y EN CASOS DE ÉXITO (26-10-2026)
   Enlazado solo en index.html (sección #renting y pie de PlanificadorDeBoda),
   casos-de-exito.html (fichas de plataformas a medida) y servicios.html (enlaces de #aplicaciones). Prefijo rp-.
   Reutiliza las tarjetas de casos de style.css (.case-card, .case-img-foto…).
   ════════════════════════════════════════════════ */

/* ── Sección «Renting tecnológico: todo montado, por una cuota al mes» ── */
.rp-renting { border-top: 1px solid var(--borde); }
.rp-cabeza { margin-bottom: 3.2rem; }
.rp-cabeza .section-title { max-width: 820px; margin-left: auto; margin-right: auto; text-wrap: balance; }
.rp-cabeza .section-desc { max-width: 680px; text-wrap: pretty; }

/* tres tarjetas en escritorio; en tableta y móvil, la del renting arriba a lo ancho y las otras dos en 2 columnas */
.rp-tarjetas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; }
.rp-tarjeta { min-width: 0; }
.rp-tarjeta-central { border-top: 3px solid var(--rojo); }
.rp-tarjetas .case-img-foto { aspect-ratio: 4 / 3; }
.rp-tarjetas .case-body { padding: 1.5rem 1.4rem 1.4rem; }
.rp-tarjetas .case-title { font-size: 1.12rem; margin-bottom: 0.5rem; }
.rp-tarjetas .case-text { font-size: 0.88rem; line-height: 1.6; margin-bottom: 1rem; }
.rp-tarjetas .case-footer { padding-top: 1rem; margin-top: auto; }
.rp-nota {
  max-width: 680px; margin: 2rem auto 0; text-align: center;
  font-size: 0.85rem; line-height: 1.6; color: var(--tinta-50);   /* 5,10:1 sobre blanco */
}

/* ── Fotos (Magnific): centradas, no arriba como las capturas de webs; el aviso del ratón dice adónde lleva ── */
.rp-foto img { object-position: center; }
.rp-foto { font-size: 0.8rem; color: rgba(255, 255, 255, 0.75); }   /* si una foto no carga, su alt no sale a 3rem (.case-img) */
.rp-foto[data-aviso]::after { content: attr(data-aviso); }

/* ── Zoom suave al aparecer (.reveal → .visible lo pone main.js).
   Quietas con «reducir movimiento» y con las animaciones en pausa de la portada ── */
.rp-zoom img { transform: scale(1.1); transition: transform 1.6s cubic-bezier(0.22, 0.61, 0.36, 1); }
.visible .rp-zoom img { transform: scale(1); }
.case-card.visible:hover .rp-zoom img { transform: scale(1.04); transition-duration: 0.6s; }
@media (prefers-reduced-motion: reduce) {
  .rp-zoom img { transform: none !important; transition: none !important; }
}
html.sin-animaciones .rp-zoom img { transform: none !important; }

/* ── Pie de tarjeta con dos enlaces (PlanificadorDeBoda: la aplicación y el software a medida) ── */
.case-footer.rp-pie-doble { flex-wrap: wrap; justify-content: flex-start; gap: 0.4rem 1.4rem; }

/* ── servicios.html (#aplicaciones): varios enlaces seguidos bajo el texto del bloque ── */
.rp-enlaces { display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; margin-top: 1.4rem; }
.rp-enlaces .bloque-ejemplo { margin-top: 0; }

/* ── Tableta ── */
@media (max-width: 900px) {
  .rp-tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; }
  .rp-tarjeta-central { grid-column: 1 / -1; }
  .rp-tarjeta-central .case-img-foto { aspect-ratio: 16 / 9; }
}

/* ── Móvil: dos columnas compactas, foto cuadrada y texto ajustado ── */
@media (max-width: 600px) {
  .rp-cabeza { margin-bottom: 2rem; }
  .rp-tarjetas { gap: 0.6rem; }
  .rp-tarjetas .case-img-foto { aspect-ratio: 1 / 1; }
  .rp-tarjetas .rp-tarjeta-central .case-img-foto { aspect-ratio: 16 / 9; }
  .rp-tarjetas .case-body { padding: 0.8rem 0.75rem 0.85rem; }
  .rp-tarjetas .case-sector { font-size: 0.62rem; letter-spacing: 0.08em; margin-bottom: 0.35rem; }
  .rp-tarjeta:not(.rp-tarjeta-central) .case-sector { display: none; }   /* en las dos estrechas, el título ya lo dice: más foto, menos texto */
  .rp-tarjetas .case-title { font-size: 0.92rem; letter-spacing: -0.2px; margin-bottom: 0.35rem; }
  .rp-tarjetas .case-text { font-size: 0.76rem; line-height: 1.45; margin-bottom: 0.5rem; }
  .rp-tarjetas .case-footer { padding-top: 0.6rem; }
  .rp-tarjetas .card-link { font-size: 0.78rem; }
  .rp-tarjetas .case-img-foto::after { display: none; }   /* en el móvil no hay ratón: el aviso sobra */
  .rp-nota { font-size: 0.8rem; margin-top: 1.4rem; }
}