/* /rgg-basic (era /rgg-basic-v2, aprobada el 28/10/2026). Se carga después de la parte cabeza (base.css, home-v4.css, paginas.css).
   Usa las medidas comunes de las páginas internas (.wrap, .seccion-pag, .sec-cab + .h-grande, .pag-cab, .cierre-pag);
   lo propio de esta página es lo de adentro de cada bloque. Trabajo de la página (rgg-sitio/24-revision-paginas.md): mostrar qué recibís. */

/* Portada: una charla de ejemplo con el asesor sobre la foto, en el estilo de WhatsApp. Los mensajes entran de a uno.
   El alto y la columna de texto los pone .pag-portada (paginas.css), igual que en el resto de los servicios.
   Para que se lea como ilustración y no como captura (Pablo, 29 y 30/10/2026): los globos son los de WhatsApp, apoyados en una placa
   de vidrio esmerilado (sin cabecera de ventana) que los ubica sobre la foto, con un reflejo en diagonal que cruza todo, una luz azul
   adentro, un brillo con grano suave sobre cada globo y un mensaje anterior sin texto que se pierde arriba (la charla sigue).
   La placa se centra en el alto de la portada (márgenes automáticos con top y bottom) */
.rb-charla { position: absolute; z-index: 1; top: calc(var(--barra) + 24px); bottom: 36px; right: max(var(--lado), calc((100% - var(--ancho)) / 2)); width: 380px; height: fit-content; margin: auto 0; padding: 22px 20px;
  display: flex; flex-direction: column; gap: 10px; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  border: 1px solid rgba(255, 255, 255, .22); border-radius: 22px; 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 30px 60px rgba(4, 12, 30, .35); }
.rb-charla::before { content: ""; position: absolute; z-index: -1; inset: 10% 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(122, 174, 232, .3), rgba(58, 113, 191, .12) 55%, rgba(58, 113, 191, 0)); }
/* El reflejo del vidrio: una franja de luz en diagonal por encima de la placa y los globos */
.rb-charla::after { content: ""; position: absolute; z-index: 2; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0) 28%, rgba(255, 255, 255, .16) 36%, rgba(255, 255, 255, 0) 37%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .1) 43%, rgba(255, 255, 255, 0) 52%); }
.rb-msj { position: relative; max-width: 290px; margin: 0; padding: 8px 10px 22px; border-radius: 10px; font-size: 14px; line-height: 1.4; color: #111B21;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .3); filter: saturate(.85); animation: rb-entrar .5s ease both; }
/* Brillo de arriba a la izquierda y grano fino, mezclados con el globo */
.rb-msj::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; mix-blend-mode: soft-light;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.55'/%3E%3C/svg%3E"),
    linear-gradient(135deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 45%, rgba(58, 113, 191, .45)); }
.rb-msj.yo { align-self: flex-end; border-top-right-radius: 2px; background: #D9FDD3; }
.rb-msj.asesor { align-self: flex-start; border-top-left-radius: 2px; background: #fff; animation-delay: .6s; }
.rb-msj.yo:last-child { animation-delay: 1.2s; }
.rb-msj b { display: block; margin-bottom: 2px; font-size: 12.5px; color: var(--azul); }
.rb-msj span { position: absolute; right: 9px; bottom: 5px; font-size: 11px; color: #667781; }
/* El mensaje anterior: sin texto, solo dos renglones, y se pierde hacia arriba */
.rb-msj.rb-previo { width: 230px; padding: 12px 12px 14px; animation-delay: 0s; opacity: .7;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 90%); mask-image: linear-gradient(180deg, transparent, #000 90%); }
.rb-msj.rb-previo i { display: block; height: 8px; border-radius: 4px; background: #D5DCE6; }
.rb-msj.rb-previo i + i { width: 62%; margin-top: 8px; }
@keyframes rb-entrar { from { opacity: 0; transform: translateY(12px); } }
/* Con el mouse (script al final de la página): la placa se corre hacia el cursor y cada mensaje un poco más según su profundidad,
   siempre dentro del relleno de la placa; una luz blanca los sigue.
   Va en "translate" y no en "transform" para no pisar la animación de entrada */
.rb-foco { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(460px circle at var(--fx, 80%) var(--fy, 50%), rgba(255, 255, 255, .1), rgba(255, 255, 255, 0) 70%); }
.rb-charla { translate: calc(var(--mx, 0) * 8px) calc(var(--my, 0) * 8px); }
.rb-msj { translate: calc(var(--mx, 0) * var(--prof) * 1px) calc(var(--my, 0) * var(--prof) * 1px); }
.rb-msj:nth-child(1) { --prof: 1; }
.rb-msj:nth-child(2) { --prof: 2; }
.rb-msj:nth-child(3) { --prof: 4; }
.rb-msj:nth-child(4) { --prof: 6; }

/* Íconos en un cuadrado redondeado, como en las tarjetas del sitio */
.rb-ico { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 12px; background: #EEF4FC; color: var(--azul); }
.rb-ico .ico { width: 22px; height: 22px; }

/* Sin asesor y con RGG Basic: lo que queda igual (=) y lo que se suma (+), con la comparación en cada tarjeta */
.rb-signo { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-2); }
.rb-signo i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #EEF4FC; color: var(--marino); font-style: normal; font-size: 19px; font-weight: 800; letter-spacing: 0; line-height: 1; }
.rb-igual, .rb-suma { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.rb-igual li, .rb-suma li { display: flex; flex-direction: column; align-items: flex-start; padding: 24px; border-radius: var(--r-tarjeta); }
.rb-igual li { border: 1px solid var(--borde); background: #fff; }
.rb-igual h3, .rb-suma h3 { margin-top: 16px; font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--marino); }
.rb-igual p, .rb-suma p { margin-top: 6px; font-size: 15.5px; line-height: 1.55; color: var(--texto-2); }
.rb-suma-panel { margin-top: 32px; padding: 36px; border-radius: 22px; color: #fff;
  background: radial-gradient(70% 90% at 100% 0%, rgba(58, 113, 191, .32), transparent 70%), var(--marino); }
.rb-suma-panel .rb-signo { color: var(--azul-claro); }
.rb-suma-panel .rb-signo i { background: var(--azul); color: #fff; }
.rb-suma li { border: 1px solid rgba(184, 205, 232, .14); background: rgba(255, 255, 255, .04); }
.rb-suma .rb-ico { background: rgba(122, 174, 232, .14); color: var(--azul-claro); }
.rb-suma h3 { color: #fff; }
.rb-suma p { color: #B8CDE8; }
.rb-suma small { align-self: stretch; margin-top: auto; padding-top: 16px; font-size: 13.5px; color: rgba(184, 205, 232, .66); }
.rb-suma small::before { content: ""; display: block; height: 1px; margin-bottom: 12px; background: rgba(184, 205, 232, .14); }
.rb-igual sup, .rb-leyenda sup { font-size: .75em; font-weight: 700; color: var(--azul); }
/* La comisión va chica, como leyenda */
.rb-leyenda { max-width: 760px; margin-top: 20px; font-size: 14px; line-height: 1.6; color: var(--texto-2); }

/* La comunidad: el teléfono con una semana de avisos (diseño de rgg-marca/definiciones/aplicaciones/whatsapp-v2)
   y al lado los tipos de aviso, que corren el teléfono hasta su ejemplo, y el grupo de clientes con una votación */
.rb-canal { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 72px; align-items: start; }
.rb-tel { margin: 0; }
.rb-pant { overflow: hidden; border: 10px solid #111; border-radius: 38px; background: #EFEAE2; box-shadow: 0 24px 60px rgba(15, 30, 56, .22);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.rb-wa-cab { display: flex; align-items: center; gap: 10px; padding: 12px 12px 10px; background: #fff; border-bottom: 1px solid #E5E7EB; }
.rb-wa-cab svg { width: 22px; height: 22px; flex: none; fill: none; stroke: #111; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rb-wa-cab img { width: 36px; height: 36px; flex: none; border-radius: 50%; }
.rb-wa-cab b { display: block; font-size: 15px; color: #111; }
.rb-wa-cab small { display: block; font-size: 12px; color: #667781; }
/* Alto pensado para que asome el día siguiente: se nota que hay más mensajes para recorrer */
.rb-feed { height: 610px; overflow-y: auto; overscroll-behavior: contain; padding: 10px 10px 4px; scrollbar-width: thin;
  background: radial-gradient(circle at 20% 30%, rgba(0, 0, 0, .025) 1px, transparent 1.5px) 0 0 / 22px 22px, #EFEAE2; }
.rb-feed:focus-visible { outline: 2px solid var(--azul); outline-offset: -2px; }
.rb-dia { display: table; margin: 6px auto 10px; padding: 4px 12px; border-radius: 8px; background: #fff; box-shadow: 0 1px .5px rgba(0, 0, 0, .13); font-size: 12px; color: #54656F; }
.rb-burb { margin-bottom: 14px; padding: 4px 4px 6px; border-radius: 8px; background: #fff; box-shadow: 0 1px .5px rgba(0, 0, 0, .13); }
.rb-burb img { display: block; width: 100%; height: auto; border-radius: 6px; }
.rb-burb p { padding: 6px 6px 0; font-size: 14px; line-height: 1.36; color: #111B21; }
.rb-burb span { display: block; padding: 2px 6px 0; text-align: right; font-size: 11px; color: #667781; }
.rb-wa-pie { padding: 10px; background: #fff; border-top: 1px solid #E5E7EB; text-align: center; font-size: 12.5px; color: #667781; }
.rb-tel figcaption { margin-top: 14px; text-align: center; font-size: 13px; color: var(--texto-2); }
.rb-ayuda { margin-bottom: 14px; font-size: 14px; color: var(--texto-2); }
.rb-tipos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.rb-tipos button { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-content: start; gap: 4px 14px; width: 100%; height: 100%; padding: 16px;
  border: 1px solid var(--borde); border-radius: var(--r-tarjeta); background: #fff; font: inherit; color: inherit; text-align: left; cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease; }
.rb-tipos .rb-ico { grid-row: span 2; }
.rb-tipos b { align-self: center; font-size: 16px; line-height: 1.3; color: var(--marino); }
.rb-tipos span:not(.rb-ico) { grid-column: 2; font-size: 14.5px; line-height: 1.5; color: var(--texto-2); }
.rb-tipos button:hover { border-color: rgba(58, 113, 191, .45); }
.rb-tipos button[aria-pressed="true"] { border-color: var(--azul); box-shadow: 0 10px 24px rgba(15, 30, 56, .08); }
.rb-tipos button[aria-pressed="true"] .rb-ico { background: var(--azul); color: #fff; }
.rb-tipos button:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.rb-grupo { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: center; margin-top: 28px; padding-top: 28px; border-top: 1px solid #D5DCE6; }
.rb-grupo h3 { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 700; color: var(--marino); }
.rb-grupo h3 .ico { color: var(--azul); }
.rb-grupo p { margin-top: 8px; font-size: 16px; line-height: 1.6; color: var(--texto-2); }
/* La votación con el formato de las encuestas de WhatsApp */
.rb-encuesta { margin: 0; padding: 14px 14px 10px; border-radius: 10px; border-top-left-radius: 2px; background: #fff; box-shadow: 0 10px 28px rgba(15, 30, 56, .12);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.rb-enc-preg { font-size: 14.5px; font-weight: 700; line-height: 1.35; color: #111B21; }
.rb-encuesta ol { margin: 10px 0 0; padding: 0; list-style: none; }
.rb-encuesta li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 8px; padding: 6px 0; font-size: 14px; color: #111B21; }
.rb-encuesta li::after { content: ""; grid-column: 1 / -1; height: 6px; border-radius: 3px; background: linear-gradient(90deg, #21A867 var(--v), #E9EDEF var(--v)); }
.rb-encuesta li b { font-size: 12.5px; font-weight: 500; color: #667781; }
.rb-encuesta figcaption { margin-top: 6px; text-align: right; font-size: 11.5px; color: #667781; }

/* Cuánto cuesta: sin costo adicional con las ALyC de la lista (las tres principales más grandes). Con otra ALyC, una nota chica:
   en grande parecía que RGG Basic se cobra (Pablo, 28/10/2026) */
.rb-costo { max-width: 900px; }
.rb-precio { font-size: 44px; font-weight: 800; line-height: 1.05; letter-spacing: -.03em; color: var(--marino); }
.rb-precio small { font-size: 18px; font-weight: 600; letter-spacing: 0; color: var(--texto-2); }
.rb-precio-sub { margin-top: 6px; font-size: 17px; color: var(--texto-2); }
.rb-alycs { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 0; padding: 0; list-style: none; }
.rb-alycs li { flex: 1 1 calc(20% - 12px); }
.rb-alycs li.grande { flex-basis: calc(33.333% - 12px); }
.rb-alycs a { display: grid; place-items: center; height: 64px; padding: 0 12px; border: 1px solid var(--borde); border-radius: var(--r-tarjeta); background: #fff; transition: border-color .2s ease, box-shadow .2s ease; }
.rb-alycs .grande a { height: 88px; }
.rb-alycs a:hover { border-color: rgba(58, 113, 191, .45); box-shadow: 0 6px 18px rgba(15, 30, 56, .06); }
.rb-alycs img { width: auto; max-width: 88%; height: 26px; object-fit: contain; }
/* El logo de Sailing trae mucho aire alrededor */
.rb-alycs img[src*="sailing"] { height: 46px; }
.rb-alycs .grande img { height: 38px; }
.rb-otra { max-width: 760px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--borde); font-size: 14px; line-height: 1.6; color: var(--texto-2); }
.rb-otra a { font-weight: 600; color: var(--azul); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

/* Preguntas: cortas, abiertas y en dos columnas */
.rb-preguntas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 64px; margin: 0; }
.rb-preguntas div { padding-top: 20px; border-top: 1px solid #D5DCE6; }
.rb-preguntas dt { font-size: 18px; font-weight: 700; line-height: 1.4; color: var(--marino); }
.rb-preguntas dd { margin: 8px 0 0; font-size: 16px; line-height: 1.6; color: var(--texto-2); }
.rb-preguntas a { font-weight: 600; color: var(--azul); text-decoration: underline; text-underline-offset: 3px; }

/* La charla de la portada necesita el costado derecho libre */
@media (max-width: 1179px) {
  .rb-charla { display: none; }
}
@media (max-width: 1023px) {
  .rb-suma { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rb-canal { grid-template-columns: 1fr; gap: 48px; }
  .rb-tel { justify-self: center; width: 100%; max-width: 360px; }
}
@media (max-width: 700px) {
  .rb-igual, .rb-suma, .rb-tipos { grid-template-columns: 1fr; gap: 10px; }
  .rb-igual li, .rb-suma li { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: start; column-gap: 14px; padding: 18px; }
  .rb-igual .rb-ico, .rb-suma .rb-ico { grid-row: span 3; }
  .rb-igual h3, .rb-suma h3 { margin-top: 0; font-size: 17px; }
  .rb-igual p, .rb-suma p { margin-top: 4px; font-size: 15px; }
  .rb-suma small { grid-column: 2; padding-top: 12px; }
  .rb-suma-panel { margin-top: 24px; padding: 24px 16px; border-radius: 18px; }
  .rb-grupo { grid-template-columns: 1fr; gap: 18px; }
  .rb-feed { height: 540px; }
  .rb-alycs img[src*="sailing"] { height: 36px; }
  .rb-precio { font-size: 38px; }
  .rb-alycs li, .rb-alycs li.grande { flex-basis: calc(33.333% - 12px); }
  .rb-alycs a { height: 56px; padding: 0 8px; }
  .rb-alycs .grande a { height: 64px; }
  .rb-alycs .grande img { height: 28px; }
  .rb-alycs img { height: 20px; }
  .rb-preguntas { grid-template-columns: 1fr; gap: 24px; }
}