/* =====================================================================
   Renting (unidades/renting.html): sección "¿Por qué DaaS?" bajo el banner.
   Íconos vectoriales sin fondo y con movimiento suave (se detiene si la
   persona pidió reducir animaciones). Se carga después de theme-azul.css.
   ===================================================================== */
.rn-why{background:linear-gradient(180deg,#fff 0%,#F3F7FF 100%);padding:58px 0 66px}
.rn-why h2{text-align:left;font-family:var(--font-display);font-weight:800;font-size:clamp(30px,4.2vw,46px);line-height:1.08;letter-spacing:-.03em;color:var(--navy,#0B1B4D)}
.rn-sub{text-align:left;max-width:60ch;margin:12px 0 0;font-size:clamp(15px,1.7vw,18px);line-height:1.45;color:#2A3550}
.rn-cards{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:34px}
.rn-card{flex:0 1 calc(20% - 13px);min-width:0;background:linear-gradient(180deg,#fff,#F4F8FF);border:1px solid #D9E5FA;border-radius:16px;padding:24px 16px 26px;text-align:center;box-shadow:0 16px 32px -24px rgba(11,43,160,.4);transition:transform .22s,border-color .22s}
.rn-card:hover{transform:translateY(-3px);border-color:#9DB8F2}
.rn-ic{width:64px;height:64px;margin:0 auto 14px;color:var(--az,#0B3BE6)}
.rn-ic svg{display:block;width:100%;height:100%;overflow:visible;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.rn-card h3{font-size:18px;line-height:1.18;letter-spacing:-.01em;font-weight:800;color:var(--az,#0B3BE6);margin-bottom:8px}
.rn-card p{font-size:14.5px;line-height:1.45;color:rgba(0,0,0,.8)}

/* Movimiento de los íconos */
.rn-ic svg *{transform-box:fill-box;transform-origin:center}
@keyframes rn-coin{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-4px)}}
@keyframes rn-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes rn-pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes rn-bar{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}
@keyframes rn-spin{to{transform:rotate(360deg)}}
@keyframes rn-out{0%,100%{transform:translate(0,0)}50%{transform:translate(4px,-4px)}}
.rn-coins .coin{animation:rn-coin 2.6s ease-in-out infinite}
.rn-coins .c2{animation-delay:.25s}
.rn-coins .c3{animation-delay:.5s}
.rn-doc .sheet{animation:rn-bob 3.2s ease-in-out infinite}
.rn-doc .pct{animation:rn-pulse 2.2s ease-in-out infinite}
.rn-chart .bar{transform-origin:50% 100%;animation:rn-bar 2.4s ease-in-out infinite}
.rn-chart .b2{animation-delay:.3s}
.rn-chart .b3{animation-delay:.6s}
.rn-gear .teeth{animation:rn-spin 14s linear infinite}
.rn-expand .arrow{animation:rn-out 2.2s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.rn-ic svg *{animation:none!important}}

@media(max-width:1100px){.rn-card{flex-basis:calc(33.333% - 11px)}}
@media(max-width:700px){
  .rn-why{padding:44px 0 50px}
  .rn-card{flex-basis:calc(50% - 8px);padding:20px 12px 22px}
  .rn-card h3{font-size:16.5px}
  .rn-card p{font-size:13.5px}
}
@media(max-width:360px){.rn-card{flex-basis:100%}}

/* =====================================================================
   "Una solución integral de principio a fin": tarjetas con imagen/logo y el texto siempre visible, como en
   los banners originales. Fondo azul muy claro en la primera.
   ===================================================================== */
.sl-sec{background:#EDF7FF;padding:62px 0 72px}
.sl-sec h2{text-align:left;font-family:var(--font-display);font-weight:800;font-size:clamp(28px,4vw,42px);line-height:1.1;letter-spacing:-.03em;color:var(--navy,#0B1B4D)}
.sl-sub{text-align:left;margin:14px 0 0;font-size:clamp(15px,1.7vw,18px);line-height:1.45;color:#1F2B4D}
.sl-sub{max-width:64ch}
.sl-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:stretch;margin-top:34px}
.sl-card{display:flex;flex-direction:column;background:#fff;border:1px solid #DCE8FB;border-radius:16px;padding:16px;box-shadow:0 18px 34px -26px rgba(11,43,160,.45)}
.sl-head{display:flex;align-items:center;gap:10px}
.sl-num{flex:none;width:30px;height:30px;border-radius:8px;background:var(--az,#0B3BE6);color:#fff;font-weight:800;font-size:16px;display:grid;place-items:center}
.sl-head h3{font-size:17px;line-height:1.15;letter-spacing:-.01em;font-weight:800;color:var(--navy,#0B1B4D)}
.sl-media{display:block;position:relative;width:100%;margin-top:12px;background:#fff;border-radius:10px;overflow:hidden;aspect-ratio:190/102}
.sl-media img{display:block;width:100%;height:100%;object-fit:cover}
.sl-media img.contain{object-fit:contain}
.sl-more,.sl-more-in{display:flex;flex-direction:column;flex:1}
.sl-list{list-style:none;margin:14px 0 2px;padding:0;display:grid;gap:8px}
.sl-list li{position:relative;padding-left:22px;font-size:14px;line-height:1.3;color:rgba(0,0,0,.8)}
.sl-list li::before{content:"✓";position:absolute;left:0;top:0;color:var(--az,#0B3BE6);font-weight:800}
.sl-logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 10px;margin-top:auto;padding-top:12px;border-top:1px solid #E3ECFB}
.sl-list + .sl-logos{margin-top:14px}
.sl-logos img{display:block;width:auto}
.sl-logos .lenovo{height:16px}
.sl-logos .hp{height:26px}
.sl-logos .dell{height:10px}

@media(max-width:1000px){.sl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sl-media{max-width:300px;margin-left:auto;margin-right:auto}}
@media(max-width:700px){.sl-sec{padding:46px 0 52px}.sl-grid{grid-template-columns:1fr}}

/* =====================================================================
   Banner de cifras (Renting): fondo azul profundo, cinco datos con íconos
   vectoriales que se mueven (nítidos a cualquier tamaño) y números que
   cuentan al llegar a la pantalla. Se detiene con "reducir movimiento".
   ===================================================================== */
.ft-band{padding:58px 0 46px;background:linear-gradient(180deg,#F3F8FF 0%,#fff 100%)}
.ft-band .wrap{max-width:1180px;width:calc(100% - 48px);padding:0}
.ft-grid{display:grid;grid-template-columns:1fr 1fr 1.05fr 1.1fr 1.35fr;align-items:stretch;background:#022966;border-radius:28px;padding:38px 18px 34px}
.ft-item{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:0 24px}
.ft-item + .ft-item{border-left:1px solid rgba(255,255,255,.4)}
.ft-ic{flex:none;width:44px;height:44px;color:#fff;transition:transform .3s}
.ft-ic svg{display:block;width:100%;height:100%;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ft-item:hover .ft-ic{transform:scale(1.1)}
.ft-txt{min-width:0;display:flex;flex-direction:column;gap:6px}
.ft-num,.ft-title{display:block;font-family:var(--font-mono);font-weight:600;font-size:clamp(17px,1.4vw,20px);line-height:1.1;white-space:nowrap;letter-spacing:0;color:#fff;font-variant-numeric:tabular-nums}
.ft-lbl,.ft-cities{display:block;font-size:clamp(14px,1.15vw,16px);line-height:1.25;letter-spacing:-.01em;color:#fff}
.ft-ic svg *{transform-box:fill-box;transform-origin:center}
@keyframes ft-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes ft-line{0%,100%{stroke-dasharray:0 40;opacity:.3}40%,80%{stroke-dasharray:40 0;opacity:1}}
@keyframes ft-pop{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
@keyframes ft-tilt{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes ft-wave{0%,100%{opacity:.15}50%{opacity:1}}
@keyframes ft-drop{0%,100%{transform:translateY(0)}40%{transform:translateY(-5px)}60%{transform:translateY(0)}}
@keyframes ft-ripple{0%{transform:scale(.3);opacity:.9}100%{transform:scale(1.6);opacity:0}}
.ft-laptop .lap{animation:ft-bob 3s ease-in-out infinite}
.ft-laptop .l1{animation:ft-line 2.8s ease-in-out infinite}
.ft-laptop .l2{animation:ft-line 2.8s ease-in-out .5s infinite}
.ft-group .center{animation:ft-pop 2.6s ease-in-out infinite}
.ft-group .left{animation:ft-bob 2.6s ease-in-out .3s infinite}
.ft-group .right{animation:ft-bob 2.6s ease-in-out .9s infinite}
.ft-worker .head{animation:ft-tilt 3.2s ease-in-out infinite;transform-origin:50% 100%}
.ft-headset .w1{animation:ft-wave 1.8s ease-in-out infinite}
.ft-headset .w2{animation:ft-wave 1.8s ease-in-out .35s infinite}
.ft-headset .cups{animation:ft-pop 2.4s ease-in-out infinite}
.ft-map .pin{animation:ft-drop 2.2s ease-in-out infinite}
.ft-map .ring{stroke-width:1.6;animation:ft-ripple 2.2s ease-out infinite}
@media(prefers-reduced-motion:reduce){.ft-ic svg *,.ft-ic{animation:none!important;transition:none!important}}

@media(max-width:1100px){
  .ft-grid{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:28px}
  .ft-item + .ft-item{border-left:0}
  .ft-item:nth-child(3n+2),.ft-item:nth-child(3n){border-left:1px solid rgba(255,255,255,.4)}
}
@media(max-width:700px){
  .ft-band{padding:40px 0 34px}
  .ft-grid{grid-template-columns:1fr;row-gap:0;padding:14px 18px;border-radius:22px}
  .ft-item{padding:20px 4px}
  .ft-item + .ft-item,.ft-item:nth-child(3n+2),.ft-item:nth-child(3n){border-left:0;border-top:1px solid rgba(255,255,255,.3)}
}

/* =====================================================================
   "Casos de éxito": seis tarjetas con logo, foto, resultado y sector.
   ===================================================================== */
.cs-sec{background:#fff;padding:54px 0 40px}
.cs-sec h2{font-family:var(--font-display);font-weight:800;font-size:clamp(28px,4vw,46px);line-height:1.1;letter-spacing:-.03em;color:var(--navy,#0B1B4D)}
.cs-sub{margin:12px 0 0;font-size:clamp(15px,1.7vw,19px);line-height:1.4;color:#1F2B4D}
.cs-grid{display:flex;flex-wrap:nowrap;gap:16px;margin-top:26px;padding:8px 0 20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.cs-grid::-webkit-scrollbar{display:none}
.cs-card{flex:0 0 calc((100% - 48px)/4);scroll-snap-align:start;display:flex;flex-direction:column;background:#fff;border-radius:16px;box-shadow:0 14px 30px -18px rgba(11,43,160,.35),0 0 0 1px rgba(11,59,230,.05);overflow:hidden}
.cs-logo{display:flex;align-items:center;justify-content:center;height:92px;padding:12px 18px;background:#fff}
.cs-logo img{display:block;max-width:120px;max-height:44px;width:auto;height:auto;object-fit:contain}
.cs-logo-txt{font-weight:800;font-size:19px;line-height:1.1;letter-spacing:-.01em;color:#1F2B4D;text-align:center}
.cs-photo{display:block;width:100%;aspect-ratio:2.1/1;object-fit:cover}
.cs-title{margin:16px 18px 0;font-size:18px;line-height:1.15;letter-spacing:-.01em;font-weight:800;color:var(--az,#0B3BE6)}
.cs-desc{margin:10px 18px 0;font-size:14.5px;line-height:1.4;color:rgba(11,27,77,.78)}
.cs-tag{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;margin:auto 18px 18px;padding:6px 14px 6px 6px;border-radius:999px;background:#EEF4FF;font-size:13.5px;line-height:1;font-weight:700;color:var(--az,#0B3BE6);margin-top:14px}
.cs-tag svg{flex:none;width:24px;height:24px;padding:4px;border-radius:50%;background:#fff;fill:none;stroke:var(--az,#0B3BE6);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;box-shadow:0 0 0 1px rgba(11,59,230,.18)}
@media(max-width:1000px){.cs-card{flex-basis:calc((100% - 16px)/2)}}
@media(max-width:700px){.cs-sec{padding:40px 0 30px}.cs-card{flex-basis:86%}}
.cs-nav{display:flex;justify-content:center;gap:10px;margin-top:2px}
.cs-btn{width:34px;height:34px;border-radius:50%;border:1px solid #DCE8FB;background:#fff;color:var(--az,#0B3BE6);font-size:20px;line-height:1;padding:0 0 3px;cursor:pointer;opacity:.85;transition:background .2s,opacity .2s,border-color .2s}
.cs-btn:hover{background:#EEF4FF;border-color:#B9CCF5;opacity:1}
.cs-btn:disabled{opacity:.3;cursor:default;background:#fff;border-color:#DCE8FB}

/* =====================================================================
   "¿Cómo funciona nuestro modelo DaaS?": cinco pasos en cinco columnas (como
   "¿Por qué DaaS?"), con íconos que se mueven apenas y flechas punteadas.
   ===================================================================== */
.rh-sec{background:#E9F4FD;padding:40px 0 54px}
.rh-sec h2{margin:0;font-family:var(--font-display);font-weight:800;font-size:clamp(24px,3.6vw,40px);line-height:1.1;letter-spacing:-.03em}
.rh-sec h2 span{display:inline-block;background:#0F1F52;color:#fff;border-radius:999px;padding:.32em 1.2em .36em}
.rh-sub{margin:20px 0 0;font-size:clamp(15px,1.9vw,22px);line-height:1.35;color:#0B1B4D}
.rh-steps{display:flex;flex-wrap:wrap;justify-content:center;gap:28px 16px;margin:30px 0 0;padding:0;list-style:none}
.rh-step{position:relative;flex:0 1 calc(20% - 13px);min-width:0}
.rh-ic{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--az,#0B3BE6);margin-bottom:18px}
.rh-ic svg{display:block;width:32px;height:32px;overflow:visible;fill:none;stroke:#fff;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.rh-step:not(:last-child)::after{content:"";position:absolute;top:32px;left:80px;right:14px;height:0;border-top:2px dashed var(--az,#0B3BE6);transform:translateY(-1px)}
.rh-step:not(:last-child)::before{content:"";position:absolute;top:26px;right:10px;border-left:9px solid var(--az,#0B3BE6);border-top:6px solid transparent;border-bottom:6px solid transparent}
.rh-step h3{font-size:clamp(17px,1.5vw,20px);line-height:1.18;letter-spacing:-.01em;font-weight:800;color:var(--az,#0B3BE6);margin:0 0 8px}
.rh-step p{margin:0;font-size:clamp(14px,1.25vw,16px);line-height:1.35;color:#0B1B4D}
.rh-ic svg *{transform-box:fill-box;transform-origin:center}
@keyframes rh-wob{0%,100%{transform:translate(0,0)}50%{transform:translate(2px,-2px)}}
@keyframes rh-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes rh-spin{to{transform:rotate(360deg)}}
@keyframes rh-draw{0%{stroke-dashoffset:1;opacity:1}55%,88%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes rh-head{0%,50%{opacity:0}60%,88%{opacity:1}100%{opacity:0}}
.rh-search .lens{animation:rh-wob 3s ease-in-out infinite}
.rh-monitor .scr{animation:ft-bob 3s ease-in-out infinite}
.rh-monitor .l1{animation:ft-line 2.8s ease-in-out infinite}
.rh-monitor .l2{animation:ft-line 2.8s ease-in-out .5s infinite}
.rh-headset .hs{animation:rh-bob 3s ease-in-out infinite}
.rh-gear .teeth{animation:rh-spin 16s linear infinite}
.rh-chart .tl{stroke-dasharray:1;stroke-dashoffset:0;animation:rh-draw 3.2s ease-in-out infinite}
.rh-chart .th{animation:rh-head 3.2s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.rh-ic svg *{animation:none!important}}
@media(max-width:1100px){.rh-step{flex-basis:calc(33.333% - 11px)}.rh-step::before,.rh-step::after{display:none!important}}
@media(max-width:700px){.rh-sec{padding:34px 0 40px}.rh-step{flex-basis:calc(50% - 8px)}.rh-sec h2 span{border-radius:26px;padding:.4em .9em .44em}}
@media(max-width:360px){.rh-step{flex-basis:100%}}

/* Flechas de los pasos: aparecen una por una, de izquierda a derecha, y se reinician. */
@keyframes rh-ln1{0%,10%{clip-path:inset(-4px 100% -4px 0);opacity:1}20%,80%{clip-path:inset(-4px 0 -4px 0);opacity:1}90%{clip-path:inset(-4px 0 -4px 0);opacity:0}100%{clip-path:inset(-4px 100% -4px 0);opacity:0}}
@keyframes rh-hd1{0%,17%{opacity:0}20%,80%{opacity:1}90%,100%{opacity:0}}
@keyframes rh-ln2{0%,22%{clip-path:inset(-4px 100% -4px 0);opacity:1}32%,80%{clip-path:inset(-4px 0 -4px 0);opacity:1}90%{clip-path:inset(-4px 0 -4px 0);opacity:0}100%{clip-path:inset(-4px 100% -4px 0);opacity:0}}
@keyframes rh-hd2{0%,29%{opacity:0}32%,80%{opacity:1}90%,100%{opacity:0}}
@keyframes rh-ln3{0%,34%{clip-path:inset(-4px 100% -4px 0);opacity:1}44%,80%{clip-path:inset(-4px 0 -4px 0);opacity:1}90%{clip-path:inset(-4px 0 -4px 0);opacity:0}100%{clip-path:inset(-4px 100% -4px 0);opacity:0}}
@keyframes rh-hd3{0%,41%{opacity:0}44%,80%{opacity:1}90%,100%{opacity:0}}
@keyframes rh-ln4{0%,46%{clip-path:inset(-4px 100% -4px 0);opacity:1}56%,80%{clip-path:inset(-4px 0 -4px 0);opacity:1}90%{clip-path:inset(-4px 0 -4px 0);opacity:0}100%{clip-path:inset(-4px 100% -4px 0);opacity:0}}
@keyframes rh-hd4{0%,53%{opacity:0}56%,80%{opacity:1}90%,100%{opacity:0}}
.rh-step:nth-child(1)::after{animation:rh-ln1 10s linear infinite}
.rh-step:nth-child(1)::before{animation:rh-hd1 10s linear infinite}
.rh-step:nth-child(2)::after{animation:rh-ln2 10s linear infinite}
.rh-step:nth-child(2)::before{animation:rh-hd2 10s linear infinite}
.rh-step:nth-child(3)::after{animation:rh-ln3 10s linear infinite}
.rh-step:nth-child(3)::before{animation:rh-hd3 10s linear infinite}
.rh-step:nth-child(4)::after{animation:rh-ln4 10s linear infinite}
.rh-step:nth-child(4)::before{animation:rh-hd4 10s linear infinite}
@media(prefers-reduced-motion:reduce){.rh-step::after,.rh-step::before{animation:none!important}}

/* Marcas de la línea: logos nuevos, con proporciones parecidas a las anteriores. */
.brands-row .blogo img{width:auto;height:auto}
.brands-row .blogo-hp img{height:38px}
.brands-row .blogo-lenovo img{width:62px}
.brands-row .blogo-dell img{width:86px}
.brands-row .blogo-hpe img{width:56px}
.sl-logos .lenovo{height:22px}