/* =====================================================================
   Cloud & Software (unidades/valor-cloud-software.html): portada nueva.
   Mismo efecto que Infraestructura: fondo animado (shader, banner-hero.css / shader-hero.js)
   + foto a la derecha con degradado; el texto queda a la izquierda, sin tapar la nube ni la persona.
   ===================================================================== */
.cl-h{position:relative;isolation:isolate;overflow:hidden;color:#fff;background:#000D23;padding:110px 0 64px;min-height:600px;display:flex;align-items:center}
.cl-h .hban-shader{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;background:#000D23;opacity:.9}
.cl-photo{position:absolute;top:0;bottom:0;right:0;margin:auto 0;z-index:1;width:66%;height:auto;max-width:none;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 12%,#000 26%),linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 12%,#000 26%),linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);mask-composite:intersect;transform-origin:70% 50%;animation:cl-drift 14s ease-in-out infinite}
.cl-h::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,rgba(0,13,35,.84) 0%,rgba(0,13,35,.58) 32%,rgba(0,13,35,0) 52%)}
.cl-in{position:relative;z-index:3;width:100%}
.cl-main{max-width:min(44%,540px);animation:hb-float-a 7s ease-in-out infinite}
.cl-back{display:inline-block;font-family:var(--font-mono);font-size:12.5px;color:rgba(255,255,255,.85)}
.cl-back:hover{color:#fff}
.cl-eyebrow{margin-top:20px;font-family:var(--font-mono);font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:#8FD3FF}
.cl-h h1{margin-top:12px;font-size:clamp(32px,3.5vw,48px);line-height:1.05;font-weight:800;letter-spacing:-.03em;color:#fff;text-wrap:balance}
.cl-h h1 em{font-style:normal;color:#35B4FF}
.cl-h .lead{margin-top:18px;font-size:clamp(15px,1.45vw,17px);line-height:1.55;color:rgba(255,255,255,.93)}
.cl-chips{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.cl-chips li{padding:6px 13px;border-radius:999px;border:1px solid rgba(255,255,255,.32);background:rgba(255,255,255,.08);font-size:13px;font-weight:600;color:#fff}
.cl-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.cl-actions .btn{margin:0}
.cl-h .cl-ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.6);box-shadow:none}
.cl-h .cl-ghost:hover{background:rgba(255,255,255,.1)}
@keyframes cl-drift{0%,100%{transform:scale(1.03) translate3d(0,0,0)}50%{transform:scale(1.06) translate3d(-10px,-4px,0)}}
@media(prefers-reduced-motion:reduce){.cl-photo,.cl-main{animation:none}}
@media(max-width:1100px){
  .cl-main{max-width:min(50%,540px)}
}
@media(max-width:800px){
  /* Celular: la foto va arriba, completa y sin texto encima; el texto debajo sobre el fondo animado */
  .cl-h{display:block;min-height:0;padding:64px 0 40px}
  .cl-photo{position:relative;top:auto;bottom:auto;right:auto;margin:0;display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:60% 50%;-webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 100%);-webkit-mask-composite:source-over;mask-image:linear-gradient(180deg,#000 62%,transparent 100%);mask-composite:add;animation:none}
  .cl-h::after{display:none}
  .cl-in{margin-top:-18px}
  .cl-main{max-width:none;animation:none}
}
@media(max-width:480px){
  .cl-actions .btn{width:100%;justify-content:center}
}