/* ============================================================
   Hero de servicio «claro» (páginas servicios-*.html) · v1
   Composición: titular display con palabra fantasma, objeto 3D al
   centro sobre anillos, tarjetas de vidrio flotando, botón de play,
   paginador 01 —— 05 y frase de cierre. Paleta de tema.css.
   Animación: aparición escalonada, flotación, parallax con el cursor,
   contadores y trazo de la gráfica (hero-servicio.js). Respeta
   prefers-reduced-motion.
   ============================================================ */
.hs{position:relative;z-index:1;overflow:hidden;color:var(--navy);
  background:
    radial-gradient(900px 520px at 68% 42%, rgba(0,178,255,.20), transparent 60%),
    radial-gradient(700px 480px at 30% 90%, rgba(5,78,252,.14), transparent 60%),
    linear-gradient(180deg,#F4F7FC 0%,#E6EBF2 100%);
  padding:clamp(40px,5vw,64px) 0 clamp(36px,4vw,56px);
  border-bottom:1px solid rgba(10,27,61,.08)}
.hs .wrap{position:relative;z-index:2}

/* --- textura de panal (misma retícula hexagonal de lado plano que --hexclip y el hero 3D):
   trazo azul eléctrico con nodos cian en los vértices; más presente en la franja superior
   y suave en el resto, sin tapar el contenido --- */
.hs{--hs-panal:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='51.96' viewBox='0 0 90 51.96'%3E%3Cg fill='none' stroke='%23054efc' stroke-width='1'%3E%3Cpath d='M-15.0 -26.0 L-30.0 0.0 L-60.0 0.0 L-75.0 -26.0 L-60.0 -52.0 L-30.0 -52.0 Z'/%3E%3Cpath d='M-15.0 26.0 L-30.0 52.0 L-60.0 52.0 L-75.0 26.0 L-60.0 -0.0 L-30.0 -0.0 Z'/%3E%3Cpath d='M-15.0 77.9 L-30.0 103.9 L-60.0 103.9 L-75.0 77.9 L-60.0 52.0 L-30.0 52.0 Z'/%3E%3Cpath d='M-15.0 129.9 L-30.0 155.9 L-60.0 155.9 L-75.0 129.9 L-60.0 103.9 L-30.0 103.9 Z'/%3E%3Cpath d='M30.0 -52.0 L15.0 -26.0 L-15.0 -26.0 L-30.0 -52.0 L-15.0 -77.9 L15.0 -77.9 Z'/%3E%3Cpath d='M30.0 0.0 L15.0 26.0 L-15.0 26.0 L-30.0 0.0 L-15.0 -26.0 L15.0 -26.0 Z'/%3E%3Cpath d='M30.0 52.0 L15.0 77.9 L-15.0 77.9 L-30.0 52.0 L-15.0 26.0 L15.0 26.0 Z'/%3E%3Cpath d='M30.0 103.9 L15.0 129.9 L-15.0 129.9 L-30.0 103.9 L-15.0 77.9 L15.0 77.9 Z'/%3E%3Cpath d='M75.0 -26.0 L60.0 0.0 L30.0 0.0 L15.0 -26.0 L30.0 -52.0 L60.0 -52.0 Z'/%3E%3Cpath d='M75.0 26.0 L60.0 52.0 L30.0 52.0 L15.0 26.0 L30.0 -0.0 L60.0 -0.0 Z'/%3E%3Cpath d='M75.0 77.9 L60.0 103.9 L30.0 103.9 L15.0 77.9 L30.0 52.0 L60.0 52.0 Z'/%3E%3Cpath d='M75.0 129.9 L60.0 155.9 L30.0 155.9 L15.0 129.9 L30.0 103.9 L60.0 103.9 Z'/%3E%3Cpath d='M120.0 -52.0 L105.0 -26.0 L75.0 -26.0 L60.0 -52.0 L75.0 -77.9 L105.0 -77.9 Z'/%3E%3Cpath d='M120.0 0.0 L105.0 26.0 L75.0 26.0 L60.0 0.0 L75.0 -26.0 L105.0 -26.0 Z'/%3E%3Cpath d='M120.0 52.0 L105.0 77.9 L75.0 77.9 L60.0 52.0 L75.0 26.0 L105.0 26.0 Z'/%3E%3Cpath d='M120.0 103.9 L105.0 129.9 L75.0 129.9 L60.0 103.9 L75.0 77.9 L105.0 77.9 Z'/%3E%3C/g%3E%3Cg fill='%2300B2FF'%3E%3Ccircle cx='15.0' cy='26.0' r='1.6'/%3E%3Ccircle cx='30.0' cy='0.0' r='1.6'/%3E%3Ccircle cx='30.0' cy='52.0' r='1.6'/%3E%3Ccircle cx='60.0' cy='0.0' r='1.6'/%3E%3Ccircle cx='60.0' cy='52.0' r='1.6'/%3E%3Ccircle cx='75.0' cy='26.0' r='1.6'/%3E%3C/g%3E%3C/svg%3E")}
.hs::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:var(--hs-panal) center top/90px 51.96px repeat;
  opacity:.28;-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,1) 0,rgba(0,0,0,.95) 150px,rgba(0,0,0,.34) 290px,rgba(0,0,0,.30) 100%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,1) 0,rgba(0,0,0,.95) 150px,rgba(0,0,0,.34) 290px,rgba(0,0,0,.30) 100%)}
.hs::after{content:"";position:absolute;left:0;right:0;top:0;height:300px;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,178,255,.10),rgba(0,178,255,0))}
.hs-grid{display:grid;grid-template-columns:minmax(300px,.92fr) minmax(360px,1.08fr);gap:clamp(24px,4vw,56px);align-items:center}

/* --- encabezado de servicio en variante clara --- */
.hs .svc-head{background:linear-gradient(90deg,rgba(255,255,255,.85),rgba(255,255,255,.35));border-color:rgba(10,27,61,.12);
  backdrop-filter:blur(10px);box-shadow:0 10px 30px -18px rgba(10,27,61,.35)}
.hs .svc-head .svc-kicker{color:var(--blue)}
.hs .svc-head .svc-kicker em{color:#6B7A90}
.hs .svc-head .svc-name{color:var(--navy)}

/* --- titular --- */
.hs-h1{font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:-.5px;line-height:.92;margin:0 0 22px;
  font-size:clamp(40px,5.2vw,84px);display:flex;flex-direction:column;color:var(--navy)}
.hs-h1 span{display:block;white-space:nowrap}
.hs-h1 .ghost{color:transparent;-webkit-text-stroke:1.5px rgba(10,27,61,.22);
  background:linear-gradient(90deg,rgba(10,27,61,.16),rgba(0,178,255,.30) 60%,rgba(5,78,252,.22));-webkit-background-clip:text;background-clip:text;
  text-shadow:0 12px 40px rgba(0,178,255,.18)}
.hs-sub{font-size:clamp(15px,1.15vw,17.5px);line-height:1.62;color:#3D4C66;max-width:44ch;margin:0 0 24px}
.hs-btns{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.hs .btn.s{background:rgba(255,255,255,.7);border:1px solid rgba(10,27,61,.16);color:var(--navy);backdrop-filter:blur(6px)}
.hs .btn.s:hover{border-color:var(--blue);color:var(--blue)}
.hs .btn.p{box-shadow:0 14px 34px -14px rgba(5,78,252,.7)}

/* --- escena: anillos + objeto + tarjetas --- */
.hs-scene{position:relative;min-height:clamp(380px,46vw,620px);isolation:isolate}
.hs-rings{position:absolute;inset:0;margin:auto;width:min(100%,640px);aspect-ratio:1;z-index:0;opacity:.85;pointer-events:none}
.hs-rings svg{width:100%;height:100%;display:block;animation:hs-spin 90s linear infinite;transform-origin:50% 50%}
.hs-rings circle{fill:none;stroke:rgba(10,27,61,.10);stroke-width:1}
.hs-rings .tick{stroke:rgba(5,78,252,.28);stroke-width:1.2}
.hs-rings .arc{stroke:rgba(0,178,255,.55);stroke-width:2;stroke-linecap:round}
.hs-obj{position:absolute;inset:0;margin:auto;width:min(78%,520px);aspect-ratio:1;z-index:1;display:grid;place-items:center;
  will-change:transform;transform:translate3d(var(--px,0px),var(--py,0px),0)}
.hs-obj img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 40px 60px rgba(10,27,61,.28)) drop-shadow(0 0 40px rgba(0,178,255,.25));
  animation:hs-float 7s ease-in-out infinite}
/* objeto provisional mientras no existe el render (hexágono de cristal) */
.hs-blob{width:72%;aspect-ratio:1;clip-path:var(--hexclip);position:relative;animation:hs-float 7s ease-in-out infinite;
  background:linear-gradient(145deg,rgba(255,255,255,.95),rgba(214,226,246,.75) 45%,rgba(0,178,255,.35));
  box-shadow:inset 0 -30px 60px rgba(5,78,252,.18),inset 0 20px 40px rgba(255,255,255,.9)}
.hs-blob::before{content:"";position:absolute;inset:14%;clip-path:var(--hexclip);background:linear-gradient(160deg,rgba(5,78,252,.35),rgba(0,178,255,.65));
  filter:blur(2px);opacity:.9}
.hs-blob::after{content:"";position:absolute;inset:34%;clip-path:var(--hexclip);background:radial-gradient(circle at 40% 35%,#fff,rgba(255,255,255,.2) 70%);
  animation:hs-pulse 3.2s ease-in-out infinite}
.hs-obj-sombra{position:absolute;left:50%;bottom:6%;width:52%;height:14%;transform:translateX(-50%);border-radius:50%;z-index:0;
  background:radial-gradient(closest-side,rgba(10,27,61,.30),transparent);filter:blur(8px);animation:hs-shadow 7s ease-in-out infinite}

.hs-card{position:absolute;z-index:3;background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.85);border-radius:18px;
  box-shadow:0 20px 50px -22px rgba(10,27,61,.45),inset 0 1px 0 rgba(255,255,255,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  padding:14px 16px;color:var(--navy);font-family:var(--sans);will-change:transform;
  transform:translate3d(calc(var(--px,0px) * var(--k,1)),calc(var(--py,0px) * var(--k,1)),0)}
.hs-card b{font-family:var(--disp);font-weight:800;letter-spacing:-.3px}
.hs-card small{display:block;color:#5B6B84;font-size:12px;line-height:1.35;margin-top:2px}
.hs-c1{top:6%;right:2%;display:flex;align-items:center;gap:12px;--k:1.6;animation:hs-float 6s ease-in-out infinite;animation-delay:-1s}
.hs-c1 .pila{display:flex}
.hs-c1 .pila i{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--blue),var(--cyan));
  border:2px solid #fff;margin-left:-8px;box-shadow:0 4px 10px rgba(5,78,252,.35)}
.hs-c1 .pila i:first-child{margin-left:0}
.hs-c1 .pila svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hs-c1 b{font-size:18px}
.hs-c2{right:0;top:38%;width:min(46%,220px);--k:1.2;animation:hs-float 8s ease-in-out infinite;animation-delay:-3s}
.hs-c2 .num{font-family:var(--disp);font-weight:800;font-size:clamp(28px,3vw,40px);letter-spacing:-1px;line-height:1;color:var(--navy)}
.hs-c2 .num em{font-style:normal;font-size:.55em;color:var(--blue);margin-left:2px}
.hs-c2 .barras{display:flex;gap:3px;align-items:flex-end;height:22px;margin-bottom:8px}
.hs-c2 .barras i{flex:1;background:linear-gradient(180deg,var(--cyan),var(--blue));border-radius:2px;opacity:.75;transform-origin:bottom;animation:hs-bar 2.4s ease-in-out infinite}
.hs-c2 .mini{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid rgba(10,27,61,.10)}
.hs-c2 .mini b{font-size:16px;display:block}
.hs-c3{left:0;bottom:10%;width:min(44%,210px);--k:1.4;animation:hs-float 7.5s ease-in-out infinite;animation-delay:-5s}
.hs-c3 .cab{display:flex;align-items:center;gap:10px}
.hs-c3 .cab i{width:34px;height:34px;clip-path:var(--hexclip);display:grid;place-items:center;background:linear-gradient(135deg,var(--blue),var(--cyan));flex:0 0 34px}
.hs-c3 .cab svg{width:17px;height:17px;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.hs-c3 .cab b{font-size:14px;display:block}
.hs-c3 .cab small{margin:0}
.hs-c3 .linea{display:block;width:100%;height:44px;margin-top:10px}
.hs-c3 .linea path{fill:none;stroke:var(--blue);stroke-width:2;stroke-linecap:round;stroke-dasharray:400;stroke-dashoffset:400;animation:hs-draw 2.2s .8s ease forwards}
.hs-c3 .linea .area{fill:url(#hsGradArea);stroke:none;opacity:0;animation:hs-fade 1s 2.4s ease forwards}

/* --- pie del hero: paginador y frase --- */
.hs-pie{display:flex;justify-content:space-between;align-items:flex-end;margin-top:clamp(18px,3vw,36px);gap:20px}
.hs-pag{display:flex;align-items:center;gap:12px;font-family:var(--sans);font-size:12px;letter-spacing:2px;color:#6B7A90}
.hs-pag i{width:44px;height:1px;background:rgba(10,27,61,.35);position:relative}
.hs-pag i::after{content:"";position:absolute;left:0;top:-1px;height:3px;width:var(--w,20%);background:var(--blue);border-radius:2px}
.hs-pag b{font-family:var(--disp);font-size:18px;color:var(--navy);letter-spacing:0}
.hs-lema{display:flex;align-items:center;gap:12px;text-align:right;font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(13px,1.15vw,16px);line-height:1.05;color:var(--navy);letter-spacing:.3px}
.hs-lema i{width:46px;height:46px;clip-path:var(--hexclip);background:linear-gradient(135deg,var(--blue),var(--cyan));display:grid;place-items:center;flex:0 0 46px}
.hs-lema svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* --- aparición --- */
.hs .hs-in{opacity:0;transform:translateY(18px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0ms)}
.hs.listo .hs-in{opacity:1;transform:none}
/* tarjetas y objeto: la aparición solo anima opacidad; su transform lo lleva el parallax (--px/--py) */
.hs .hs-card.hs-in,.hs .hs-obj.hs-in,.hs.listo .hs-card.hs-in,.hs.listo .hs-obj.hs-in{transition-property:opacity;
  transform:translate3d(calc(var(--px,0px) * var(--k,1)),calc(var(--py,0px) * var(--k,1)),0)}

@keyframes hs-float{0%,100%{translate:0 0}50%{translate:0 -12px}}
@keyframes hs-shadow{0%,100%{transform:translateX(-50%) scale(1);opacity:.9}50%{transform:translateX(-50%) scale(.86);opacity:.6}}
@keyframes hs-spin{to{transform:rotate(360deg)}}
@keyframes hs-pulse{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
@keyframes hs-ring{0%{transform:scale(.9);opacity:.9}100%{transform:scale(1.5);opacity:0}}
@keyframes hs-draw{to{stroke-dashoffset:0}}
@keyframes hs-fade{to{opacity:1}}
@keyframes hs-bar{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1)}}
.hs-c2 .barras i:nth-child(2){animation-delay:.2s}.hs-c2 .barras i:nth-child(3){animation-delay:.4s}.hs-c2 .barras i:nth-child(4){animation-delay:.6s}
.hs-c2 .barras i:nth-child(5){animation-delay:.8s}.hs-c2 .barras i:nth-child(6){animation-delay:1s}.hs-c2 .barras i:nth-child(7){animation-delay:1.2s}
.hs-c2 .barras i:nth-child(8){animation-delay:1.4s}.hs-c2 .barras i:nth-child(9){animation-delay:1.6s}.hs-c2 .barras i:nth-child(10){animation-delay:1.8s}

@media (max-width:980px){
  .hs-grid{grid-template-columns:1fr;gap:28px}
  .hs-scene{min-height:min(88vw,520px)}
  .hs-h1{font-size:clamp(38px,9.5vw,64px)}
}
@media (max-width:560px){
  .hs-scene{min-height:min(104vw,560px)}
  .hs-obj{width:60%;top:-6%}
  .hs-card{padding:10px 12px;border-radius:14px}
  .hs-card small{font-size:11px}
  .hs-c1{top:0;right:0;gap:8px}
  .hs-c1 .pila i{width:24px;height:24px;margin-left:-6px}
  .hs-c1 .pila svg{width:11px;height:11px}
  .hs-c1 b{font-size:13px}
  .hs-c2{width:46%;top:auto;bottom:4%;right:0}
  .hs-c2 .num{font-size:26px}
  .hs-c2 .barras{height:16px}
  .hs-c2 .mini{margin-top:8px;padding-top:8px}
  .hs-c2 .mini b{font-size:14px}
  .hs-c3{width:46%;bottom:4%;left:0}
  .hs-c3 .cab i{width:28px;height:28px;flex-basis:28px}
  .hs-c3 .cab b{font-size:13px}
  .hs-c3 .linea{height:34px;margin-top:6px}
  .hs-pie{flex-direction:column;align-items:flex-start;gap:14px}
  .hs-lema{text-align:left}
}
@media (prefers-reduced-motion:reduce){
  .hs *{animation:none!important;transition:none!important}
  .hs .hs-in{opacity:1;transform:none}
  .hs-c3 .linea path{stroke-dashoffset:0}.hs-c3 .linea .area{opacity:1}
}

/* ============================================================
   Panel de servicios del index (.hsp) · v2
   Al abrir una tarjeta de #servicios se despliega, a pantalla completa,
   el hero animado del servicio; flechas y teclado (← → Esc) para
   recorrer los cinco. servicios-panel.js lo controla.
   ============================================================ */
.hsp{position:fixed;inset:0;z-index:1200;overflow:auto;-webkit-overflow-scrolling:touch;background:#F4F7FC;
  opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .38s ease,transform .38s ease,visibility 0s .38s}
.hsp.abierta{opacity:1;visibility:visible;transform:none;transition:opacity .38s ease,transform .38s ease,visibility 0s}
.hsp .hs{min-height:100%;display:flex;flex-direction:column;justify-content:center;border-bottom:0;
  padding-top:clamp(64px,7vw,88px);padding-bottom:clamp(64px,7vw,88px)}
.hsp .hs[hidden]{display:none}
body.hsp-abierta{overflow:hidden}

/* --- controles flotantes --- */
.hsp-btn{position:fixed;z-index:5;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.72);border:1px solid rgba(10,27,61,.14);color:var(--navy);backdrop-filter:blur(10px);
  box-shadow:0 14px 34px -18px rgba(10,27,61,.45);transition:transform .2s ease,border-color .2s ease,color .2s ease,background .2s ease}
.hsp-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hsp-btn:hover{border-color:var(--blue);color:var(--blue);transform:scale(1.06)}
.hsp-btn:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.hsp-x{top:18px;right:18px}
.hsp-prev{left:18px;top:calc(50% - 26px)}
.hsp-next{right:18px;top:calc(50% - 26px)}
.hsp-marca{position:fixed;z-index:5;top:26px;left:22px;display:flex;align-items:center;gap:10px;font-family:var(--sans);font-size:12px;
  letter-spacing:2px;text-transform:uppercase;color:#6B7A90}
.hsp-marca b{font-family:var(--disp);font-weight:800;font-size:16px;letter-spacing:0;color:var(--navy)}
.hsp-marca i{width:34px;height:1px;background:rgba(10,27,61,.3)}
.hsp-pista{position:fixed;z-index:5;bottom:16px;left:50%;transform:translateX(-50%);font-family:var(--sans);font-size:11px;letter-spacing:1.5px;
  text-transform:uppercase;color:#8B98AB;white-space:nowrap}
.hsp-pista kbd{font:inherit;padding:2px 6px;border:1px solid rgba(10,27,61,.18);border-radius:6px;background:rgba(255,255,255,.7)}

/* --- paginador del hero: clicable dentro del panel --- */
.hsp .hs-pag{cursor:default}
.hsp .hs-pag i{width:110px;cursor:pointer}
.hsp .hs-pag i::after{transition:width .5s cubic-bezier(.2,.7,.2,1)}

@media (max-width:980px){
  .hsp-prev{left:auto;right:82px;top:auto;bottom:18px}
  .hsp-next{top:auto;bottom:18px}
  .hsp-pista{display:none}
  .hsp .hs{justify-content:flex-start;padding-top:80px;padding-bottom:96px}
}
@media (max-width:560px){
  .hsp-btn{width:46px;height:46px}
  .hsp-x{top:12px;right:12px}
  .hsp-marca{top:14px;left:12px;padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.72);border:1px solid rgba(10,27,61,.14);backdrop-filter:blur(10px)}
  .hsp-marca i{display:none}
  .hsp-prev{right:70px;bottom:14px}.hsp-next{bottom:14px;right:12px}
}
@media (prefers-reduced-motion:reduce){.hsp{transition:none;transform:none}}