/* ==========================================================================
   ckd-hero.css — hero del inicio: las tres líneas de negocio en escena 3D.
   Azul y blanco, con los mismos valores de renta-de-impresoras.php
   (style-landing.css): azul #2563eb, tinta #0f172a, gris #64748b,
   líneas #e2e8f0, fondo blanco.

   Dos modos:
   - Base: versión estática (móvil, movimiento reducido, sin JS): intro y
     tres bloques foto + texto, uno debajo de otro.
   - html.hx-scene (lo pone un script en <head> antes de pintar, y
     ckd-hero.js lo mantiene): escena fija con el "mundo" 3D (.hx-world):
     impresoras reales recortadas + laptops y PCs modeladas en CSS.
   ========================================================================== */
.hx{
  --hx-blue:#2563eb; --hx-blue-dark:#1d4ed8; --hx-blue-soft:#eff6ff;
  --hx-ink:#0f172a; --hx-dim:#64748b; --hx-line:#e2e8f0; --hx-bg:#ffffff;
}
#hero.hx{ background:var(--hx-bg); color:var(--hx-ink); padding:clamp(3rem,7vw,5rem) 0 clamp(3.5rem,8vw,6rem); }
.hx .ckd-h{ color:var(--hx-ink); }
.hx .ckd-lead{ color:var(--hx-dim); }
.hx .ckd-link-light{ color:var(--hx-blue); text-decoration-color:rgba(37,99,235,.35); }
.hx .ckd-link-light:hover{ color:var(--hx-blue-dark); text-decoration-color:var(--hx-blue-dark); }
.hx-cue, .hx-world{ display:none; }

/* Botón azul (en el resto del sitio .btn-primary es casi negro) */
.hx .hx-cta{
  --bs-btn-color:#fff; --bs-btn-bg:var(--hx-blue); --bs-btn-border-color:var(--hx-blue);
  --bs-btn-hover-color:#fff; --bs-btn-hover-bg:var(--hx-blue-dark); --bs-btn-hover-border-color:var(--hx-blue-dark);
  --bs-btn-active-color:#fff; --bs-btn-active-bg:#1e40af; --bs-btn-active-border-color:#1e40af;
  --bs-btn-focus-shadow-rgb:37,99,235;
  font-weight:700; border-radius:999px; padding-inline:1.4rem;
}

/* ---------- Bloques foto + texto (estático) ---------- */
.hx-chapters{ display:grid; gap:4rem; margin-top:4rem; }
.hx-ch{ display:grid; gap:1.75rem; align-items:center; }
@media (min-width:768px){ .hx-ch{ grid-template-columns:5fr 6fr; gap:3rem; } .hx-ch .hx-copy{ order:-1; } }

.hx .hx-copy h2{
  font-family:var(--f-display); font-weight:600; font-variation-settings:'wdth' 125;
  letter-spacing:-.03em; line-height:1.05; color:var(--hx-ink);
  font-size:clamp(1.8rem,3.2vw,2.8rem); margin:0 0 .9rem; max-width:16ch;
}
.hx-copy p{ color:var(--hx-dim); font-size:clamp(1.05rem,1.4vw,1.2rem); line-height:1.5; max-width:36ch; margin:0; }
.hx-facts{ list-style:none; margin:1.5rem 0 0; padding:0; border-top:1px solid var(--hx-line); max-width:30rem; }
.hx-facts li{ display:flex; gap:.6rem; align-items:baseline; padding:.7rem 0; border-bottom:1px solid var(--hx-line); color:var(--hx-ink); font-size:.97rem; }
.hx-facts i{ color:var(--hx-blue); font-size:1.05rem; }
.hx-link{ display:inline-flex; gap:.4rem; align-items:center; margin-top:1.4rem; color:var(--hx-blue); font-weight:700; }
.hx-link i{ transition:transform 200ms var(--ease-out); }
.hx-link:hover{ color:var(--hx-blue-dark); }
.hx-link:hover i{ transform:translateX(3px); }

/* Las imágenes son la misma escena del escritorio (equipos recortados sobre blanco,
   generadas de la escena 3D): el recuadro va en blanco para que se fundan con la página. */
.hx-media{ margin:0; border-radius:22px; overflow:hidden; background:#fff; }
.hx-media img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }

/* Sin escena y sin JS / movimiento reducido: equipos (recorte transparente de la escena de
   escritorio) libres sobre blanco y el texto debajo. */
html:not(.hx-scene) .hx-media{ border-radius:0; background:transparent; }
html:not(.hx-scene) .hx-media img{ width:auto; height:auto; max-width:100%; max-height:300px; aspect-ratio:auto; object-fit:contain; margin:0 auto; }

/* ---------- Celular / tablet con movimiento (html.hx-mobile, lo pone ckd-hero.js) ----------
   Igual que en escritorio, los equipos se quedan fijos mientras bajas: un escenario pegado
   bajo el menú que empieza con el collage y cambia a impresoras → laptops → equipos de venta
   cuando el texto de cada servicio llega. El texto sube por debajo del escenario. */
.hx-mobile #hero.hx{ overflow:visible; overflow-x:clip; }        /* overflow:hidden impedía el sticky */
.hx-mobile .hx-mstage{
  position:sticky; top:var(--hx-hdr, 66px); z-index:2; container-type:size;
  height:clamp(250px, 44svh, 400px); margin:0 -12px; background:#fff;
}
.hx-mobile .hx-mstage::after{                     /* el texto se desvanece al pasar bajo el escenario */
  content:''; position:absolute; left:0; right:0; top:100%; height:32px; pointer-events:none;
  background:linear-gradient(#fff, rgba(255,255,255,0));
}
.hx-mobile .hx-mstage .hx-collage{
  /* arriba del escenario (no centrado): centrado dejaba un hueco blanco bajo los botones */
  position:absolute; inset:0 0 auto; margin:-3% auto 0; width:min(94cqw, 120cqh); height:auto; aspect-ratio:4 / 3;
}
.hx-mlayer{ position:absolute; inset:7% 5% 15%; display:flex; align-items:center; justify-content:center; }
.hx-mlayer img{ width:auto; height:auto; max-width:100%; max-height:100%; }
.hx-mbar{ position:absolute; left:0; right:0; bottom:5%; display:flex; justify-content:center; gap:6px; }
.hx-mbar i{ display:block; width:18px; height:3px; border-radius:3px; background:#e2e8f0; transition:width 300ms var(--ease-out), background-color 300ms ease; }
.hx-mbar i.is-on{ width:34px; background:var(--hx-blue); }
.hx-mobile .hx-media{ display:none; }
.hx-mobile .hx-chapters{ position:relative; z-index:1; gap:0; margin-top:.5rem; }
.hx-mobile .hx-ch{
  display:block; padding:2.25rem 0 2.5rem;
  min-height:calc(100svh - var(--hx-hdr, 66px) - clamp(250px, 44svh, 400px));
}
.hx-mobile .hx-ch + .hx-ch{ border-top:1px solid var(--hx-line); }

.hx-final{ display:none; }

/* ==========================================================================
   Modo escena (escritorio con movimiento permitido)
   ========================================================================== */
.hx-scene #hero.hx{ padding:0; }
.hx-scene .hx-stage{ position:relative; height:calc(100vh - var(--hx-hdr, 66px)); overflow:hidden; background:var(--hx-bg); }
.hx-scene .hx-inner{ position:relative; height:100%; perspective:1600px; perspective-origin:50% 30%; }
.hx-scene .hx-chapters, .hx-scene .hx-ch{ display:contents; }
.hx-scene .hx-media{ display:none; }

.hx-scene .hx-intro, .hx-scene .hx-copy{ position:absolute; left:12px; top:50%; width:42%; transform:translateY(-50%); z-index:4; }
.hx-scene .hx-cue{ display:flex; gap:.5rem; align-items:center; margin-top:2.5rem; color:var(--hx-dim); font-size:.85rem; }
.hx-scene .hx-copy{ opacity:0; }


/* ---------- Collage plano de inicio (sin perspectiva ni 3D) ---------- */
.hx-collage{ display:none; }
/* Sin escena (celular, tablet, movimiento reducido): el collage va debajo del titular con la
   misma composición 4:3 (las posiciones de abajo son % de la caja). Las piezas suben una por una. */
html:not(.hx-scene) .hx-collage{
  display:block; position:relative; width:min(100%, 620px); aspect-ratio:4 / 3;
  margin:1rem auto -1.5rem; pointer-events:none;
}
@media (prefers-reduced-motion:no-preference){
  html:not(.hx-scene) .hx-collage img, html:not(.hx-scene) .hx-collage .cl-floor{ animation:hx-rise 900ms cubic-bezier(.23,1,.32,1) both; }
  html:not(.hx-scene) .hx-collage .cl-floor { animation-name:hx-fade; animation-delay:80ms; }
  html:not(.hx-scene) .hx-collage .cl-ricoh { animation-delay:120ms; }
  html:not(.hx-scene) .hx-collage .cl-canon { animation-delay:240ms; }
  html:not(.hx-scene) .hx-collage .cl-pc    { animation-delay:360ms; }
  html:not(.hx-scene) .hx-collage .cl-sharp { animation-delay:480ms; }
  html:not(.hx-scene) .hx-collage .cl-laptop{ animation-delay:640ms; animation-duration:1000ms; }
}
@keyframes hx-rise{ from{ opacity:0; transform:translateY(36px) scale(.94); } }
@keyframes hx-fade{ from{ opacity:0; } }
/* Hasta que ckd-hero.js fija el estado inicial, el mundo no se pinta (evita objetos encimados) */
.hx-scene:not(.hx-ready) .hx-world{ visibility:hidden; }
/* Fotos de producto (fondo transparente) en una caja de proporción fija 4:3:
   así la composición es idéntica en cualquier tamaño de pantalla. Las tres
   piezas de pie comparten la misma línea de piso; la laptop va al frente. */
.hx-scene .hx-inner{ container-type:size; }
.hx-scene .hx-collage{
  /* Anclado a la DERECHA: su borde derecho queda ~110 px antes del borde de la
     ventana (botones flotantes), aunque salga del contenedor. Crece hacia la
     izquierda sin pasar del 46% del contenedor (zona del titular). */
  --gap: calc((100vw - 100cqw) / 2 - 110px);          /* espacio libre a la derecha del contenedor */
  --w: min(60cqw, 125cqh, calc(54cqw + var(--gap)));  /* ancho de la caja 4:3 */
  display:block; position:absolute; z-index:3; pointer-events:none;   /* sobre el mundo: la Sharp va delante en el relevo */
  right:calc(-1 * var(--gap)); top:50%;
  width:var(--w); height:calc(var(--w) * 0.75); margin-top:calc(var(--w) * -0.375);
}
.hx-collage img{ position:absolute; width:auto; max-width:none; transform-origin:50% 50%; will-change:transform; }
.hx-collage .cl-ricoh { left:1%;  bottom:16%; height:70%; }   /* Ricoh y Canon: mismo tamaño real */
.hx-collage .cl-canon { left:28%; bottom:16%; height:70%; }
.hx-collage .cl-pc    { left:57%; bottom:16%; height:44%; }   /* torre compacta, más baja que las impresoras */
.hx-collage .cl-sharp { left:68.5%; bottom:16%; height:36%; }  /* Sharp de escritorio: ~mitad de alto que las grandes */
.hx-collage .cl-laptop{ left:52%; bottom:4%;  height:26%; }   /* laptop al frente, a escala */
/* sombra de piso común, debajo de todo el grupo */
.hx-collage .cl-floor{
  display:block; position:absolute; left:2%; right:2%; bottom:10%; height:9%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(15,23,42,.16), transparent 72%);
}

/* Bola en la que se funden las 3 impresoras (capítulo 2); nace sobre el lugar de la laptop */
.hx-orb{ display:none; }
.hx-scene .hx-orb{
  --sw:0; --spin:0deg;                      /* intensidad y giro del remolino (GSAP) */
  display:block; position:absolute; left:73%; top:66%; width:64px; height:64px; margin:-32px 0 0 -32px;
  border-radius:50%; z-index:4; pointer-events:none; opacity:0; will-change:transform, opacity;
  /* gris del cuerpo de la laptop (#45474b) con brillo metálico */
  background:radial-gradient(circle at 34% 30%, #d4d6da 0 5%, #8d9097 16%, #55585e 42%, #3a3c40 70%, #24262a 100%);
  box-shadow:0 18px 40px -12px rgba(15,23,42,.45), inset -10px -14px 24px rgba(0,0,0,.35);
}
/* remolino tipo agujero negro alrededor de la bola */
.hx-scene .hx-orb::before{
  content:''; position:absolute; inset:-70%; border-radius:50%; z-index:-1; opacity:var(--sw); transform:rotate(var(--spin));
  background:
    radial-gradient(circle, transparent 0 28%, rgba(69,71,75,.35) 34%, transparent 62%),
    conic-gradient(from 0deg, transparent 0 8%, rgba(69,71,75,.55) 14%, transparent 26%,
                   transparent 33%, rgba(69,71,75,.45) 40%, transparent 52%,
                   transparent 60%, rgba(69,71,75,.5) 68%, transparent 80%, transparent 88%, rgba(69,71,75,.4) 94%, transparent 100%);
  -webkit-mask:radial-gradient(circle, transparent 0 22%, #000 30% 58%, transparent 72%);
          mask:radial-gradient(circle, transparent 0 22%, #000 30% 58%, transparent 72%);
  filter:blur(1.5px);
}

/* ---------- Mundo 3D ----------
   Cada objeto (.ob) es un punto en el piso (y = 0) en el centro del objeto;
   GSAP mueve x / y / z / rotación / escala. El mundo se inclina un poco
   (rotationX) para ver los objetos ligeramente desde arriba. */
.hx-scene .hx-world{
  display:block; position:absolute; left:73%; top:66%; width:0; height:0;
  transform-style:preserve-3d; z-index:2; pointer-events:none;
}
.ob{ position:absolute; left:0; top:0; transform-style:preserve-3d; }
.ob::after{                                     /* sombra de contacto en el piso */
  content:""; position:absolute; left:-120px; top:-18px; width:240px; height:36px;
  background:radial-gradient(50% 50% at 50% 50%, rgba(15,23,42,.28), transparent 70%);
  transform:rotateX(90deg); pointer-events:none;
}

/* Impresoras: recorte real, de pie sobre el piso */
.ob-print img{ position:absolute; left:0; bottom:0; height:300px; width:auto; max-width:none; transform:translateX(-50%); }
/* Imágenes fijas de laptop y PC (collage y cierre) */
[data-ob="lapimg"] img{ height:200px; }
[data-ob="pcimg"] img{ height:185px; }

/* Laptop: piso del teclado (horizontal), borde frontal y tapa con bisagra.
   Tapa abierta = rotationX(10°); cerrada sobre el teclado = rotationX(-89°). */
.ob-lap{ --lw:220px; --ld:150px; --lh:140px; --lt:8px; }
.lap{ position:absolute; transform-style:preserve-3d; transform:translateZ(calc(var(--ld) / -2)); }
.lap-deck{
  position:absolute; width:var(--lw); height:var(--ld); left:calc(var(--lw) / -2); top:calc(var(--lt) * -1);
  transform-origin:50% 0; transform:rotateX(90deg);
  border-radius:0 0 12px 12px; background:linear-gradient(180deg,#d6dae1,#c3c8d1);
}
.lap-keys{
  position:absolute; left:9%; right:9%; top:9%; height:46%; border-radius:4px;
  background:
    repeating-linear-gradient(90deg, transparent 0 13px, #c3c8d1 13px 15px),
    repeating-linear-gradient(0deg, transparent 0 11px, #c3c8d1 11px 13px),
    #2b313c;
}
.lap-pad{ position:absolute; left:34%; right:34%; top:63%; height:26%; border-radius:5px; background:#b5bbc6; }
.lap-edge{
  position:absolute; width:var(--lw); height:var(--lt); left:calc(var(--lw) / -2); top:calc(var(--lt) * -1);
  transform:translateZ(var(--ld)); border-radius:0 0 8px 8px; background:#9aa2ae;
}
.lap-lid{
  position:absolute; width:var(--lw); height:var(--lh); left:calc(var(--lw) / -2); top:calc((var(--lt) + var(--lh)) * -1);
  transform-origin:50% 100%; transform-style:preserve-3d; transform:rotateX(10deg);
}
.lap-screen, .lap-back{ position:absolute; inset:0; border-radius:10px 10px 4px 4px; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.lap-screen{ background:#111827; padding:6px; transform:translateZ(1px); }
.lap-disp{
  height:100%; border-radius:4px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg,#ffffff 0%,#eef4ff 55%,#dbe7ff 100%);
}
.lap-disp img{ width:72%; height:auto; }
.lap-back{
  display:flex; align-items:center; justify-content:center; transform:rotateY(180deg) translateZ(1px);
  background:linear-gradient(160deg,#eceff3,#c9cfd8);
}
.lap-back img{ width:50%; height:auto; opacity:.92; transform:rotate(180deg); }   /* se lee derecho con la tapa cerrada */

/* PC: torre (caja de 5 caras), centrada en el punto del objeto */
.pc{ position:absolute; transform-style:preserve-3d; }
.pc-tower{ position:absolute; width:74px; height:170px; left:-37px; top:-170px; transform-style:preserve-3d; }
.pc-tower i{ position:absolute; display:block; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.pc-tower .f-front{
  inset:0; transform:translateZ(75px); border-radius:4px;
  background:
    radial-gradient(circle at 50% 12%, #60a5fa 0 4px, transparent 5px),
    linear-gradient(90deg, transparent 0 44%, #374151 44% 56%, transparent 56%) 0 30%/100% 50% no-repeat,
    #1f2937;
}
.pc-tower .f-back{ inset:0; transform:rotateY(180deg) translateZ(75px); background:#111827; }
.pc-tower .f-left, .pc-tower .f-right{ top:0; width:150px; height:170px; left:-38px; background:linear-gradient(180deg,#374151,#2b3240); }
.pc-tower .f-left{ transform:rotateY(-90deg) translateZ(37px); }
.pc-tower .f-right{ transform:rotateY(90deg) translateZ(37px); }
.pc-tower .f-top{ left:0; width:74px; height:150px; top:10px; transform:rotateX(90deg) translateZ(85px); background:#4b5563; }

/* ---------- Cierre ---------- */
.hx-scene .hx-final{
  display:flex; flex-direction:column; align-items:center; gap:1.25rem; z-index:5;
  position:absolute; inset:0; padding:5% 12px 5%; visibility:hidden;
}
.hx-final-space{ flex:1 1 auto; }
.hx-final-title{
  font-family:var(--f-display); font-weight:600; font-variation-settings:'wdth' 125;
  letter-spacing:-.035em; color:var(--hx-ink); font-size:clamp(2.2rem,4.4vw,3.6rem); margin:0;
}
.hx-tiles{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; width:min(100%,960px); perspective:900px; }
.hx-tiles li{ transform-origin:50% 0; }
.hx-tiles a{
  display:grid; grid-template-columns:1fr auto; gap:.2rem 1rem; align-items:center;
  padding:1.2rem 1.4rem; border:1px solid var(--hx-line); border-radius:18px; background:#fff;
  box-shadow:0 24px 48px -32px rgba(15,23,42,.35);
  color:var(--hx-ink); text-decoration:none; transition:border-color 160ms ease;
}
.hx-tiles strong{ font-weight:700; font-size:1.05rem; }
.hx-tiles span{ grid-column:1; color:var(--hx-dim); font-size:.88rem; }
.hx-tiles i{ grid-row:1 / span 2; grid-column:2; font-size:1.15rem; color:var(--hx-blue); transition:transform 200ms var(--ease-out); }
@media (hover:hover) and (pointer:fine){
  .hx-tiles a:hover{ border-color:var(--hx-blue); color:var(--hx-ink); }
  .hx-tiles a:hover i{ transform:translateX(3px); }
}

/* Laptops en 3D real (ckd-hero-gl.js): el canvas WebGL va encima del mundo
   CSS y debajo de los textos; las laptops CSS quedan como marcadores
   invisibles (su sombra de piso se conserva). */
.hx-canvas{ position:absolute; left:0; top:0; z-index:3; pointer-events:none; }
.hx-gl .ob-lap .lap{ visibility:hidden; }
.hx-gl-pc .pc-tower{ visibility:hidden; }        /* gabinete 3D (pc.glb) en su lugar */