/* /rgg-plus (era /rgg-plus-v2, aprobada el 30/10/2026) · se carga después de rgg-plus.css. Solo cambia la portada (Pablo, 30/10/2026: "un efecto más WOW, como en Nosotros o Basic").
   Toma los recursos de esas dos portadas: la luz que sigue al cursor y la grilla de planilla de /nosotros, la placa de vidrio
   esmerilado con el reflejo en diagonal de /rgg-basic. Lo propio: la captura inclinada en 3D, que se endereza hacia el cursor,
   y otra pantalla de la app más atrás, para que se lea que hay más módulos. */

.rp-portada { background: radial-gradient(60% 95% at 76% -14%, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 72%), var(--luz-marino), var(--marino); }
.rp-portada .wrap { position: relative; z-index: 1; }
/* Luz blanca suave que sigue al cursor por toda la portada (sin mouse queda sobre la captura) */
.rp-foco { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(520px circle at var(--fx, 74%) var(--fy, 52%), rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 70%); }

/* El escenario: grilla de planilla y luz azul detrás de la captura. La grilla va para el otro lado del cursor, para dar profundidad */
/* La perspectiva va en el transform de .rp-mov y no en el escenario: así la grilla y la luz quedan fuera del espacio 3D y siempre detrás */
.rp-escena { position: relative; isolation: isolate; }
.rp-escena::before { content: ""; position: absolute; inset: -22% -14%; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(122, 174, 232, .10) 1px, transparent 1px), linear-gradient(90deg, rgba(122, 174, 232, .10) 1px, transparent 1px);
  background-size: 44px 44px; background-position: calc(50% - var(--mx, 0) * 14px) calc(50% - var(--my, 0) * 14px);
  -webkit-mask-image: radial-gradient(closest-side, #000 25%, transparent 100%); mask-image: radial-gradient(closest-side, #000 25%, transparent 100%); }
.rp-escena::after { content: ""; position: absolute; inset: -6% 4%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .2), rgba(122, 174, 232, .24) 36%, rgba(58, 113, 191, .1) 62%, rgba(58, 113, 191, 0));
  translate: calc(var(--mx, 0) * 22px) calc(var(--my, 0) * 22px); animation: rp-respirar 7s ease-in-out infinite; }

/* En reposo, la captura mira hacia el texto; con el mouse se endereza hacia el cursor */
.rp-mov { position: relative; will-change: transform;
  transform: perspective(1700px) rotateY(calc(8deg - var(--mx, 0) * 8deg)) rotateX(calc(4deg - var(--my, 0) * 5deg)); }

/* Otra pantalla de la app, más atrás y apagada, que se asoma arriba a la derecha y se mueve menos que la de adelante */
.rp-portada .rp-atras { position: absolute; top: -15%; right: -10%; width: 72%; height: auto; border: 1px solid rgba(255, 255, 255, .14); border-radius: 16px;
  opacity: .45; filter: saturate(.7); box-shadow: 0 30px 60px rgba(4, 12, 30, .45);
  -webkit-mask-image: linear-gradient(200deg, #000 35%, transparent 92%); mask-image: linear-gradient(200deg, #000 35%, transparent 92%);
  translate: calc(var(--mx, 0) * -10px) calc(var(--my, 0) * -10px); animation: rp-asomar 1.1s .4s cubic-bezier(.2, .7, .2, 1) both; }

/* La placa de vidrio que sostiene la captura de adelante */
.rp-placa { position: relative; padding: 12px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 26px;
  background: linear-gradient(150deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05));
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 40px 80px rgba(4, 12, 30, .5);
  animation: rp-entrar .9s cubic-bezier(.2, .7, .2, 1) both, rp-flotar 8s ease-in-out .9s infinite; }
.rp-portada .rp-placa img { display: block; width: 100%; height: auto; border: 0; border-radius: 16px; box-shadow: 0 10px 30px rgba(4, 12, 30, .3); }
/* Un brillo blanco que se corre hacia el lado del cursor, como si el cursor fuera la luz, y un tinte azul abajo a la derecha */
.rp-placa::before { content: ""; position: absolute; inset: 12px; z-index: 1; border-radius: 16px; pointer-events: none; mix-blend-mode: soft-light;
  background: radial-gradient(circle at calc(30% + var(--mx, 0) * 40%) calc(20% + var(--my, 0) * 40%), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 45%),
    linear-gradient(135deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 40%, rgba(58, 113, 191, .4)); }
/* El reflejo del vidrio: dos franjas de luz en diagonal que cruzan placa y captura y se corren con el cursor */
.rp-placa::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .16) 44%, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0) 47%, rgba(255, 255, 255, .1) 49%, rgba(255, 255, 255, 0) 55%);
  background-size: 220% 100%; background-position: calc(50% - var(--mx, 0) * 30%) 0; }

@keyframes rp-entrar { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes rp-asomar { from { opacity: 0; transform: translate(-24px, 24px); } }
@keyframes rp-flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes rp-respirar { 0%, 100% { opacity: .75; transform: scale(.95); } 50% { opacity: 1; transform: scale(1.04); } }

/* Pantallas angostas: la captura derecha y sin la pantalla de atrás, para que se lea */
@media (max-width: 1023px) {
  .rp-mov { transform: none; }
  .rp-portada .rp-atras { display: none; }
  .rp-escena::before { inset: -14% -6%; }
}
@media (max-width: 700px) {
  .rp-placa { padding: 8px; border-radius: 20px; }
  .rp-portada .rp-placa img, .rp-placa::before { border-radius: 13px; }
  .rp-placa::before { inset: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .rp-placa, .rp-portada .rp-atras, .rp-escena::after { animation: none; }
}