/* Dale — "reel" de funciones: mini-celulares animados con un título corto.
   Usa el motor de js/dale-escenas.js (data-escena / data-a / data-anim). */
.rl{max-width:1120px;margin:0 auto;padding:6px 0 4px;}
.rl-pista{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:22px 18px;padding:6px 16px 10px;}
@media (max-width:760px){
  .rl-pista{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;padding:6px 16px 14px;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
  .rl-pista::-webkit-scrollbar{display:none;}
  .rl-item{flex:0 0 72%;scroll-snap-align:center;}
}
.rl-item{display:flex;flex-direction:column;align-items:center;text-align:center;}
.rl-item h3{margin:12px 0 2px;font-size:16px;font-weight:900;letter-spacing:-.01em;color:#1F2937;}
.rl-item p{margin:0;font-size:13px;color:#6B7280;line-height:1.35;max-width:230px;}
.rl-puntos{display:none;justify-content:center;gap:6px;margin-top:4px;}
@media (max-width:760px){.rl-puntos{display:flex;}}
.rl-puntos i{width:6px;height:6px;border-radius:50%;background:#D1D5DB;transition:all .25s;}
.rl-puntos i.on{width:18px;border-radius:4px;background:#1F2937;}

/* El celular */
.rl-cel{width:206px;height:356px;background:#111;border-radius:30px;padding:7px;box-shadow:0 14px 32px rgba(0,0,0,.16);flex-shrink:0;}
.rl-pant{position:relative;width:100%;height:100%;border-radius:24px;overflow:hidden;background:#F7F7F5;font-size:11.5px;color:#1F2937;text-align:left;font-family:inherit;}
.rl-capa{position:absolute;inset:0;display:flex;flex-direction:column;}
.rl-bar{height:34px;display:flex;align-items:center;gap:6px;padding:0 11px;font-weight:900;font-size:12.5px;background:#fff;border-bottom:1px solid #EEE;flex-shrink:0;color:#993C1D;}
.rl-bar.wa{background:#075E54;color:#fff;border:0;}
.rl-bar.fb{background:#1877F2;color:#fff;border:0;}
.rl-bar.am{color:#BA7517;}
.rl-bar.vd{color:#0F6E56;}
.rl-cuerpo{flex:1;padding:9px;display:flex;flex-direction:column;gap:7px;min-height:0;}
.rl-chat{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:9px;background:#E7DDD3;}

/* Piezas */
.rl-card{background:#fff;border:1px solid #EEE;border-radius:11px;padding:8px;}
.rl-car{display:flex;gap:8px;align-items:center;background:#fff;border:1px solid #EEE;border-radius:11px;padding:6px;}
.rl-th{width:52px;height:40px;border-radius:8px;flex-shrink:0;background:#9CA3AF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32'%3E%3Cpath fill='%23fff' fill-opacity='.85' d='M8 22c0-3 2-5 5-6l7-6c2-2 4-2 7-2h10c3 0 5 1 7 3l5 5c4 0 8 2 8 6v3h-4a5 5 0 0 0-10 0H22a5 5 0 0 0-10 0H8z'/%3E%3Ccircle cx='17' cy='25' r='3.6' fill='%23fff'/%3E%3Ccircle cx='47' cy='25' r='3.6' fill='%23fff'/%3E%3C/svg%3E") center/78% no-repeat;}
.rl-th.b{background-color:#6B7280;}.rl-th.c{background-color:#B45309;}.rl-th.d{background-color:#1E40AF;}.rl-th.e{background-color:#991B1B;}
.rl-th.xl{width:100%;height:92px;border-radius:10px;background-size:56%;}
.rl-car b{display:block;font-size:11.5px;line-height:1.2;}
.rl-car span{display:block;font-weight:800;font-size:11px;color:#374151;}
.rl-pill{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:800;border-radius:999px;padding:3px 8px;background:#F3F4F6;color:#374151;width:max-content;max-width:100%;}
.rl-pill.vd{background:#ECFDF5;color:#065F46;}
.rl-pill.am{background:#FEF6E7;color:#975A16;}
.rl-pill.rj{background:#FEE2E2;color:#991B1B;}
.rl-pill.az{background:#EFF6FF;color:#1E40AF;}
.rl-btn{background:#16A34A;color:#fff;border-radius:10px;padding:9px;text-align:center;font-weight:800;font-size:12px;}
.rl-btn.rj{background:#993C1D;}.rl-btn.am{background:#E8A33D;}.rl-btn.gr{background:#fff;color:#1F2937;border:1.5px solid #E5E7EB;}
.rl-bub{background:#fff;border-radius:0 10px 10px 10px;padding:6px 8px;max-width:86%;font-size:11px;line-height:1.35;box-shadow:0 1px 1px rgba(0,0,0,.08);}
.rl-bub.yo{align-self:flex-end;background:#DCF8C6;border-radius:10px 0 10px 10px;}
.rl-noti{position:absolute;left:7px;right:7px;top:8px;background:#fff;border-radius:13px;padding:8px 9px;box-shadow:0 8px 22px rgba(0,0,0,.2);display:flex;gap:8px;align-items:flex-start;z-index:5;}
.rl-noti i{font-style:normal;width:26px;height:26px;border-radius:7px;background:#993C1D;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:12px;flex-shrink:0;}
.rl-noti b{display:block;font-size:11px;}
.rl-noti small{display:block;font-size:10.5px;color:#4B5563;line-height:1.3;}
.rl-noti.n2{top:66px;}.rl-noti.n3{top:124px;}
.rl-big{font-size:26px;font-weight:900;letter-spacing:-.02em;line-height:1.05;}
.rl-kpis{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
.rl-kpi{background:#fff;border:1px solid #EEE;border-radius:10px;padding:7px;}
.rl-kpi small{display:block;font-size:9.5px;color:#6B7280;font-weight:700;}
.rl-kpi b{font-size:18px;font-weight:900;}
.rl-fila{display:flex;align-items:center;gap:6px;}
.rl-av{width:26px;height:26px;border-radius:50%;background:#E5E7EB;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:10.5px;color:#374151;flex-shrink:0;}
.rl-av.a{background:#FDE68A;}.rl-av.b{background:#BFDBFE;}.rl-av.c{background:#BBF7D0;}.rl-av.d{background:#FBCFE8;}
.rl-sello{align-self:center;border:3px solid #16A34A;color:#16A34A;font-weight:900;font-size:15px;border-radius:10px;padding:5px 12px;transform:rotate(-5deg);background:rgba(255,255,255,.92);}
.rl-sello.rj{border-color:#DC2626;color:#DC2626;}
.rl-centro{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:10px;}
.rl-tit{font-size:10px;font-weight:800;letter-spacing:.06em;color:#9CA3AF;text-transform:uppercase;}
.rl-barra{height:7px;border-radius:4px;background:#E5E7EB;overflow:hidden;}
.rl-barra i{display:block;height:100%;width:var(--w,60%);background:#16A34A;border-radius:4px;transform-origin:left;transform:scaleX(0);transition:transform 1s cubic-bezier(.2,.8,.2,1);}
.esc-ver.rl-barra i,.esc-ver .rl-barra i,.rl-barra.esc-ver i{transform:scaleX(1);}
.rl-onda{display:flex;align-items:center;gap:2px;height:18px;}
.rl-onda i{width:3px;border-radius:2px;background:#075E54;height:6px;animation:rlOnda 1s ease-in-out infinite;}
.rl-onda i:nth-child(2n){animation-delay:.15s}.rl-onda i:nth-child(3n){animation-delay:.3s}.rl-onda i:nth-child(5n){animation-delay:.45s}
@keyframes rlOnda{0%,100%{height:5px}50%{height:17px}}
.rl-qr{width:74px;height:74px;background:
  linear-gradient(90deg,#111 10px,transparent 10px) 0 0/22px 22px,
  linear-gradient(#111 10px,transparent 10px) 0 0/22px 22px,#fff;border:6px solid #fff;outline:2px solid #111;border-radius:4px;}
.rl-scan{position:absolute;left:0;right:0;height:2px;background:#16A34A;box-shadow:0 0 10px #16A34A;top:20%;animation:rlScan 1.4s ease-in-out infinite alternate;}
@keyframes rlScan{to{top:80%}}
.rl-flecha{font-size:18px;color:#9CA3AF;text-align:center;line-height:1;}
.rl-tachado{position:relative;}
.rl-tachado.tachar::after{content:"";position:absolute;left:-2px;right:-2px;top:50%;height:2px;background:#DC2626;transform:rotate(-6deg);}
.rl-marco{position:relative;border-radius:10px;overflow:hidden;}
.rl-marco .rl-logo{position:absolute;left:6px;top:6px;background:#fff;border-radius:5px;padding:1px 6px;font-weight:900;font-size:11px;color:#111;}
.rl-marco .rl-precio{position:absolute;left:6px;bottom:6px;background:#993C1D;color:#fff;border-radius:6px;padding:2px 7px;font-weight:900;font-size:11px;}
.rl-reparte{display:flex;justify-content:space-around;}
.rl-reparte .rl-card{padding:6px;text-align:center;font-weight:800;font-size:10.5px;transition:all .3s;}
.rl-reparte .rl-card.on{border-color:#16A34A;background:#F0FDF4;box-shadow:0 0 0 2px #BBF7D0;}
.rl-cero{font-size:44px;font-weight:900;color:#0F6E56;}

/* Sin JS o con movimiento reducido: todo quieto y visible (lo maneja dale-escenas.css) */