/* RGG Plus (/rgg-plus) · lo propio de esta página. Se carga después de paginas.css.
   Usa de home-v4.css: .r-* (reseñas), .faq2 y .faq. De paginas.css: .pag-cab-2, .tarjetas, .lista-check, .pasos-pag, .cierre-pag. */

/* Link dentro de un párrafo (candidato a paginas.css) */
.enlace { color: var(--azul); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.enlace:hover { color: var(--azul-hover); }
.marino .enlace { color: var(--azul-claro); }
.marino .enlace:hover { color: #fff; }

/* ── 1. Cabecera: la captura ocupa la mitad derecha ── */
@media (min-width: 1024px) {
  .pag-cab-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px; }
}
.pag-cab-2 h1 { font-size: clamp(32px, 3.6vw, 46px); }

/* ── 2. Perfiles ── */
.perfil .ico { width: 28px; height: 28px; }
.tarjeta .perfil-usa { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--borde); font-size: 14px; }
.perfil-usa b { font-weight: 600; color: var(--marino); }

/* ── 3. La app: una fila por categoría, texto y captura alternados ── */
.app-lista { display: grid; gap: 88px; }
.app-fila { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 56px; align-items: center; }
.app-fila.inv { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.app-fila.inv .app-txt { order: 2; }
.app-txt .etiqueta, .app-caja .etiqueta { margin-bottom: 10px; }
.app-txt h3, .app-caja h3 { font-size: clamp(22px, 2.2vw, 28px); font-weight: 800; line-height: 1.2; letter-spacing: -.02em; color: var(--marino); text-wrap: balance; }
.app-txt > p:not(.etiqueta) { margin-top: 14px; font-size: 17px; color: var(--texto-2); }
.app-txt .lista-check { margin-top: 20px; font-size: 15px; }
.app-fig { margin: 0; }
.app-fig img { width: 100%; height: auto; border-radius: var(--r-tarjeta); border: 1px solid var(--borde); background: #fff; box-shadow: 0 24px 60px rgba(15, 30, 56, .12); }

/* Dos capturas superpuestas: la principal arriba a la izquierda, la segunda abajo a la derecha */
.app-pila { position: relative; aspect-ratio: 100 / 68; }
.app-pila img { position: absolute; }
.app-pila .pri { top: 0; left: 0; width: 86%; }
.app-pila .seg { right: 0; bottom: 0; width: 56%; box-shadow: 0 24px 60px rgba(15, 30, 56, .24); }

/* Categoría sin captura (Quant): una franja */
.app-sola { grid-template-columns: 1fr; }
.app-caja { display: flex; align-items: center; gap: 20px; padding: 28px 32px; border-radius: var(--r-bloque); background: #fff; border: 1px solid var(--borde); }
.app-ico { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #EEF4FC; color: var(--azul); }
.app-ico .ico { width: 24px; height: 24px; }

/* ── 4. Incluye RGG Basic ── */
#incluye .dos-col { align-items: center; }
#incluye .sec-cab { margin-bottom: 0; }
.incluye-lista { gap: 16px; padding: 32px; border-radius: var(--r-bloque); background: rgba(15, 30, 56, .72); border: 1px solid rgba(184, 205, 232, .22); font-size: 17px; }

/* ── 6. Precio ── */
.precio-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 64px; align-items: start; }
.precio-grid .sec-cab { margin-bottom: 36px; }
.precio-caja { position: sticky; top: calc(var(--barra) + 24px); display: flex; flex-direction: column; padding: 36px; border-radius: var(--r-bloque); background: #EEF4FC; border: 1px solid rgba(58, 113, 191, .35); }
.precio-caja h3 { color: var(--azul); }
.precio-monto { margin-top: 14px; font-size: clamp(40px, 4.4vw, 52px); font-weight: 800; line-height: 1; letter-spacing: -.04em; color: var(--marino); }
.precio-monto span { font-size: 17px; font-weight: 500; letter-spacing: 0; color: #475569; }
.precio-det { margin-top: 12px; font-size: 14px; color: #475569; }
.precio-caja .lista-check { margin: 24px 0 28px; font-size: 15px; }
.precio-caja .lista-check li { color: #334155; }
.precio-caja .lista-check li::before { background-color: #fff; }
.precio-caja .btn { width: 100%; }
.precio-anual { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(58, 113, 191, .2); font-size: 14px; color: #475569; }
.precio-anual .enlace { display: flex; align-items: center; width: fit-content; min-height: 44px; font-weight: 600; }

/* ── Tablet y celular ── */
@media (max-width: 1023px) {
  .app-fila, .app-fila.inv { grid-template-columns: 1fr; gap: 28px; }
  .app-fila.inv .app-txt { order: 0; }
  .precio-grid { grid-template-columns: 1fr; gap: 48px; }
  .precio-caja { position: static; max-width: 520px; }
  #incluye .dos-col { gap: 32px; }
}
/* Tablet: las 3 reseñas van en 2 columnas; la tercera queda centrada en vez de sola a la izquierda */
@media (min-width: 701px) and (max-width: 1023px) {
  #resenas .r-card:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 10px); }
}
@media (max-width: 700px) {
  .app-lista { gap: 64px; }
  .app-txt > p:not(.etiqueta) { font-size: 16px; }
  /* Una sola captura: se recorta desde arriba a la izquierda para que se lea más grande */
  .app-fig > img { aspect-ratio: 5 / 4; object-fit: cover; object-position: top left; }
  .app-pila { aspect-ratio: 100 / 73; }
  .app-pila .pri { width: 90%; }
  .app-pila .seg { width: 60%; }
  .app-caja { align-items: flex-start; gap: 16px; padding: 22px; }
  .app-ico { width: 44px; height: 44px; }
  .incluye-lista { padding: 24px 22px; font-size: 16px; }
  .precio-caja { padding: 28px 22px; }
}