/* William Jhoel · Portada V29
   Botones compactos + animaciones sutiles + interacciones.
   Todo se controla desde Admin > PORTADA Y ANIMACIONES (atributos en <html>):
   data-btn-style = compact | minimal | classic    data-anim = on | off
   data-aurora / data-glow = off (opcional)                                  */

:root{--wj-ease:cubic-bezier(.22,.7,.2,1)}

/* ───────── 1. BOTONES PRINCIPALES: compactos y elegantes ───────── */
html:not([data-btn-style="classic"]) body .services{
  width:min(1120px,100%);margin:34px auto 0;
  display:flex;flex-wrap:wrap;justify-content:center;gap:12px
}
html:not([data-btn-style="classic"]) body .services .option{
  flex:1 1 300px;max-width:356px;min-height:0;padding:12px 16px;
  grid-template-columns:42px 1fr 26px;gap:13px;border-radius:16px;
  border-color:rgba(217,173,76,.24);
  background:linear-gradient(145deg,rgba(17,22,30,.7),rgba(6,9,13,.82));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 8px 22px rgba(0,0,0,.2);
  transition:transform .45s var(--wj-ease),border-color .35s,box-shadow .45s var(--wj-ease),background .35s!important
}
html:not([data-btn-style="classic"]) body .services .option:hover{
  transform:translateY(-2px);border-color:rgba(217,173,76,.6);
  box-shadow:0 14px 32px rgba(0,0,0,.34),0 0 22px rgba(217,173,76,.1)
}
html:not([data-btn-style="classic"]) .services .option .iconbox{
  width:42px;height:42px;border-radius:12px;font-size:19px;box-shadow:none;filter:none
}
html:not([data-btn-style="classic"]) .services .option .icon-tech{width:22px;height:22px}
html:not([data-btn-style="classic"]) .services .option .icon-tech svg{width:20px;height:20px;stroke-width:1.8}
html:not([data-btn-style="classic"]) .services .option strong{
  font-size:11.5px;letter-spacing:.08em;font-weight:800;margin:0 0 3px;line-height:1.2
}
html:not([data-btn-style="classic"]) .services .option .option-copy span{
  font-size:10.5px;line-height:1.4;color:#9aa3b0;max-width:none;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}
html:not([data-btn-style="classic"]) .services .option .option-copy{min-width:0}
html:not([data-btn-style="classic"]) .services .option .arrow{
  width:26px;height:26px;font-size:16px;border-color:rgba(217,173,76,.38);
  transition:transform .35s var(--wj-ease),background .3s
}
html:not([data-btn-style="classic"]) .services .option:hover .arrow{transform:translateX(3px)}

/* brillo que sigue al cursor dentro de cada botón */
html:not([data-btn-style="classic"]) .services .option:before{
  inset:0;width:auto;height:auto;top:0;right:0;border-radius:inherit;
  background:radial-gradient(160px circle at var(--sx,50%) var(--sy,0%),rgba(217,173,76,.16),transparent 70%);
  opacity:0;transform:none;transition:opacity .4s
}
html:not([data-btn-style="classic"]) .services .option:hover:before{opacity:1;transform:none}
html:not([data-btn-style="classic"]) .services .option:after{height:1px}

/* estilo MINIMAL: solo pastillas con icono y título */
html[data-btn-style="minimal"] body .services{gap:10px;margin-top:30px}
html[data-btn-style="minimal"] body .services .option{
  flex:0 0 auto;max-width:none;padding:9px 18px 9px 10px;border-radius:999px;
  grid-template-columns:auto auto;gap:10px
}
html[data-btn-style="minimal"] .services .option .iconbox{width:32px;height:32px;border-radius:50%;font-size:15px}
html[data-btn-style="minimal"] .services .option .icon-tech{width:18px;height:18px}
html[data-btn-style="minimal"] .services .option .icon-tech svg{width:17px;height:17px}
html[data-btn-style="minimal"] .services .option .option-copy span,
html[data-btn-style="minimal"] .services .option .arrow{display:none}
html[data-btn-style="minimal"] .services .option strong{margin:0;font-size:10.5px}

/* botones de la portada (hero) un poco más finos */
.cta-row{margin-top:26px;gap:12px}
.cta{padding:14px 24px!important;font-size:11px!important;letter-spacing:.12em!important}

/* ───────── 2. ANIMACIONES SUTILES ───────── */
html:not([data-anim="off"]) .topbar{animation:wjDown .9s var(--wj-ease) both}
html:not([data-anim="off"]) .nav a{position:relative}
html:not([data-anim="off"]) .nav a:after{
  content:"";position:absolute;left:50%;bottom:6px;width:0;height:1px;
  background:linear-gradient(90deg,transparent,#ffe8a8,transparent);
  transform:translateX(-50%);transition:width .4s var(--wj-ease)
}
html:not([data-anim="off"]) .nav a:hover:after,
html:not([data-anim="off"]) .nav a.active:after{width:56%}

/* los botones principales aparecen escalonados cuando entran en pantalla */
html:not([data-anim="off"]) .services.in .option{
  animation:wjUp .75s var(--wj-ease) backwards;animation-delay:calc(var(--i,0) * 80ms)
}
html:not([data-anim="off"]) .marquee:hover div{animation-play-state:paused}
html:not([data-anim="off"]) .legal-footer{animation:wjFade 1.2s .4s both}

/* barra de progreso al hacer scroll */
#wjProgress{
  position:fixed;top:0;left:0;width:100%;height:2px;z-index:200;pointer-events:none;
  transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,#936613,#ffe8a8,#d9ad4c);box-shadow:0 0 10px rgba(217,173,76,.6)
}

/* luz suave que sigue al cursor */
#wjGlow{
  position:fixed;left:0;top:0;width:460px;height:460px;border-radius:50%;
  pointer-events:none;z-index:0;opacity:0;transition:opacity .6s;
  background:radial-gradient(circle,rgba(217,173,76,.1),transparent 65%);
  transform:translate3d(var(--gx,-600px),var(--gy,-600px),0) translate(-50%,-50%)
}
#wjGlow.on{opacity:1}
html[data-glow="off"] #wjGlow,html[data-aurora="off"] .aurora{display:none}

/* efecto magnético de los botones (propiedad independiente de transform) */
.cta{translate:var(--mx,0) var(--my,0);transition:translate .3s var(--wj-ease),transform .5s var(--wj-ease),box-shadow .4s!important}

@keyframes wjUp{from{opacity:0;transform:translateY(16px)}}
@keyframes wjDown{from{opacity:0;transform:translateY(-14px)}}
@keyframes wjFade{from{opacity:0}}

/* ───────── 3. INTRO DE PRIMERA VISITA ───────── */
#wjIntro{
  position:fixed;inset:0;z-index:999;display:none;place-items:center;text-align:center;
  background:radial-gradient(circle at 50% 40%,#0d1118,#05070a 70%);
  transition:opacity .7s var(--wj-ease),visibility .7s;cursor:pointer
}
html.wj-intro #wjIntro{display:grid}
#wjIntro.out{opacity:0;visibility:hidden}
#wjIntro img{
  width:150px;height:auto;margin:0 auto 18px;filter:drop-shadow(0 0 28px rgba(217,173,76,.45));
  animation:wjIntroLogo 1.2s var(--wj-ease) both
}
#wjIntro b{
  display:block;font-size:13px;letter-spacing:.34em;font-weight:800;color:#f3d88f;
  animation:wjIntroTxt 1s .35s var(--wj-ease) both
}
#wjIntro i{
  display:block;width:120px;height:1px;margin:18px auto 0;overflow:hidden;position:relative;
  background:rgba(217,173,76,.2)
}
#wjIntro i:after{
  content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,#ffe8a8,transparent);
  transform:translateX(-100%);animation:wjIntroBar 1.5s .2s ease-in-out forwards
}
@keyframes wjIntroLogo{from{opacity:0;transform:scale(.88) translateY(8px)}}
@keyframes wjIntroTxt{from{opacity:0;letter-spacing:.6em}}
@keyframes wjIntroBar{to{transform:translateX(100%)}}
/* la portada espera a que termine el intro para animarse */
html.wj-intro .hero .copy>*,html.wj-intro .hero .visual,html.wj-intro .topbar{animation-play-state:paused}

/* ───────── 4. MÓVIL Y ACCESIBILIDAD ───────── */
@media(max-width:760px){
  html:not([data-btn-style="classic"]) body .services .option{flex:1 1 100%;max-width:none}
  html[data-btn-style="minimal"] body .services .option{flex:0 0 auto}
  #wjGlow{display:none}
}
@media(prefers-reduced-motion:reduce){
  html .topbar,html .services .option,html .legal-footer,#wjIntro,#wjIntro *{animation:none!important}
  #wjProgress,#wjGlow{display:none}
  html.wj-intro #wjIntro{display:none}
}
html[data-anim="off"] *,html[data-anim="off"] *:before,html[data-anim="off"] *:after{
  animation:none!important;transition:none!important
}
html[data-anim="off"] .hero .copy>*,html[data-anim="off"] .reveal{opacity:1;transform:none}
html[data-anim="off"] #wjProgress,html[data-anim="off"] #wjGlow,html[data-anim="off"] #wjIntro{display:none!important}
html[data-anim="off"] #fx{display:none}