/* rubros-historia.css — La historia con scroll de las landings por rubro
   (noviembre 2026; la primera es /hoteles.html).

   Va DESPUÉS de rubros.css y solo en las páginas que la usan (body con la
   clase rb-con-historia). Dos piezas:

   1. .rb-hero-gran — el hero de titular grande y centrado, con un trazo a
      mano alrededor de las palabras clave (.rb-marca) y las consultas que
      flotan alrededor (.rb-flota, decorativas).
   2. .rb-historia — la historia que avanza con el scroll: a la izquierda
      los pasos (.rb-hist-paso, el texto: ahí está TODO lo que se cuenta) y
      a la derecha el escenario fijo (.rb-escenario, aria-hidden). En el
      escenario hay una ilustración en SVG que la cámara recorre
      (.rb-camara) y capas encima (.rb-capa: el chat, la ficha, el
      calendario…) que aparecen según el paso. Lo mueve /rubros-historia.js:
      sin él, los pasos se leen completos y el escenario queda quieto.

   En el teléfono el escenario va pegado arriba y los pasos pasan debajo. */

.rb-con-historia{--rb-papel:#f5f2ec;--rb-papel-2:#ebe6dc;background:var(--rb-papel)}

/* ── Kit propio: lo que la historia usa de rubros.css (variables, botones,
   chat, bandeja), copiado y acotado a .rb-historia para que funcione también
   en páginas que no cargan rubros.css (la portada, index.html). En las de
   rubro pisa con los mismos valores. ── */
.rb-historia{--rb-tinta:#18181b;--rb-tinta-2:#27272a;--rb-gris-1:#3f3f46;--rb-gris-2:#52525b;--rb-gris-3:#71717a;--rb-gris-4:#6b7280;
  --rb-borde:#ececec;--rb-borde-2:#e4e4e7;--rb-borde-3:#d4d4d8;--rb-suave:#f6f6f4;--rb-verde:#16a34a;--rb-verde-2:#15803d;
  --rb-verde-txt:#166534;--rb-verde-fondo:#f0fdf4;--rb-verde-borde:#bbf7d0;--rb-wa:#25D366;--rb-wa-cab:#075e54;--rb-chat:#e9e4dc;
  --rb-burbuja:#d9fdd3;--rb-papel:#f5f2ec;color:var(--rb-tinta);font-family:'General Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif}
.rb-historia *,.rb-historia *::before,.rb-historia *::after{box-sizing:border-box}
.rb-historia .rb-eyebrow{font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--rb-gris-4);text-transform:uppercase;margin:0 0 12px}
.rb-historia .rb-eyebrow-verde{color:var(--rb-verde-2)}
.rb-historia .rb-ctas{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.rb-historia .rb-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--rb-tinta);color:#fff;font-size:15px;font-weight:500;
  line-height:1.2;padding:14px 26px;border-radius:999px;text-decoration:none;border:1px solid var(--rb-tinta);transition:transform .12s,box-shadow .12s}
.rb-historia .rb-btn:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(0,0,0,.16)}
.rb-historia .rb-btn:focus-visible{outline:2px solid var(--rb-verde);outline-offset:3px}
.rb-historia .rb-btn-sec{background:#fff;color:var(--rb-tinta);border-color:var(--rb-borde-2)}
.rb-historia .rb-tel-cab{display:flex;align-items:center;gap:10px;background:var(--rb-wa-cab);color:#fff;padding:12px 14px}
.rb-historia .rb-tel-cab b{display:block;font-size:14px;line-height:1.25}
.rb-historia .rb-tel-cab small{display:block;font-size:11px;opacity:.85}
.rb-historia .rb-av{width:34px;height:34px;border-radius:50%;background:var(--rb-wa);color:#063d20;font-size:12px;font-weight:700;display:grid;place-items:center;flex:none}
.rb-historia .rb-tag-ej{margin-left:auto;flex:none;font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.28);padding:3px 8px;border-radius:999px}
.rb-historia .rb-b{max-width:84%;margin:0;padding:8px 11px 6px;border-radius:12px;font-size:13.5px;line-height:1.45;color:#111;box-shadow:0 1px 1px rgba(0,0,0,.08);overflow-wrap:anywhere}
.rb-historia .rb-b-cli{align-self:flex-start;background:#fff;border-top-left-radius:4px}
.rb-historia .rb-b-ag{align-self:flex-end;background:var(--rb-burbuja);border-top-right-radius:4px}
.rb-historia .rb-b-hora{display:block;text-align:right;font-size:10px;color:#54656f;margin-top:2px;font-variant-numeric:tabular-nums}
.rb-historia .rb-b-ag .rb-b-hora::after{content:" \2713\2713";content:" \2713\2713" / "";color:#34b7f1}
.rb-historia .rb-score{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.rb-historia .rb-score.caliente{color:#dc2626}.rb-historia .rb-score.tibio{color:#d97706}.rb-historia .rb-score.frio{color:#2563eb}
.rb-historia .rb-ilustrativo{margin:16px auto 0;text-align:center;font-size:12.5px;line-height:1.5;color:var(--rb-gris-4)}
.rb-historia .rb-incluye{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:34px auto 0;padding:0;max-width:900px}
.rb-historia .rb-incluye li{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;line-height:1.3;font-weight:500;color:var(--rb-gris-1);background:#fff;
  border:1px solid #d8efe0;border-radius:999px;padding:8px 14px}
.rb-historia .rb-incluye li::before{content:"\2713";content:"\2713" / "";color:var(--rb-verde-2);font-weight:700}
.rb-historia .rb-bandeja{position:relative;width:100%;background:#fff;border:1px solid var(--rb-borde);border-radius:26px;padding:18px;box-shadow:0 30px 70px rgba(0,0,0,.10)}
.rb-historia .rb-bandeja-cab{display:flex;align-items:center;gap:10px;padding:2px 4px 14px;border-bottom:1px solid #f1f1ef;margin-bottom:12px}
.rb-historia .rb-bandeja-wa{width:30px;height:30px;border-radius:9px;background:var(--rb-wa);display:grid;place-items:center;flex:none}
.rb-historia .rb-bandeja-wa svg{width:17px;height:17px}
.rb-historia .rb-bandeja-cab b{font-size:14px;font-weight:600;color:var(--rb-tinta-2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rb-historia .rb-msjs{display:flex;flex-direction:column;gap:9px}
.rb-historia .rb-msj{display:flex;align-items:center;gap:12px;padding:11px 12px;border:1px solid #f0f0ee;border-radius:16px;background:#fcfcfb}
.rb-historia .rb-msj-av{position:relative;width:40px;height:40px;border-radius:50%;background:#e4e4e7;color:var(--rb-gris-2);font-size:13px;font-weight:700;display:grid;place-items:center;flex:none}
.rb-historia .rb-msj-emo{position:absolute;right:-5px;bottom:-5px;width:22px;height:22px;border-radius:50%;background:#fff;border:1px solid var(--rb-borde);display:grid;place-items:center;font-size:12px;line-height:1}
.rb-historia .rb-msj-txt{flex:1;min-width:0}
.rb-historia .rb-msj-txt b{display:block;font-size:13.5px;font-weight:600;color:var(--rb-tinta-2)}
.rb-historia .rb-msj-txt small{display:block;font-size:12.5px;color:var(--rb-gris-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.rb-historia .rb-bandeja-pie{display:flex;align-items:center;gap:8px;margin-top:12px;padding:11px 14px;border-radius:14px;background:var(--rb-verde-fondo);
  border:1px solid var(--rb-verde-borde);color:var(--rb-verde-txt);font-size:13px;font-weight:600;line-height:1.4}
@keyframes rb-llega{from{opacity:0;transform:translateY(10px) scale(.98)}}
/* La historia como franja de papel dentro de una página blanca (la portada). */
.rb-historia-banda{background:linear-gradient(180deg,#fff 0%,#f3faf5 9%,#f3faf5 91%,#fff 100%);padding:64px 0 72px}

/* ── Hero grande ── */
.rb-hero-gran{padding:64px 0 28px;text-align:center;overflow:visible}
.rb-hero-gran::before{background:radial-gradient(42% 52% at 50% 38%,rgba(245,158,11,.10),transparent 72%),
                                 radial-gradient(30% 40% at 50% 100%,rgba(22,163,74,.07),transparent 70%)}
.rb-hero-gran .rb-wrap{position:relative;max-width:1180px}
.rb-hero-gran .rb-badge{margin-inline:auto}
.rb-h1-gran{font-size:clamp(44px,7.6vw,96px);line-height:.98;letter-spacing:-.045em;font-weight:600;max-width:15ch;margin:0 auto 26px}
/* Las palabras con el trazo a mano. El SVG es más grande que el texto y se
   dibuja solo una vez (pathLength=1). */
.rb-marca{position:relative;display:inline-block;white-space:nowrap}
.rb-marca svg{position:absolute;left:-7%;top:-16%;width:114%;height:136%;overflow:visible;pointer-events:none}
.rb-marca path{fill:none;stroke:var(--rb-verde);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1;animation:rb-trazo 1.2s .45s cubic-bezier(.6,.05,.25,1) forwards}
@keyframes rb-trazo{to{stroke-dashoffset:0}}
.rb-hero-gran .rb-lead{margin:0 auto 30px;max-width:620px;font-size:18px}
.rb-hero-gran .rb-ctas,.rb-hero-gran .rb-chips{justify-content:center}
/* Las consultas que llegan de noche, flotando alrededor del titular. */
.rb-flotas{position:absolute;inset:0;pointer-events:none}
.rb-flota{position:absolute;display:inline-flex;align-items:center;gap:8px;max-width:240px;background:#fff;border:1px solid var(--rb-borde);
  border-radius:18px 18px 18px 5px;padding:9px 14px;font-size:13.5px;line-height:1.3;font-weight:500;color:var(--rb-gris-1);
  box-shadow:0 12px 28px rgba(24,24,27,.07);opacity:0;animation:rb-asoma .6s cubic-bezier(.2,.8,.2,1) forwards,rb-flota 7s ease-in-out infinite;
  animation-delay:var(--d,0s),calc(var(--d,0s) + .6s)}
.rb-flota small{font-size:11px;color:var(--rb-gris-4);font-variant-numeric:tabular-nums}
.rb-flota-der{border-radius:18px 18px 5px 18px}
.rb-f1{left:0;top:96px;--d:.9s}
.rb-f2{right:2%;top:70px;--d:1.2s}
.rb-f3{left:3%;top:300px;--d:1.5s}
.rb-f4{right:0;top:290px;--d:1.8s}
@keyframes rb-asoma{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
@keyframes rb-flota{0%,100%{translate:0 0}50%{translate:0 -7px}}
/* La invitación a bajar: una flecha dibujada a mano. */
.rb-bajar{display:inline-flex;flex-direction:column;align-items:center;gap:6px;margin:44px auto 0;color:var(--rb-gris-2);
  font-size:14px;font-weight:500;text-decoration:none}
.rb-bajar svg{width:26px;height:58px;color:var(--rb-verde-2);animation:rb-baja 2.4s ease-in-out infinite}
.rb-bajar:hover{color:var(--rb-tinta)}
.rb-bajar:focus-visible{outline:2px solid var(--rb-verde);outline-offset:4px;border-radius:8px}
@keyframes rb-baja{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* ── La historia ── */
.rb-historia{position:relative;padding:40px 0 64px}
.rb-hist-in{display:grid;grid-template-columns:minmax(0,.74fr) minmax(0,1.26fr);gap:56px;max-width:1360px;margin:0 auto;padding:0 40px}
.rb-hist-pasos{grid-column:1;grid-row:1;list-style:none;margin:0;padding:0}
.rb-escenario{grid-column:2;grid-row:1;align-self:start;position:sticky;top:max(16px,calc(50vh - 400px));
  height:min(800px,calc(100vh - 32px));min-height:min(520px,calc(100vh - 32px));border-radius:30px;overflow:hidden;background:#1b2550;
  box-shadow:0 30px 80px rgba(24,24,27,.16),0 0 0 1px rgba(24,24,27,.06);isolation:isolate;container-type:size;
  /* Dónde deja la cámara lo que mira (fracción del escenario): a la izquierda,
     porque el teléfono va a la derecha. La lee rubros-historia.js. */
  --mira-x:.33;--mira-y:.52}

/* Cada paso ocupa casi una pantalla: el que cruza la mitad es el activo. */
.rb-hist-paso{min-height:72vh;display:flex;flex-direction:column;justify-content:center;padding:24px 0}
.rb-hist-paso:first-child{min-height:84vh;justify-content:flex-start;padding-top:12vh}
.rb-hist-paso:last-child{min-height:86vh}
/* El paso que no se está leyendo se aclara, pero su texto sigue legible
   (contraste ≥ 4,5:1 el párrafo y ≥ 3:1 el título grande sobre el papel):
   por color, no por opacidad. Lo decorativo (ícono y etiqueta) sí se apaga. */
.rb-hist-paso h2,.rb-hist-paso h3,.rb-hist-paso p{transition:color .45s}
.rb-js .rb-hist-paso:not(.rb-activo) h2,.rb-js .rb-hist-paso:not(.rb-activo) h3{color:#85858d}
.rb-js .rb-hist-paso:not(.rb-activo) p,.rb-js .rb-hist-paso:not(.rb-activo) p b{color:#6b6b73}
.rb-js .rb-hist-paso:not(.rb-activo) .rb-hist-top{opacity:.4}
.rb-hist-top{transition:opacity .45s}
.rb-hist-paso h2{font-size:clamp(34px,3.6vw,50px);line-height:1.04;letter-spacing:-.035em;font-weight:600;margin:0 0 16px;text-wrap:balance}
.rb-hist-paso h3{font-size:clamp(26px,2.4vw,34px);line-height:1.1;letter-spacing:-.028em;font-weight:600;margin:0 0 12px;text-wrap:balance}
.rb-hist-paso p{font-size:16.5px;line-height:1.6;color:var(--rb-gris-2);margin:0;max-width:440px;text-wrap:pretty}
.rb-hist-paso p b{color:var(--rb-tinta);font-weight:600}
.rb-hist-top{display:flex;align-items:center;gap:10px;margin:0 0 16px}
.rb-hist-ico{width:40px;height:40px;border-radius:13px;background:#fff;border:1px solid var(--rb-borde);display:grid;place-items:center;
  font-size:19px;line-height:1;flex:none;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.rb-js .rb-activo .rb-hist-ico{transform:scale(1.08) rotate(-4deg);box-shadow:0 8px 20px rgba(24,24,27,.10)}
.rb-etapa{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:999px}
.rb-etapa-atiende{background:#dcfce7;color:#166534}
.rb-etapa-califica{background:#fef3c7;color:#92400e}
.rb-etapa-concreta{background:#dbeafe;color:#1e40af}
.rb-etapa-sigue{background:#f3e8ff;color:#6b21a8}
.rb-etapa-conversa{background:#dcfce7;color:#166534}
.rb-etapa-crm{background:#dbeafe;color:#1e40af}
.rb-etapa-configura{background:#f3e8ff;color:#6b21a8}
.rb-hist-paso .rb-ctas{margin-top:26px}
.rb-hist-pie{max-width:1080px;margin:8px auto 0;padding:0 40px;text-align:center}
.rb-hist-pie .rb-ilustrativo{max-width:none;margin:0 auto}

/* ── La ilustración y la cámara ── */
/* Viñeta suave en los bordes del escenario (encima de la ilustración y
   debajo de las capas): le da profundidad sin moverse con la cámara. */
.rb-escenario::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(120% 95% at 50% 42%,transparent 58%,rgba(10,18,51,.30) 100%)}
.rb-camara{position:absolute;inset:0;transform-origin:0 0;will-change:transform;transition:transform 1.15s cubic-bezier(.65,.02,.22,1)}
/* overflow visible: con preserveAspectRatio=slice lo que sobra de la
   ilustración queda fuera de la caja del SVG, y la cámara tiene que poder
   mostrarlo al acercarse a un costado. */
.rb-camara svg{display:block;width:100%;height:100%;overflow:visible}
.rb-cielo-alba,.rb-cielo-dia{opacity:0;transition:opacity 1.3s}
[data-cielo="alba"] .rb-cielo-alba,[data-cielo="dia"] .rb-cielo-dia{opacity:1}
.rb-velo{opacity:.6;transition:opacity 1.3s}
[data-cielo="alba"] .rb-velo{opacity:.26}
[data-cielo="dia"] .rb-velo{opacity:0}
.rb-noche-solo{transition:opacity 1.2s}
.rb-dia-solo{opacity:0;transition:opacity 1.3s}
[data-cielo="alba"] .rb-dia-solo{opacity:.5}
[data-cielo="dia"] .rb-dia-solo{opacity:1}
[data-cielo="alba"] .rb-noche-solo{opacity:.35}
[data-cielo="dia"] .rb-noche-solo{opacity:0}
.rb-luna{transition:transform 1.4s cubic-bezier(.5,0,.3,1),opacity 1.2s}
[data-cielo="alba"] .rb-luna{transform:translate(90px,70px);opacity:0}
[data-cielo="dia"] .rb-luna{transform:translate(120px,220px);opacity:0}
.rb-sol{transform:translate(0,300px);opacity:0;transition:transform 1.5s cubic-bezier(.3,0,.2,1),opacity 1.2s}
[data-cielo="alba"] .rb-sol{transform:translate(0,95px);opacity:1}
[data-cielo="dia"] .rb-sol{transform:none;opacity:1}
.rb-sol-nucleo{transition:fill 1.4s}
[data-cielo="alba"] .rb-sol-nucleo{fill:#ffb36b}
.rb-duerme{transition:opacity .9s}
.rb-despierto{opacity:0;transition:opacity .9s .3s}
[data-cielo="alba"] .rb-duerme,[data-cielo="dia"] .rb-duerme{opacity:0}
[data-cielo="alba"] .rb-despierto,[data-cielo="dia"] .rb-despierto{opacity:1}
.rb-humo circle{animation:rb-humo 5s linear infinite;transform-box:fill-box;transform-origin:center}
.rb-humo circle:nth-child(2){animation-delay:-1.7s}
.rb-humo circle:nth-child(3){animation-delay:-3.4s}
@keyframes rb-humo{0%{transform:translate(0,0) scale(.5);opacity:0}15%{opacity:.75}100%{transform:translate(26px,-90px) scale(1.6);opacity:0}}
.rb-vapor path{animation:rb-vapor 3.6s ease-in-out infinite;opacity:0}
.rb-vapor path:nth-child(2){animation-delay:-1.2s}
.rb-vapor path:nth-child(3){animation-delay:-2.4s}
@keyframes rb-vapor{0%{transform:translateY(8px);opacity:0}40%{opacity:.8}100%{transform:translateY(-26px);opacity:0}}
.rb-dashy-luz{animation:rb-pulso 2.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes rb-pulso{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:.95;transform:scale(1.12)}}
.rb-zzz text{animation:rb-zzz 3s ease-in-out infinite;opacity:0}
.rb-zzz text:nth-child(2){animation-delay:-1s}
.rb-zzz text:nth-child(3){animation-delay:-2s}
@keyframes rb-zzz{0%{transform:translate(0,0);opacity:0}30%{opacity:.9}100%{transform:translate(-12px,-30px);opacity:0}}
.rb-estrellas circle{animation:rb-titila 3.2s ease-in-out infinite}
.rb-estrellas circle:nth-child(3n){animation-delay:-1.1s}
.rb-estrellas circle:nth-child(3n+1){animation-delay:-2.2s}
@keyframes rb-titila{0%,100%{opacity:1}50%{opacity:.35}}

/* La hora del escenario, arriba a la izquierda. */
.rb-reloj{position:absolute;z-index:5;left:18px;top:18px;display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 10px;border-radius:999px;
  background:rgba(15,15,16,.55);color:#fff;font-size:13px;font-weight:500;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.14);font-variant-numeric:tabular-nums;transition:background 1s,color 1s}
.rb-reloj b{font-size:15px;font-weight:600;letter-spacing:-.01em}
.rb-reloj::before{content:"🌙";content:"🌙" / ""}
[data-cielo="alba"] .rb-reloj::before{content:"🌅";content:"🌅" / ""}
[data-cielo="dia"] .rb-reloj::before{content:"☀️";content:"☀️" / ""}
[data-cielo="dia"] .rb-reloj{background:rgba(255,255,255,.75);color:var(--rb-tinta);border-color:rgba(24,24,27,.08)}

/* ── Las capas (el chat, la ficha, el calendario…) ── */
.rb-capa{position:absolute;z-index:4}
.rb-js .rb-capa{opacity:0;visibility:hidden;transform:translateY(16px) scale(.97);
  transition:opacity .45s,transform .6s cubic-bezier(.2,.8,.2,1),visibility 0s linear .6s}
.rb-js .rb-capa.rb-ve{opacity:1;visibility:visible;transform:none;transition:opacity .45s,transform .6s cubic-bezier(.2,.8,.2,1),visibility 0s}
/* Sin JS solo queda el teléfono con la conversación entera. */
.rb-historia:not(.rb-js) .rb-capa:not(.rb-tel2){display:none}
.rb-historia:not(.rb-js) .rb-escribe{display:none}

/* El teléfono con la conversación. */
.rb-tel2{right:4.5%;top:50%;margin-top:-280px;width:300px;height:560px;display:flex;flex-direction:column;background:var(--rb-chat);
  border:8px solid var(--rb-tinta);border-radius:38px;overflow:hidden;box-shadow:0 34px 70px rgba(0,0,0,.35)}
.rb-js .rb-tel2{transform:translateY(24px) rotate(1.5deg)}
.rb-js .rb-tel2.rb-ve{transform:none}
.rb-tel2 .rb-tel-cab{padding:11px 13px;flex:none}
.rb-wa-chat{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;gap:7px;padding:12px 10px 14px;overflow:hidden;
  background-image:radial-gradient(rgba(0,0,0,.035) 1px,transparent 1px);background-size:14px 14px}
.rb-wa-chat .rb-b{font-size:12.6px;line-height:1.42;max-width:88%;flex:none}
.rb-js .rb-wa-chat [data-ve]:not(.rb-ve){display:none!important}
.rb-js .rb-wa-chat .rb-ve{animation:rb-llega .45s cubic-bezier(.2,.8,.2,1) both}
.rb-escribe{display:inline-flex;gap:4px;align-items:center;padding:11px 13px!important}
.rb-escribe i{width:6px;height:6px;border-radius:50%;background:#54656f;opacity:.4;animation:rb-escribe 1.2s infinite}
.rb-escribe i:nth-child(2){animation-delay:.15s}
.rb-escribe i:nth-child(3){animation-delay:.3s}
@keyframes rb-escribe{0%,60%,100%{opacity:.35;transform:none}30%{opacity:1;transform:translateY(-3px)}}
.rb-wa-chat .rb-audio{display:flex;flex-direction:column;gap:5px;min-width:190px}
.rb-audio-fila{display:flex;align-items:center;gap:8px}
.rb-audio-play{width:26px;height:26px;border-radius:50%;background:#e9edef;display:grid;place-items:center;font-size:10px;color:#54656f;flex:none}
.rb-onda{flex:1;height:20px;display:block;color:#8696a0}
.rb-audio-dur{font-size:10.5px;color:#54656f;font-variant-numeric:tabular-nums}
.rb-audio-txt{font-size:11.5px;color:#54656f;font-style:italic;border-top:1px solid #eef0f1;padding-top:5px}
.rb-link{color:#027eb5;font-weight:500}

/* La ficha del cliente que va armando el agente. */
.rb-fx{left:4.5%;bottom:5.5%;width:264px;background:#fff;border-radius:20px;padding:14px 16px 12px;box-shadow:0 24px 56px rgba(0,0,0,.28)}
.rb-fx-cab{display:flex;align-items:center;gap:10px;padding-bottom:11px;border-bottom:1px solid #f1f1ef;margin-bottom:9px}
.rb-fx-av{width:34px;height:34px;border-radius:50%;background:#fde68a;color:#78350f;font-size:13px;font-weight:700;display:grid;place-items:center;flex:none}
.rb-fx-cab b{display:block;font-size:14px;line-height:1.25}
.rb-fx-cab small{display:block;font-size:11px;color:var(--rb-gris-4)}
.rb-fx-cab .rb-score{margin-left:auto;font-size:10px;padding:3px 8px;border-radius:999px;background:#fef2f2;flex:none}
.rb-fx-datos{display:grid;gap:7px;margin:0}
.rb-fx-datos div{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12.5px}
.rb-fx-datos dt{color:var(--rb-gris-4);flex:none}
.rb-fx-datos dd{margin:0;font-weight:600;color:var(--rb-tinta-2);text-align:right;border-radius:6px;transition:color .4s,background .4s}
.rb-js .rb-fx-datos dd[data-ve]:not(.rb-ve){color:transparent!important;background:#f1f1ef;min-width:96px}
.rb-fx-ok{color:var(--rb-verde-2)!important}
.rb-fx-tit{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--rb-gris-4);margin:0 0 8px}

/* El calendario de reservas que comparte. */
.rb-cal{left:4.5%;top:12%;width:252px;background:#fff;border-radius:20px;padding:14px 14px 12px;box-shadow:0 24px 56px rgba(0,0,0,.26)}
.rb-cal-cab{display:flex;align-items:baseline;justify-content:space-between;margin:0 0 10px}
.rb-cal-cab b{font-size:14px}
.rb-cal-cab small{font-size:10.5px;color:var(--rb-gris-4)}
.rb-cal-grilla{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;text-align:center;font-size:11.5px;font-variant-numeric:tabular-nums}
.rb-cal-grilla i{font-style:normal;font-size:9.5px;font-weight:700;color:var(--rb-gris-4);padding-bottom:3px}
.rb-cal-grilla span{height:26px;display:grid;place-items:center;border-radius:8px;color:var(--rb-tinta-2);font-weight:500;transition:background .4s,color .4s}
.rb-cal-grilla .rb-oc{color:#c4c4c8;text-decoration:line-through}
.rb-cal-grilla .rb-sel.rb-ve{background:var(--rb-verde);color:#fff;font-weight:700}
.rb-cal-grilla .rb-sal.rb-ve{box-shadow:inset 0 0 0 1.5px var(--rb-verde);color:var(--rb-verde-2);font-weight:700}
.rb-cal-pie{display:flex;gap:12px;margin:10px 0 0;font-size:10.5px;color:var(--rb-gris-4)}
.rb-cal-pie span::before{content:"";display:inline-block;width:8px;height:8px;border-radius:3px;margin-right:5px;vertical-align:-1px;background:var(--rb-verde)}
.rb-cal-pie span+span::before{background:#e4e4e7}

/* El aviso a recepción. */
.rb-aviso{left:50%;top:9%;margin-left:-180px;width:360px;display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:22px;
  background:rgba(255,255,255,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 24px 60px rgba(0,0,0,.28)}
.rb-aviso-ico{width:40px;height:40px;border-radius:11px;background:var(--rb-verde);display:grid;place-items:center;flex:none}
.rb-aviso-ico svg{width:22px;height:22px}
.rb-aviso p{margin:0;font-size:12.5px;line-height:1.4;color:var(--rb-gris-1)}
.rb-aviso-t{display:flex;justify-content:space-between;font-size:11px!important;color:var(--rb-gris-4)!important;margin-bottom:2px!important}
.rb-aviso b{color:var(--rb-tinta)}
.rb-aviso .rb-score{font-size:10px}
.rb-aviso-ver{color:var(--rb-verde-2)!important;font-weight:600}

/* El seguimiento a quien no reservó. */
.rb-seg{right:4.5%;top:50%;margin-top:-210px;width:300px;height:420px;display:flex;flex-direction:column;background:var(--rb-chat);border-radius:24px;
  overflow:hidden;box-shadow:0 30px 64px rgba(0,0,0,.32)}
.rb-seg .rb-tel-cab{padding:11px 13px;flex:none}
.rb-seg-sep{align-self:center;margin:2px 0;font-size:10.5px;font-weight:600;color:#54656f;background:rgba(255,255,255,.75);padding:3px 10px;border-radius:8px}
.rb-seg-tag{align-self:flex-end;margin:0;font-size:10.5px;font-weight:600;color:#6b21a8;background:#f3e8ff;padding:3px 9px;border-radius:999px}

/* La bandeja del final: todas respondidas. */
.rb-fin{left:50%;top:50%;width:400px;margin:-190px 0 0 -200px}
.rb-fin .rb-bandeja{max-width:none;box-shadow:0 30px 70px rgba(0,0,0,.25)}
.rb-fin .rb-msj{animation:none}
.rb-msj-ok{font-style:normal;font-size:10.5px;font-weight:700;color:var(--rb-verde-2);background:var(--rb-verde-fondo);border:1px solid var(--rb-verde-borde);
  padding:2px 7px;border-radius:999px;white-space:nowrap}
.rb-cero{margin-left:auto;font-size:11px;font-weight:700;color:var(--rb-verde-txt);background:var(--rb-verde-fondo);border:1px solid var(--rb-verde-borde);
  padding:3px 9px;border-radius:999px;white-space:nowrap;flex:none}
.rb-fin .rb-bandeja-pie{animation:none}

/* ── Escenario claro (la portada): el mapa del recorrido de un cliente,
   en los colores de la web. Sin cielo ni velo: fondo claro con puntos, las
   estaciones encendiéndose y la línea verde que avanza con cada paso. ── */
.rb-escenario-claro{--mira-x:.3;--mira-y:.42;background:#fbfbfa;box-shadow:0 24px 60px rgba(24,24,27,.08),0 0 0 1px #ececec}
.rb-escenario-claro::after{display:none}
/* Al final, la configuración baja a la esquina para no tapar el mapa
   completo (el paso sube el mapa con data-mira=".5,.3"). */
.rb-escenario-claro .rb-cfg{top:auto;bottom:5%}
.rb-escenario-claro .rb-reloj,[data-cielo] .rb-escenario-claro .rb-reloj{background:#fff;color:var(--rb-tinta);border-color:#e4e4e7;box-shadow:0 4px 14px rgba(24,24,27,.06)}
.rb-escenario-claro[data-cielo="noche"] .rb-reloj::before{content:"🌙";content:"🌙" / ""}
.rb-mapa-luz{opacity:0;transition:opacity .45s}
.rb-mapa-luz.rb-ve{opacity:1}
.rb-mapa-ok{opacity:0;transform:scale(.6);transform-box:fill-box;transform-origin:center;transition:opacity .35s,transform .35s cubic-bezier(.2,.8,.2,1)}
.rb-mapa-ok.rb-ve{opacity:1;transform:none}
.rb-mapa-avance{stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.1s cubic-bezier(.65,.02,.22,1)}
.rb-mapa-pulso{animation:rb-pulso 2.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
/* Lo que avanzó la línea verde y dónde va Camila en cada paso. */
[data-paso="2"] .rb-mapa-avance,[data-paso="3"] .rb-mapa-avance{stroke-dashoffset:79.5}
[data-paso="4"] .rb-mapa-avance{stroke-dashoffset:59}
[data-paso="5"] .rb-mapa-avance{stroke-dashoffset:41}
[data-paso="6"] .rb-mapa-avance{stroke-dashoffset:20.5}
[data-paso="7"] .rb-mapa-avance,[data-paso="8"] .rb-mapa-avance,[data-paso="9"] .rb-mapa-avance{stroke-dashoffset:0}
.rb-mapa-camila{opacity:0;transition:transform 1.1s cubic-bezier(.65,.02,.22,1),opacity .4s}
[data-paso] .rb-mapa-camila{transform:translate(420px,165px)}
[data-paso="1"] .rb-mapa-camila{opacity:1;transform:translate(420px,165px)}
[data-paso="2"] .rb-mapa-camila,[data-paso="3"] .rb-mapa-camila{opacity:1;transform:translate(920px,165px)}
[data-paso="4"] .rb-mapa-camila{opacity:1;transform:translate(1420px,165px)}
[data-paso="5"] .rb-mapa-camila{opacity:1;transform:translate(1420px,605px)}
[data-paso="6"] .rb-mapa-camila{opacity:1;transform:translate(920px,605px)}
[data-paso="7"] .rb-mapa-camila,[data-paso="8"] .rb-mapa-camila,[data-paso="9"] .rb-mapa-camila{opacity:1;transform:translate(420px,605px)}
.rb-etapa-cierra{background:#ecfccb;color:#3f6212}
/* Un documento dentro del chat (la cotización en PDF). */
.rb-pdf{display:flex!important;align-items:center;gap:9px;min-width:200px}
.rb-pdf-ico{width:32px;height:38px;border-radius:6px;background:#fee2e2;color:#b91c1c;font-size:9px;font-weight:800;display:grid;place-items:center;flex:none;letter-spacing:.04em}
.rb-pdf b{display:block;font-size:12px}
.rb-pdf small{display:block;font-size:10.5px;color:#54656f}
.rb-dia-sep{align-self:center;margin:2px 0;font-size:10.5px;font-weight:600;color:#54656f;background:rgba(255,255,255,.8);padding:3px 10px;border-radius:8px}

/* El embudo del CRM (portada). */
.rb-kan{left:4.5%;right:4.5%;bottom:5%;background:#fff;border-radius:22px;padding:12px 14px 14px;box-shadow:0 26px 60px rgba(0,0,0,.28)}
.rb-kan-cab{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--rb-gris-4);margin:0 0 10px}
.rb-kan-cab i{width:8px;height:8px;border-radius:50%;background:#e4e4e7}
.rb-kan-cab span{margin-left:6px}
.rb-kan-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.rb-kan-col{background:#f7f7f6;border-radius:14px;padding:8px;min-height:150px}
.rb-kan-col>p{display:flex;justify-content:space-between;margin:0 0 7px;font-size:11px;font-weight:700;color:var(--rb-gris-2)}
.rb-kan-col>p span{font-weight:600;color:var(--rb-gris-4)}
.rb-kan-card{background:#fff;border:1px solid #eeeeec;border-radius:11px;padding:8px 9px;margin:0 0 6px;font-size:11.5px;line-height:1.35}
.rb-kan-card b{display:block;font-size:12px;color:var(--rb-tinta-2)}
.rb-kan-card small{display:block;color:var(--rb-gris-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rb-kan-card .rb-score{display:inline-block;margin-top:4px;font-size:9.5px}
.rb-kan-card.rb-nuevo{border-color:var(--rb-verde);box-shadow:0 0 0 3px rgba(22,163,74,.14)}
.rb-js .rb-kan-card[data-ve]:not(.rb-ve){display:none}
.rb-js .rb-kan-card.rb-ve{animation:rb-llega .45s cubic-bezier(.2,.8,.2,1) both}
.rb-kan-control{display:flex;align-items:center;gap:8px;margin:10px 0 0;font-size:11.5px;font-weight:600;color:var(--rb-verde-txt);
  background:var(--rb-verde-fondo);border:1px solid var(--rb-verde-borde);border-radius:10px;padding:7px 10px}

/* La configuración del agente (portada). */
.rb-cfg{left:4.5%;top:12%;width:300px;background:#fff;border-radius:22px;padding:15px 16px 14px;box-shadow:0 26px 60px rgba(0,0,0,.28)}
.rb-cfg-t{margin:0 0 10px;font-size:11px;color:var(--rb-gris-4)}
.rb-cfg-campo{margin:0 0 10px}
.rb-cfg-campo>span{display:block;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--rb-gris-4);margin:0 0 4px}
.rb-cfg-valor{font-size:12.5px;font-weight:600;color:var(--rb-tinta-2);background:#f7f7f6;border:1px solid #eeeeec;border-radius:9px;padding:7px 9px}
.rb-cfg-motores{display:flex;gap:6px}
.rb-cfg-motores i{font-style:normal;flex:1;text-align:center;font-size:11.5px;font-weight:600;padding:6px 0;border-radius:8px;border:1px solid #e4e4e7;color:var(--rb-gris-2)}
.rb-cfg-motores i:first-child{background:var(--rb-tinta);border-color:var(--rb-tinta);color:#fff}
.rb-cfg-reglas{font-size:11.5px;line-height:1.45;color:var(--rb-gris-2);font-weight:500}
.rb-cfg-oficial{right:4.5%;bottom:7%;width:290px;background:#fff;border-radius:20px;padding:13px 14px;box-shadow:0 26px 60px rgba(0,0,0,.28)}
.rb-cfg-oficial p{margin:0;font-size:12px;line-height:1.45;color:var(--rb-gris-1)}
.rb-cfg-oficial .rb-cfg-ok{display:inline-flex;margin:8px 0 0;font-size:11px;font-weight:700;color:var(--rb-verde-txt);background:var(--rb-verde-fondo);
  border:1px solid var(--rb-verde-borde);border-radius:999px;padding:3px 9px}

/* ── Escenario chico (teléfono, o una ventana angosta): todo más compacto ── */
@container (max-width:640px){
  .rb-tel2{width:236px;height:430px;margin-top:-215px;right:3.5%;border-width:6px;border-radius:30px}
  .rb-fx{width:228px;left:3.5%;bottom:4%}
  .rb-cal{width:224px;left:3.5%}
  .rb-seg{width:250px;height:400px;margin-top:-200px;right:3.5%}
}
/* Escenario bajo pero ancho (un teléfono horizontal): las capas se achican
   para caber de arriba abajo. */
@container (min-width:471px) and (max-height:560px){
  .rb-tel2,.rb-seg{top:4%;margin-top:0;height:92%}
  .rb-cal{top:4%;scale:.8;transform-origin:left top}
  .rb-fx{scale:.8;transform-origin:left bottom}
  .rb-aviso{top:4%}
  .rb-fin{scale:.78;transform-origin:center}
}
@container (max-width:470px){
  /* Escenario de teléfono: la cámara deja su foco arriba (--mira-y:.2) y
     las capas van en la franja de abajo, sin pasar de ~58 % del alto, para
     no tapar lo que la cámara está mostrando. */
  .rb-tel2{width:64%;height:auto;max-height:58%;top:auto;bottom:3%;margin-top:0;right:4%;border-width:5px;border-radius:24px}
  .rb-tel2 .rb-tel-cab small,.rb-seg .rb-tel-cab small{display:none}
  .rb-wa-chat{padding:8px 7px 9px;gap:5px}
  .rb-wa-chat .rb-b{font-size:11px}
  .rb-fx{width:64%;padding:11px 12px 9px;border-radius:16px;bottom:3%;left:3%}
  .rb-fx-tit{display:none}
  .rb-fx-datos div{font-size:11px}
  .rb-cal{width:62%;padding:10px 10px 9px;top:auto;bottom:3%;left:3%}
  .rb-cal-grilla span{height:19px;font-size:10px}
  .rb-cal-pie{display:none}
  .rb-aviso{width:90%;left:5%;margin-left:0;top:auto;bottom:4%}
  .rb-seg{width:78%;height:auto;max-height:58%;top:auto;bottom:3%;margin-top:0;right:4%}
  /* La bandeja del final, entre el reloj y el borde de abajo. */
  .rb-fin{width:92%;left:4%;top:52px;bottom:3%;margin:0;display:flex;flex-direction:column;justify-content:flex-end}
  .rb-fin .rb-bandeja{display:flex;flex-direction:column;min-height:0;overflow:hidden;padding:11px;border-radius:18px}
  .rb-fin .rb-bandeja-cab{flex:none;padding-bottom:10px;margin-bottom:8px}
  .rb-fin .rb-msjs{gap:6px;min-height:0;overflow:hidden}
  .rb-fin .rb-msj{padding:6px 9px}
  .rb-fin .rb-msj-av{width:30px;height:30px;font-size:11px}
  .rb-fin .rb-msj-txt small{display:none}
  .rb-fin .rb-bandeja-pie{flex:none;margin-top:8px;padding:8px 11px;font-size:12px}
  .rb-reloj{left:12px;top:12px;font-size:12px;padding:5px 11px 5px 8px}
  /* Tan chico no caben dos capas una al lado de la otra: va una a la vez
     (la ficha sola, después el calendario, después el chat con el link de
     pago, después el aviso solo). */
  .rb-js .rb-escenario:not(.rb-escenario-claro)[data-paso="4"] .rb-tel2.rb-ve,
  .rb-js .rb-escenario:not(.rb-escenario-claro)[data-paso="5"] .rb-tel2.rb-ve,
  .rb-js .rb-escenario:not(.rb-escenario-claro)[data-paso="5"] .rb-fx.rb-ve,
  .rb-js .rb-escenario:not(.rb-escenario-claro)[data-paso="6"] .rb-cal.rb-ve,
  .rb-js .rb-escenario:not(.rb-escenario-claro)[data-paso="6"] .rb-fx.rb-ve,
  .rb-js .rb-escenario:not(.rb-escenario-claro)[data-paso="7"] .rb-fx.rb-ve,
  /* La portada: en el 4 la ficha sola; en el 5 el chat con el PDF. */
  .rb-js .rb-escenario-claro[data-paso="4"] .rb-tel2.rb-ve,
  .rb-js .rb-escenario-claro[data-paso="5"] .rb-fx.rb-ve{opacity:0;visibility:hidden;transform:translateY(16px) scale(.97);
    transition:opacity .45s,transform .6s cubic-bezier(.2,.8,.2,1),visibility 0s linear .6s}
}
@container (max-width:470px){
  .rb-kan{left:3%;right:3%;bottom:3%;padding:9px 9px 10px;border-radius:16px}
  .rb-kan-cab{display:none}
  .rb-kan-col{min-height:0;padding:6px}
  .rb-kan-card{padding:6px 7px;font-size:10.5px}
  .rb-kan-card small{display:none}
  .rb-cfg{width:64%;top:auto;bottom:3%;left:3%;padding:11px 12px}
  .rb-cfg-campo:last-child{display:none}
  .rb-cfg-oficial{display:none}
}
@container (max-width:470px) and (max-height:430px){
  .rb-fin .rb-bandeja-pie{display:none}
}

/* ── Responsive de la página ── */
@media(max-width:1100px){
  .rb-flotas{display:none}
}
@media(max-width:1000px){
  .rb-hist-in{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:36px;padding:0 28px}
}
/* En el teléfono: el escenario pegado arriba y los pasos pasan debajo. */
@media(max-width:820px){
  .rb-hero-gran{padding:40px 0 12px}
  .rb-hero-gran .rb-lead{font-size:16.5px}
  .rb-historia{padding:12px 0 48px}
  .rb-hist-in{display:block;padding:0}
  .rb-escenario{position:sticky;top:0;z-index:3;height:56vh;height:56svh;min-height:330px;border-radius:0 0 26px 26px;--mira-x:.5;--mira-y:.2}
  .rb-hist-pasos{position:relative;z-index:1;padding:0 20px}
  .rb-hist-paso{min-height:58vh;min-height:58svh;justify-content:flex-start;padding:30px 0 0}
  .rb-hist-paso:first-child{min-height:50vh;min-height:50svh;padding-top:30px}
  .rb-hist-paso:last-child{min-height:60vh;min-height:60svh;padding-bottom:40px}
  .rb-hist-paso p{font-size:15.5px}
  .rb-hist-pie{padding:0 20px}
  /* Al llegar con el teclado a los botones del último paso, que no queden
     detrás del escenario pegado arriba. */
  .rb-hist-paso a{scroll-margin-top:calc(max(330px,56svh) + 16px)}
}
@media(max-width:600px){
  /* «Tu WhatsApp, no.» va en una línea (nowrap): mide ~7,6em y con el trazo
     ~8,2em. Así entra con su trazo en el ancho de la pantalla. */
  .rb-h1-gran{font-size:min(56px,calc((100vw - 32px) / 8.4))}
  .rb-marca svg{left:-4%;width:108%}
  .rb-bajar{margin-top:30px}
}

/* ── Movimiento reducido: los pasos cambian igual, pero sin viajes ── */
@media(prefers-reduced-motion:reduce){
  .rb-marca path{animation:none;stroke-dashoffset:0}
  .rb-flota{animation:none;opacity:1}
  .rb-bajar svg,.rb-humo circle,.rb-vapor path,.rb-dashy-luz,.rb-zzz text,.rb-estrellas circle,.rb-escribe i{animation:none}
  .rb-vapor path,.rb-zzz text{opacity:.6}
  .rb-camara,.rb-cielo-alba,.rb-cielo-dia,.rb-velo,.rb-noche-solo,.rb-dia-solo,.rb-luna,.rb-sol,.rb-sol-nucleo,.rb-duerme,.rb-despierto,
  .rb-hist-ico,.rb-reloj{transition:none}
  .rb-js .rb-wa-chat .rb-ve{animation:none}
  .rb-js .rb-activo .rb-hist-ico{transform:none}
  .rb-hist-paso h2,.rb-hist-paso h3,.rb-hist-paso p,.rb-hist-top{transition:none}
  /* !important: las reglas por paso del escenario chico son más
     específicas y traen su propio desplazamiento. */
  .rb-js .rb-capa,.rb-js .rb-capa.rb-ve{transition:none!important;transform:none!important}
}