/* ROUS · rous-bloques v1.1 (3/10/2026; §3 genérico el 4/10). Módulo para páginas del sitio: tonos por bloque + bot de WhatsApp a la vista.
   Se activa con atributos: <main data-rb [data-rb-centrado]> · <section data-rb-tono="azul"> · <div data-rb-chat data-rb-demo>.
   Sin JS los tonos andan igual (CSS puro) y el chat se ve como transcripción estática.
   Mismo origen, sin fuentes ni imágenes externas (CSP). Prefijo rb- para no chocar con .rr-* ni .rrd-*. */

/* ---------- 1. TONOS: redefinen los tokens de la página SOLO dentro de la sección ---------- */
/* Oscuro = valor por defecto del sitio; claro = html[data-theme=light]. Texto principal ≥ 13:1, secundario ≥ 5,9:1 */
main[data-rb] [data-rb-tono]{background:var(--rb-fondo,var(--bg));color:var(--white)}
main[data-rb] [data-rb-tono=base]{--rb-fondo:#0d0b14}
main[data-rb] [data-rb-tono=suave]{--rb-fondo:#110e1c;--bg2:#16132a;--bg3:#1b1735}
main[data-rb] [data-rb-tono=lila]{--rb-fondo:#19143a;--bg:#19143a;--bg2:#1f1948;--bg3:#251e55;--card:#241d4d;--border:rgba(180,143,255,.24);--muted:rgba(240,236,248,.74)}
main[data-rb] [data-rb-tono=azul]{--rb-fondo:#0c1a36;--bg:#0c1a36;--bg2:#10224a;--bg3:#152a58;--card:#14264f;--border:rgba(110,168,255,.26);--muted:rgba(240,236,248,.74);--rb-gt:linear-gradient(135deg,#7fb2ff,#b48fff)}
main[data-rb] [data-rb-tono=noche]{--rb-fondo:#06050b;--bg:#06050b;--bg2:#0a0812;--bg3:#0e0b18;--card:#120e20;--border:rgba(180,143,255,.2);--muted:rgba(240,236,248,.74)}
main[data-rb] [data-rb-tono=acento]{--rb-fondo:#1d4fb8;--bg:#1d4fb8;--bg2:#2459c6;--bg3:#2a62d2;--card:rgba(255,255,255,.12);--border:rgba(255,255,255,.3);--white:#fff;--muted:rgba(255,255,255,.86);--rb-gt:linear-gradient(135deg,#fff,#dbe7ff)}

html[data-theme=light] main[data-rb] [data-rb-tono=base]{--rb-fondo:#fff}
html[data-theme=light] main[data-rb] [data-rb-tono=suave]{--rb-fondo:#f7f5fc;--bg2:#efeafa;--bg3:#e8e1f7}
html[data-theme=light] main[data-rb] [data-rb-tono=lila]{--rb-fondo:#efeafa;--bg:#efeafa;--bg2:#e7dff8;--bg3:#ddd2f3;--card:#fff;--border:rgba(124,58,237,.2);--muted:rgba(33,27,51,.74)}
/* Títulos con degradé en claro: violeta → magenta (≥ 5,37:1; el lila-rosa daba 2,1-2,5). Decisión de Rocío 4/10/2026 */
html[data-theme=light] main[data-rb] :is([data-rb-tono=base],[data-rb-tono=suave],[data-rb-tono=lila]){--rb-gt:linear-gradient(135deg,#6d28d9,#a21caf)}
html[data-theme=light] main[data-rb] [data-rb-tono=azul]{--rb-fondo:#e8f0fd;--bg:#e8f0fd;--bg2:#dde8fb;--bg3:#d0def8;--card:#fff;--border:rgba(29,79,184,.22);--muted:rgba(33,27,51,.74);--rb-gt:linear-gradient(135deg,#1d4fb8,#6d28d9)}
html[data-theme=light] main[data-rb] [data-rb-tono=noche]{--rb-fondo:#14102a;--bg:#14102a;--bg2:#1a1536;--bg3:#211a42;--card:#231c46;--border:rgba(180,143,255,.24);--white:#f3f0fb;--muted:rgba(243,240,251,.76);--ink:#f3f0fb;--text:#f3f0fb;--body:rgba(243,240,251,.84);--text-dim:rgba(243,240,251,.78);--text-light:rgba(243,240,251,.84);--fg-1:#f3f0fb;--fg-2:#d9d3ee;--fg-3:#b9b1d3;--rb-gt:linear-gradient(135deg,#b48fff,#e879f9)}
html[data-theme=light] main[data-rb] [data-rb-tono=acento]{--rb-fondo:#1d4fb8;--white:#fff;--ink:#fff;--text:#fff;--body:rgba(255,255,255,.9);--text-dim:rgba(255,255,255,.86);--text-light:rgba(255,255,255,.9);--fg-1:#fff;--fg-2:#e6eeff;--fg-3:#cfdcff}

/* Texto con degradé (.grad-text) y etiquetas: se tiñen por tono SIN tocar --grad, que también usan los botones */
main[data-rb] [data-rb-tono] .grad-text{background-image:var(--rb-gt,var(--grad))}
main[data-rb] [data-rb-tono=acento] .label-tag{color:#fff;border-color:rgba(255,255,255,.42);background:rgba(255,255,255,.14)}
main[data-rb] :is([data-rb-tono=lila],[data-rb-tono=azul]) .label-tag{color:var(--violet)}
html:not([data-theme=light]) main[data-rb] :is([data-rb-tono=lila],[data-rb-tono=azul]) .label-tag,main[data-rb] [data-rb-tono=noche] .label-tag{color:#d6c4ff}

main[data-rb] [data-rb-tono=acento] .btn-outline{color:#fff;border-color:rgba(255,255,255,.6);background:transparent}
main[data-rb] [data-rb-tono=noche] .btn-outline{color:#e6dcff;border-color:rgba(214,196,255,.45);background:transparent}
/* El tema claro del sitio fija el color de estas clases a mano (theme.css): en los tonos oscuros se respeta el token */
html[data-theme=light] main[data-rb] :is([data-rb-tono=noche],[data-rb-tono=acento]) :is(.hero__sub,.section-sub,.solucion__lead,.cta-final__sub,.timeline-step__desc,.aclaracion__a,.faq-item__a-inner,.plan-feature,.plan-no__item,.plan-optional,.plan-price-note,.plans-note,.plan-breakdown__row){color:var(--muted)}

/* ---------- 2. BOT DE WHATSAPP A LA VISTA ---------- */
.rb-chat{--c-hd:#0b141a;--c-ac:#53bdeb;--c-bg:#0b141a;--c-bot:#202c33;--c-bi:#e9edef;--c-me:#12395a;--c-mi:#e3effa;--c-ln:#2f3d46;--c-mu:#9aa7b0;--c-cd:#111b21;--c-pr:rgba(83,189,235,.18);--c-sb:#1d3a28;--c-si:#9bd7ae;--c-tb:#12395a;--c-ti:#9fd2f5;--c-yb:#111b21;--c-yi:#9aa7b0;--c-yl:#3b4a54;
  max-width:340px;width:100%;margin-inline:auto;border:1px solid var(--c-ln);border-radius:22px;overflow:hidden;background:var(--c-bg);color:var(--c-bi);box-shadow:0 24px 60px -22px rgba(0,0,0,.6);font:15px/1.4 "Plus Jakarta Sans","Inter",system-ui,-apple-system,sans-serif;text-align:left}
html[data-theme=light] .rb-chat{--c-hd:#0f4878;--c-ac:#17669f;--c-bg:#f3efe6;--c-bot:#fff;--c-bi:#111;--c-me:#dce7f0;--c-mi:#0b2a44;--c-ln:#e6e2d9;--c-mu:#6d6d6d;--c-cd:#fff;--c-pr:rgba(30,115,190,.14);--c-sb:#e1eee1;--c-si:#2f6b3b;--c-tb:#dce7f0;--c-ti:#0f4878;--c-yb:#fff;--c-yi:#6d6d6d;--c-yl:#b5b7bd}
.rb-top{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--c-hd);color:#fff}
.rb-av{flex:none;width:36px;height:36px;border-radius:50%;background:#fff;color:#0f4878;display:grid;place-items:center;font-size:1.1rem}
.rb-top b{display:block;font-size:.95rem;line-height:1.2}
.rb-top small{font-size:.76rem;opacity:.92}
.rb-msgs{list-style:none;margin:0;padding:14px 12px;display:flex;flex-direction:column;gap:8px;height:330px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;background:var(--c-bg)}
.rb-msgs::-webkit-scrollbar{display:none}
.rb-msgs>li{flex:none}
.rb-m{margin:0;max-width:86%;padding:9px 12px;font-size:.9rem;line-height:1.4;overflow-wrap:anywhere;animation:rb-in .26s ease both}
.rb-m p{margin:0;color:inherit}
.rb-me{align-self:flex-end;background:var(--c-me);color:var(--c-mi);border-radius:14px 4px 14px 14px}
.rb-bot{position:relative;align-self:flex-start;width:86%;background:var(--c-bot);color:var(--c-bi);border-radius:4px 14px 14px 14px;box-shadow:0 1px 1px rgba(0,0,0,.08);overflow:hidden}
.rb-dots{display:flex;gap:4px;padding:3px 2px}
.rb-dots i{width:7px;height:7px;border-radius:50%;background:var(--c-mu);animation:rb-b 1s infinite}
.rb-dots i:nth-child(2){animation-delay:.15s}
.rb-dots i:nth-child(3){animation-delay:.3s}
.rb-wb{display:grid;margin:9px -12px -9px;border-top:1px solid var(--c-ln)}
.rb-wb>span,.rb-wb>button{display:block;box-sizing:border-box;width:100%;min-height:44px;margin:0;padding:12px 10px;border:0;border-top:1px solid var(--c-ln);background:none;color:var(--c-ac);font-family:inherit;font-weight:700;font-size:.88rem;line-height:1.25;text-align:center;cursor:pointer;transition:background .2s}
.rb-wb>:first-child{border-top:0}
.rb-wb button:hover,.rb-wb .rb-press{background:var(--c-pr)}
.rb-wb button:focus-visible,.rb-again:focus-visible{outline:3px solid var(--c-ac);outline-offset:-3px}
.rb-wb>span{cursor:default}
.rb-sys{align-self:center;display:inline-flex;align-items:center;gap:6px;max-width:94%;padding:5px 11px;border-radius:999px;border:1px dashed var(--c-yl);background:var(--c-yb);color:var(--c-yi);font-size:.74rem;font-weight:600;line-height:1.3;animation:rb-in .26s ease both}
.rb-crm{padding:10px 12px 12px;border-top:1px solid var(--c-ln);background:var(--c-cd)}
.rb-crm-t{display:block;margin-bottom:6px;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--c-mu)}
.rb-cr{display:flex;flex-wrap:wrap;align-content:flex-start;gap:6px;min-height:62px}
.rb-cr [data-rb-tags]{display:contents}
.rb-p{display:inline-flex;gap:6px;align-items:baseline;align-self:flex-start;padding:5px 10px;border-radius:999px;font-size:.76rem;font-weight:700;animation:rb-in .26s ease both}
.rb-p small{font-size:.68rem;font-weight:600}
.rb-p b{font-weight:700}
.rb-st{background:var(--c-sb);color:var(--c-si)}
.rb-tg{background:var(--c-tb);color:var(--c-ti)}
.rb-again{display:block;width:100%;min-height:44px;padding:11px 14px;border:0;border-top:1px solid var(--c-ln);background:var(--c-cd);color:var(--c-ac);font-family:inherit;font-weight:700;font-size:.86rem;line-height:1.2;cursor:pointer}
.rb-again[hidden]{display:none}
.rb-nt{max-width:340px;margin:12px auto 0;font-size:.78rem;line-height:1.45;color:var(--muted);text-align:center}
@keyframes rb-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes rb-b{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-4px);opacity:1}}
@media(prefers-reduced-motion:reduce){.rb-m,.rb-sys,.rb-p{animation:none}.rb-dots i{animation:none}.rb-wb button{transition:none}}

/* ---------- 3. CENTRADO (opt-in con <main data-rb-centrado>; 3/10/2026, genérico desde el 4/10) ----------
   Mismo patrón que .section-header del sitio (640 / 60 / 32). Atributos:
   data-rb-col (grilla de una columna) · data-rb-lectura / data-rb-visual (hijos de esa grilla, centrados con ancho máximo) ·
   data-rb-medida (párrafo centrado a 50ch) · data-rb-centro (fila flex centrada) · data-rb-izq (lo largo y de lectura vuelve a la izquierda).
   Lo propio de cada página (gaps, la pareja celular + captura) va en un <style> de la página, justo después de este archivo. */
main[data-rb-centrado]{--rb-medida:50ch;--rb-lectura:760px;--rb-visual:880px}
main[data-rb-centrado] [data-rb-tono]{text-align:center}
main[data-rb-centrado] .btn{min-height:44px}
main[data-rb-centrado] :is(h1,h2){text-wrap:balance}
main[data-rb-centrado] .hero__eyebrow{flex-wrap:wrap;row-gap:10px}
main[data-rb-centrado] .hero__badges{justify-content:center}
main[data-rb-centrado] [data-rb-izq]{text-align:start}
main[data-rb-centrado] [data-rb-medida]{max-width:var(--rb-medida);margin-inline:auto}
main[data-rb-centrado] [data-rb-col]{grid-template-columns:minmax(0,1fr)}
main[data-rb-centrado] [data-rb-col]>:is([data-rb-lectura],[data-rb-visual]){width:100%;margin-inline:auto}
main[data-rb-centrado] [data-rb-col]>[data-rb-lectura]{max-width:var(--rb-lectura)}
main[data-rb-centrado] [data-rb-col]>[data-rb-visual]{max-width:var(--rb-visual)}
main[data-rb-centrado] [data-rb-centro]{justify-content:center}