/* ============================================================
   ENTBIZZ · Tema visual compartido (fuente única de la estética)
   Lo usan todas las páginas de la app y el Libro de reportes.
   Si cambias aquí la paleta o las tipografías, cambia en todos lados.
   ============================================================ */
:root{
  --navy:#0A1B3D;            /* azul marino: fondos y paneles */
  --navy2:#0F2650;
  --navy3:#132D5E;
  --blue:#054efc;            /* azul eléctrico: acciones */
  --blue2:color-mix(in srgb,#054efc 62%,#00B2FF 38%);
  --cyan:#00B2FF;            /* cian: acentos y kickers */
  --mut:#A8B3C2;             /* texto secundario */
  --txt:#E6EBF2;             /* texto principal */
  --ok:#2ED47A;
  --warn:#FFC24B;
  --danger:#FF8F8F;
  --border:rgba(5,78,252,.35);
  --fondo:#050D21;
  --disp:'League Spartan','Nunito Sans',sans-serif;               /* títulos */
  --sans:'Avenir Next','Avenir','Nunito Sans',sans-serif;         /* texto */
  --hexclip:polygon(25% 3%,75% 3%,98% 50%,75% 97%,25% 97%,2% 50%);
}

/* ============================================================
   Encabezado de servicio (páginas servicios-*.html)
   Sustituye al badge «Servicio · X» del hero. Un solo lugar: si
   cambia el estilo, cambia en las 5 páginas.
   Uso:
   <div class="svc-head reveal">
     <span class="svc-ico"><svg>…</svg></span>
     <span class="svc-txt">
       <span class="svc-kicker">Servicio 01 <em>/ 05</em></span>
       <span class="svc-name">Nombre del servicio</span>
     </span>
   </div>
   ============================================================ */
.svc-head{display:inline-flex;align-items:center;gap:16px;margin-bottom:28px;padding:10px 22px 10px 10px;
  border:1px solid rgba(0,178,255,.22);border-radius:16px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--navy2) 78%,transparent),color-mix(in srgb,var(--navy2) 30%,transparent));
  backdrop-filter:blur(8px);position:relative;max-width:100%}
.svc-head::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:3px;
  background:linear-gradient(180deg,var(--cyan),var(--blue))}
.svc-head .svc-ico{width:48px;height:48px;flex:0 0 48px;display:grid;place-items:center;clip-path:var(--hexclip);
  background:linear-gradient(135deg,var(--blue),var(--cyan));box-shadow:0 8px 24px rgba(0,178,255,.25)}
.svc-head .svc-ico svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.svc-head .svc-txt{display:flex;flex-direction:column;gap:4px;min-width:0}
.svc-head .svc-kicker{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:2.6px;text-transform:uppercase;color:var(--cyan);line-height:1}
.svc-head .svc-kicker em{font-style:normal;color:var(--mut);font-weight:600;margin-left:2px}
.svc-head .svc-name{font-family:var(--disp);font-size:clamp(17px,1.9vw,21px);font-weight:600;letter-spacing:.2px;line-height:1.15;color:var(--txt)}
@media (max-width:560px){
  .svc-head{gap:12px;padding:9px 16px 9px 9px;border-radius:14px}
  .svc-head .svc-ico{width:42px;height:42px;flex-basis:42px}
  .svc-head .svc-ico svg{width:21px;height:21px}
}

/* ============================================================
   Botones de panal (v3) · estilo único para todo el sitio
   Primario (.btn.p): degradado azul, textura de panal en movimiento,
   halo cian latiendo, destello diagonal y flecha que avanza al pasar.
   Secundario (.btn.s): oscuro con la misma textura y borde que se
   enciende al pasar. También .btn-mini de las tarjetas.
   Las reglas usan selector con elemento (a.btn / button.btn) para
   ganar a los estilos .btn.p de cada página. Respeta reduced-motion.
   ============================================================ */
:root{--panal-btn:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='24.25' viewBox='0 0 42 24.25'%3E%3Cg fill='none' stroke='%2300B2FF' stroke-opacity='.55' stroke-width='1'%3E%3Cpath d='M-7.0 -12.1 L-14.0 -0.0 L-28.0 -0.0 L-35.0 -12.1 L-28.0 -24.2 L-14.0 -24.2 Z'/%3E%3Cpath d='M-7.0 12.1 L-14.0 24.2 L-28.0 24.2 L-35.0 12.1 L-28.0 0.0 L-14.0 0.0 Z'/%3E%3Cpath d='M-7.0 36.4 L-14.0 48.5 L-28.0 48.5 L-35.0 36.4 L-28.0 24.3 L-14.0 24.3 Z'/%3E%3Cpath d='M-7.0 60.6 L-14.0 72.7 L-28.0 72.7 L-35.0 60.6 L-28.0 48.5 L-14.0 48.5 Z'/%3E%3Cpath d='M14.0 -24.2 L7.0 -12.1 L-7.0 -12.1 L-14.0 -24.2 L-7.0 -36.4 L7.0 -36.4 Z'/%3E%3Cpath d='M14.0 0.0 L7.0 12.1 L-7.0 12.1 L-14.0 0.0 L-7.0 -12.1 L7.0 -12.1 Z'/%3E%3Cpath d='M14.0 24.2 L7.0 36.4 L-7.0 36.4 L-14.0 24.2 L-7.0 12.1 L7.0 12.1 Z'/%3E%3Cpath d='M14.0 48.5 L7.0 60.6 L-7.0 60.6 L-14.0 48.5 L-7.0 36.4 L7.0 36.4 Z'/%3E%3Cpath d='M35.0 -12.1 L28.0 -0.0 L14.0 -0.0 L7.0 -12.1 L14.0 -24.2 L28.0 -24.2 Z'/%3E%3Cpath d='M35.0 12.1 L28.0 24.2 L14.0 24.2 L7.0 12.1 L14.0 0.0 L28.0 0.0 Z'/%3E%3Cpath d='M35.0 36.4 L28.0 48.5 L14.0 48.5 L7.0 36.4 L14.0 24.3 L28.0 24.3 Z'/%3E%3Cpath d='M35.0 60.6 L28.0 72.7 L14.0 72.7 L7.0 60.6 L14.0 48.5 L28.0 48.5 Z'/%3E%3Cpath d='M56.0 -24.2 L49.0 -12.1 L35.0 -12.1 L28.0 -24.2 L35.0 -36.4 L49.0 -36.4 Z'/%3E%3Cpath d='M56.0 0.0 L49.0 12.1 L35.0 12.1 L28.0 0.0 L35.0 -12.1 L49.0 -12.1 Z'/%3E%3Cpath d='M56.0 24.2 L49.0 36.4 L35.0 36.4 L28.0 24.2 L35.0 12.1 L49.0 12.1 Z'/%3E%3Cpath d='M56.0 48.5 L49.0 60.6 L35.0 60.6 L28.0 48.5 L35.0 36.4 L49.0 36.4 Z'/%3E%3C/g%3E%3C/svg%3E")}
a.btn.p,button.btn.p,span.btn.p{position:relative;isolation:isolate;overflow:hidden;color:#fff;
  background:linear-gradient(135deg,#0A2A8C,var(--blue) 55%,#0A78E8);border:1px solid rgba(0,178,255,.65);
  box-shadow:0 0 0 0 rgba(0,178,255,.55),0 18px 46px -16px rgba(5,78,252,.85);
  animation:btn-latido 2.8s ease-in-out infinite;transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s}
a.btn.p::before,button.btn.p::before,span.btn.p::before{content:"";position:absolute;inset:-40px;z-index:-1;left:-40px;width:auto;height:auto;transform:none;
  background:var(--panal-btn) 0 0/42px 24.25px repeat;opacity:.5;
  -webkit-mask-image:radial-gradient(60% 120% at 50% 50%,#000 30%,transparent 100%);mask-image:radial-gradient(60% 120% at 50% 50%,#000 30%,transparent 100%);
  animation:btn-panal 9s linear infinite}
a.btn.p::after,button.btn.p::after,span.btn.p::after{content:"";position:absolute;top:0;left:-130%;width:60%;height:100%;transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);animation:btn-destello 3.2s ease-in-out infinite;transition:none}
a.btn.p:hover,button.btn.p:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 0 0 6px rgba(0,178,255,.18),0 26px 60px -18px rgba(0,178,255,.9)}
a.btn.p:hover::after,button.btn.p:hover::after{left:160%}
a.btn.p .ar,button.btn.p .ar{display:inline-block;transition:transform .3s}
a.btn.p:hover .ar,button.btn.p:hover .ar{transform:translateX(5px)}

a.btn.s,button.btn.s{position:relative;isolation:isolate;overflow:hidden;border:1px solid rgba(0,178,255,.35);
  background:linear-gradient(135deg,color-mix(in srgb,var(--navy2) 92%,black 8%),color-mix(in srgb,var(--navy2) 80%,var(--blue) 20%));
  transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s,border-color .3s}
a.btn.s::before,button.btn.s::before{content:"";position:absolute;inset:-40px;z-index:-1;left:-40px;width:auto;height:auto;transform:none;
  background:var(--panal-btn) 0 0/42px 24.25px repeat;opacity:.28;
  -webkit-mask-image:radial-gradient(60% 120% at 50% 50%,#000 30%,transparent 100%);mask-image:radial-gradient(60% 120% at 50% 50%,#000 30%,transparent 100%);
  animation:btn-panal 12s linear infinite}
a.btn.s:hover,button.btn.s:hover{transform:translateY(-3px);border-color:var(--cyan);box-shadow:0 0 0 4px rgba(0,178,255,.14),0 18px 46px -18px rgba(0,178,255,.8)}
a.btn.s:hover::before,button.btn.s:hover::before{opacity:.55}

span.btn-mini,a.btn-mini{position:relative;isolation:isolate;overflow:hidden;border-color:rgba(0,178,255,.35)}
span.btn-mini::before,a.btn-mini::before{content:"";position:absolute;inset:-30px;z-index:-1;background:var(--panal-btn) 0 0/42px 24.25px repeat;opacity:.3;
  -webkit-mask-image:radial-gradient(60% 120% at 50% 50%,#000 30%,transparent 100%);mask-image:radial-gradient(60% 120% at 50% 50%,#000 30%,transparent 100%);animation:btn-panal 12s linear infinite}

/* los botones pequeños de la aplicación interna no laten (solo textura) */
a.btn.p.mini,button.btn.p.mini,a.btn.p.chico,button.btn.p.chico{animation:none}

/* RENDIMIENTO (v4): dentro de listas y tarjetas (paneles internos con cientos
   de botones) y en las tablas, los botones NO llevan animaciones infinitas:
   conservan textura y color, y el destello aparece solo al pasar el mouse.
   Tres animaciones por botón x 400 tarjetas era lo que alentaba el panel. */
#lista a.btn,#lista button.btn,.lista a.btn,.lista button.btn,table a.btn,table button.btn,.c-btns a.btn,.c-btns button.btn,
#lista a.btn::before,#lista button.btn::before,.lista a.btn::before,.lista button.btn::before,table a.btn::before,table button.btn::before,
#lista a.btn::after,#lista button.btn::after,.lista a.btn::after,.lista button.btn::after,table a.btn::after,table button.btn::after,
#lista .btn-mini::before,.lista .btn-mini::before{animation:none}
#lista a.btn.p,#lista button.btn.p,.lista a.btn.p,.lista button.btn.p{box-shadow:0 10px 26px -14px rgba(5,78,252,.7)}
#lista a.btn.p:hover::after,#lista button.btn.p:hover::after,.lista a.btn.p:hover::after,.lista button.btn.p:hover::after{transition:left .6s ease}
/* tarjetas de los paneles internos fuera de pantalla: el navegador no las pinta ni las anima */
#lista>.card,.lista>.card,.lista>article{content-visibility:auto;contain-intrinsic-size:auto 280px}

/* en el hero claro de las páginas de servicio, el secundario se mantiene claro */
.hs a.btn.s{background:rgba(255,255,255,.7);border-color:rgba(10,27,61,.16);color:var(--navy)}
.hs a.btn.s::before{opacity:.35}

@keyframes btn-latido{0%,100%{box-shadow:0 0 0 0 rgba(0,178,255,.55),0 18px 46px -16px rgba(5,78,252,.85)}50%{box-shadow:0 0 0 12px rgba(0,178,255,0),0 22px 56px -14px rgba(0,178,255,.95)}}
@keyframes btn-panal{to{background-position:42px 48.50px}}
@keyframes btn-destello{0%,55%{left:-130%}100%{left:160%}}
@media(prefers-reduced-motion:reduce){a.btn.p,button.btn.p,span.btn.p,a.btn.p::before,a.btn.p::after,button.btn.p::before,button.btn.p::after,a.btn.s::before,button.btn.s::before,span.btn-mini::before,a.btn-mini::before{animation:none}}