/* La animación de «Conviértela en app» en iPhone (partials/app20-demo). Todo con rdm- para no chocar con la web. */
.rdm{display:grid;grid-template-columns:164px minmax(0,1fr);gap:12px;align-items:center;margin-top:16px}
.rdm-movil{position:relative;width:164px;height:336px;border-radius:26px;border:3px solid #2c2d31;background:#000;overflow:hidden;font-family:-apple-system,'SF Pro Text',Inter,Poppins,sans-serif;color:#111;text-align:left;line-height:1.2}
.rdm-movil *{box-sizing:border-box}
.rdm-capa{position:absolute;inset:0}
.rdm-isla{position:absolute;top:6px;left:50%;width:46px;height:13px;margin-left:-23px;border-radius:8px;background:#000;z-index:6}
/* A · Safari */
.rdm-safari{background:#000;animation:rdm-vSafari 12s infinite}
.rdm-web{position:absolute;inset:24px 0 66px;padding:8px 10px;color:#fff}
.rdm-web img{width:66px;display:block}
.rdm-t{font-family:var(--titular,Poppins);font-weight:700;font-size:14px;line-height:.95;text-transform:uppercase;margin-top:10px}
.rdm-c{height:66px;border-radius:5px;background:linear-gradient(135deg,#1f2a44,#0b79fb 160%);margin-top:9px}
.rdm-c2{height:40px;border-radius:5px;background:#1a1a1c;margin-top:7px}
.rdm-barra{position:absolute;left:0;right:0;bottom:0;height:66px;background:rgba(249,249,249,.97);border-top:.5px solid #c8c8cc}
.rdm-dir{margin:6px 8px 0;height:22px;border-radius:9px;background:#e4e4e9;font-size:7.5px;color:#222;display:flex;align-items:center;justify-content:center;gap:3px}
.rdm-dir i{font-style:normal;color:#8e8e93;font-size:6.5px}
.rdm-herr{display:flex;justify-content:space-around;align-items:center;height:26px;color:#0a84ff;margin-top:3px}
.rdm-herr svg{width:13px;height:13px}
.rdm-apag{color:#c7c7cc}
.rdm-comp{position:relative;display:grid;place-items:center}
.rdm-comp::after{content:'';position:absolute;inset:-6px;border-radius:50%;background:rgba(10,132,255,.18);opacity:0;animation:rdm-pulsoA 12s infinite}
/* B · la hoja de Compartir */
.rdm-compartir{animation:rdm-vComp 12s infinite}
.rdm-oscuro{position:absolute;inset:0;background:rgba(0,0,0,.4)}
.rdm-hj{position:absolute;left:0;right:0;top:20px;bottom:0;background:#f2f2f7;border-radius:12px 12px 0 0;overflow:hidden;animation:rdm-subeHj 12s infinite}
.rdm-asa{width:26px;height:3px;border-radius:2px;background:#c7c7cc;margin:5px auto 0;display:block}
.rdm-ficha{display:flex;align-items:center;gap:6px;height:38px;padding:0 8px;border-bottom:.5px solid #d1d1d6;overflow:hidden}
.rdm-ficha img{width:22px;height:22px;border-radius:5px}
.rdm-ficha b{display:block;font-size:7.5px;font-weight:600}
.rdm-ficha small{display:block;font-size:6.5px;color:#8e8e93}
.rdm-op{display:block;font-size:6.5px;color:#8e8e93;margin-top:1px}
.rdm-x{margin-left:auto;width:14px;height:14px;border-radius:50%;background:#e3e3e8;color:#8e8e93;display:grid;place-items:center;font-size:8px}
/* alturas fijas: el dedo tiene que caer siempre en «Añadir a pantalla de inicio», con la letra que tenga la web */
.rdm-gente,.rdm-apps{display:flex;gap:9px;height:40px;padding:6px 9px 0;overflow:hidden}
.rdm-gente span,.rdm-apps span{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:6px;line-height:8px;color:#6b6b70;width:26px;text-align:center;white-space:nowrap}
.rdm-gente i{width:24px;height:24px;border-radius:50%;background:#d6d6db;display:block}
.rdm-apps i{width:24px;height:24px;border-radius:6px;background:#dcdce1;border:.5px solid #cfcfd4;display:block}
.rdm-apps{height:44px;border-bottom:.5px solid #d1d1d6}
.rdm-marco{position:relative;margin:7px 7px 0;height:400px}
.rdm-lst{background:#fff;border-radius:8px;overflow:hidden;animation:rdm-bajaLst 12s infinite}
.rdm-lst div{display:flex;justify-content:space-between;align-items:center;height:21px;padding:0 8px;font-size:7.3px;color:#111;border-bottom:.5px solid #e5e5ea}
.rdm-lst div:last-child{border-bottom:0}
.rdm-lst div span:last-child{color:#3c3c43;font-size:8.5px;width:11px;text-align:center}
.rdm-bueno{animation:rdm-marca 12s infinite}
/* C · Añadir a inicio */
.rdm-anadir{background:#f2f2f7;animation:rdm-vAnadir 12s infinite}
.rdm-cb{display:flex;justify-content:space-between;align-items:center;padding:26px 8px 8px;font-size:7.5px;color:#0a84ff}
.rdm-cb b{color:#111;font-weight:600}
.rdm-ok{font-weight:600;position:relative}
.rdm-ok::after{content:'';position:absolute;inset:-4px -6px;border-radius:7px;background:rgba(10,132,255,.18);opacity:0;animation:rdm-pulsoC 12s infinite}
.rdm-fi{margin:4px 8px;background:#fff;border-radius:9px;padding:8px;display:flex;gap:8px;align-items:center}
.rdm-fi img{width:34px;height:34px;border-radius:8px}
.rdm-fi div{flex:1;border-bottom:.5px solid #e5e5ea;padding-bottom:5px;font-size:8px}
.rdm-fi small{display:block;color:#8e8e93;font-size:6.5px;margin-top:4px}
.rdm-ex{font-size:6.3px;color:#6d6d72;padding:4px 14px;line-height:1.4;margin:0}
/* D · pantalla de inicio */
.rdm-inicio{background:linear-gradient(160deg,#3a4a63 0%,#1c2433 55%,#0e121a 100%);animation:rdm-vInicio 12s infinite;padding:30px 12px 0}
.rdm-rej{display:grid;grid-template-columns:repeat(4,1fr);gap:11px 8px}
.rdm-rej span{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:5.5px;color:rgba(255,255,255,.85)}
.rdm-rej i{width:27px;height:27px;border-radius:7px;display:block;background:rgba(255,255,255,.18);border:.5px solid rgba(255,255,255,.12)}
.rdm-rd img{width:27px;height:27px;border-radius:7px;display:block;animation:rdm-aparece 12s infinite}
.rdm-rd em{font-style:normal;animation:rdm-aparece 12s infinite;color:#fff}
.rdm-dock{position:absolute;left:8px;right:8px;bottom:8px;height:42px;border-radius:14px;background:rgba(255,255,255,.14);display:flex;justify-content:space-around;align-items:center}
.rdm-dock i{width:27px;height:27px;border-radius:7px;background:rgba(255,255,255,.2);display:block}
.rdm-dedo{position:absolute;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.8);border:2px solid rgba(0,0,0,.22);box-shadow:0 2px 8px rgba(0,0,0,.45);z-index:7;animation:rdm-dedo 12s infinite;left:100px;top:200px;opacity:0}
/* los pasos */
.rdm-pasos{list-style:none;display:flex;flex-direction:column;gap:6px;margin:0;padding:0}
.rdm-pasos li{display:flex;gap:8px;align-items:flex-start;font-size:11.5px;line-height:1.35;color:#8f8f8f;padding:7px 8px;border-radius:9px;border:1px solid transparent}
.rdm-pasos li i{font-style:normal;flex:none;width:20px;height:20px;border-radius:50%;border:1px solid rgba(255,255,255,.16);display:grid;place-items:center;font-size:10.5px;font-weight:700}
.rdm-pasos li b{color:inherit;font-weight:600}
.rdm-pasos li small{display:block;font-size:10px;margin-top:3px;opacity:.85}
.rdm-pasos li:nth-child(1){animation:rdm-p1 12s infinite}.rdm-pasos li:nth-child(2){animation:rdm-p2 12s infinite}.rdm-pasos li:nth-child(3){animation:rdm-p3 12s infinite}.rdm-pasos li:nth-child(4){animation:rdm-p4 12s infinite}
.rdm-nota{font-size:11.5px;color:#9c9c9c;margin:12px 0 0;line-height:1.45}
.rdm-nota b{color:#fff}
@media (max-width:360px){.rdm{grid-template-columns:140px minmax(0,1fr)}.rdm-movil{transform:scale(.85);transform-origin:top left;margin:0 -24px -50px 0}.rdm-pasos li small{display:none}}
@media (prefers-reduced-motion:reduce){.rdm-movil *{animation-duration:24s!important}}

@keyframes rdm-vSafari{0%,15%{opacity:1}16%,100%{opacity:0}}
@keyframes rdm-pulsoA{0%,10%{opacity:0;transform:scale(.6)}12%{opacity:1;transform:scale(1)}15%,100%{opacity:0;transform:scale(1.3)}}
@keyframes rdm-vComp{0%,15%{opacity:0}16%,59%{opacity:1}60%,100%{opacity:0}}
@keyframes rdm-subeHj{0%,15%{transform:translateY(100%)}19%,26%{transform:translateY(120px)}36%,100%{transform:translateY(0)}}
@keyframes rdm-bajaLst{0%,36%{transform:none}43%,100%{transform:translateY(-63px)}}
@keyframes rdm-marca{0%,46%{background:#fff}48%,58%{background:#d1d1d6}100%{background:#fff}}
@keyframes rdm-vAnadir{0%,59%{opacity:0}60%,77%{opacity:1}78%,100%{opacity:0}}
@keyframes rdm-pulsoC{0%,70%{opacity:0}72%{opacity:1}76%,100%{opacity:0}}
@keyframes rdm-vInicio{0%,77%{opacity:0}78%,98%{opacity:1}100%{opacity:0}}
@keyframes rdm-aparece{0%,80%{transform:scale(0);opacity:0}85%{transform:scale(1.2);opacity:1}89%,100%{transform:scale(1);opacity:1}}
@keyframes rdm-dedo{
  0%{left:100px;top:200px;opacity:0;transform:scale(1)}
  4%{opacity:1}
  10%{left:68px;top:303px;transform:scale(1)}
  12%{left:68px;top:303px;transform:scale(.78)}
  14%{left:68px;top:303px;transform:scale(1)}
  22%{left:70px;top:290px;transform:scale(1)}
  25%{left:70px;top:290px;transform:scale(.85)}
  35%{left:70px;top:170px;transform:scale(.85)}
  37%{left:70px;top:170px;transform:scale(1)}
  44%{left:58px;top:220px;transform:scale(1)}
  47%{left:58px;top:220px;transform:scale(.78)}
  50%{left:58px;top:220px;transform:scale(1);opacity:1}
  64%{left:110px;top:60px}
  71%{left:131px;top:20px;transform:scale(1)}
  73%{left:131px;top:20px;transform:scale(.78)}
  76%{left:131px;top:20px;transform:scale(1);opacity:1}
  78%,100%{left:131px;top:20px;opacity:0}
}
@keyframes rdm-p1{0%,15%{color:#fff;border-color:rgba(111,177,255,.5);background:rgba(11,121,251,.12)}16%,100%{color:#8f8f8f;border-color:transparent;background:none}}
@keyframes rdm-p2{0%,15%{color:#8f8f8f;border-color:transparent;background:none}16%,59%{color:#fff;border-color:rgba(111,177,255,.5);background:rgba(11,121,251,.12)}60%,100%{color:#8f8f8f;border-color:transparent;background:none}}
@keyframes rdm-p3{0%,59%{color:#8f8f8f;border-color:transparent;background:none}60%,77%{color:#fff;border-color:rgba(111,177,255,.5);background:rgba(11,121,251,.12)}78%,100%{color:#8f8f8f;border-color:transparent;background:none}}
@keyframes rdm-p4{0%,77%{color:#8f8f8f;border-color:transparent;background:none}78%,100%{color:#2ee59d;border-color:rgba(46,229,157,.45);background:rgba(46,229,157,.08)}}

/* la opción del menú (layouts/zona20): «Añadir a la pantalla de inicio», solo si aún no la usa como app */
.zn-app[hidden]{display:none!important}
.zn-app{display:flex;align-items:center;gap:12px;width:100%;margin:10px 0 4px;padding:11px 12px;border:1px solid rgba(111,177,255,.4);border-radius:12px;background:rgba(11,121,251,.1);box-shadow:0 0 22px rgba(11,121,251,.15);color:#fff;font:inherit;text-align:left;cursor:pointer}
.zn-app img{width:36px;height:36px;border-radius:9px;flex:none}
.zn-app b{display:block;font-weight:600;font-size:14px;line-height:1.25}
.zn-app small{display:block;color:#cfcfcf;font-size:11.5px;line-height:1.3}
.zn-app i{margin-left:auto;font-style:normal;color:#6fb1ff;font-size:18px}
.zn-app:hover{background:rgba(11,121,251,.16)}