/* ════════════════════════════════════════════════════
   HOME — capa de motion + microinteracciones
   Se inyecta encima del CSS del home, NO redefine
   ════════════════════════════════════════════════════ */

:root{
  --gh-ease:cubic-bezier(.32,.72,0,1);
  --gh-ease-spring:cubic-bezier(.34,1.56,.64,1);
}

/* ───── Scroll progress bar arriba del todo ───── */
.gh-scroll-progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:9999;
  background:linear-gradient(90deg,#4e63ee,#7c8af5);
  transform:scaleX(0);transform-origin:left;
  pointer-events:none;
  box-shadow:0 0 12px rgba(78,99,238,.5);
  transition:transform .12s linear;
}

/* ───── Universal scroll-reveal ───── */
.gh-reveal{
  opacity:0;transform:translateY(28px);filter:blur(6px);
  transition:opacity .9s var(--gh-ease),transform .9s var(--gh-ease),filter .9s var(--gh-ease);
}
.gh-reveal.in{opacity:1;transform:none;filter:none}
.gh-reveal[data-d="1"]{transition-delay:.06s}
.gh-reveal[data-d="2"]{transition-delay:.14s}
.gh-reveal[data-d="3"]{transition-delay:.22s}
.gh-reveal[data-d="4"]{transition-delay:.30s}
.gh-reveal[data-d="5"]{transition-delay:.38s}
.gh-reveal[data-d="6"]{transition-delay:.46s}

/* ───── Hero — H1 word-by-word reveal ───── */
.hm-hero h1 .gh-w{
  display:inline-block;
  opacity:0;transform:translateY(24px);filter:blur(10px);
  transition:opacity 1s var(--gh-ease),transform 1s var(--gh-ease),filter 1s var(--gh-ease);
}
.hm-hero h1.gh-in .gh-w{opacity:1;transform:none;filter:none}
.hm-hero h1.gh-in .gh-w:nth-child(1){transition-delay:.05s}
.hm-hero h1.gh-in .gh-w:nth-child(2){transition-delay:.13s}
.hm-hero h1.gh-in .gh-w:nth-child(3){transition-delay:.21s}
.hm-hero h1.gh-in .gh-w:nth-child(4){transition-delay:.29s}
.hm-hero h1.gh-in .gh-w:nth-child(5){transition-delay:.37s}
.hm-hero h1.gh-in .gh-w:nth-child(6){transition-delay:.45s}
.hm-hero h1.gh-in .gh-w:nth-child(7){transition-delay:.53s}
.hm-hero h1.gh-in .gh-w:nth-child(8){transition-delay:.61s}

/* ───── Hero pill — ring expandiéndose extra ───── */
.hm-hero-pill{position:relative;overflow:visible}
.hm-hero-pill::after{
  content:'';position:absolute;left:14px;top:50%;
  width:6px;height:6px;border-radius:50%;
  background:var(--sh-accent);
  transform:translate(-50%,-50%);
  animation:gh-ringExpand 2.2s var(--gh-ease) infinite;
  pointer-events:none;
}
@keyframes gh-ringExpand{
  0%{box-shadow:0 0 0 0 rgba(78,99,238,.55)}
  70%{box-shadow:0 0 0 10px rgba(78,99,238,0)}
  100%{box-shadow:0 0 0 0 rgba(78,99,238,0)}
}

/* ───── 3D tilt en hero card (transición del transform manejada en JS) ───── */
.hm-hero-showcase{perspective:1200px}
.hm-hero-card{transition:transform .35s var(--gh-ease),box-shadow .35s var(--gh-ease)!important;transform-style:preserve-3d;will-change:transform}
.hm-hero-card:hover{box-shadow:0 40px 100px -20px rgba(78,99,238,.45),0 0 0 1px rgba(78,99,238,.25) inset!important}

/* ───── Magnetic CTAs — transición suave del transform ───── */
.hm-btn-primary,.hm-pc-cta,.hm-hero-card-cta{
  transition:transform .35s var(--gh-ease),background .15s,box-shadow .25s!important;
  will-change:transform;
}

/* ───── PC cards grid → CAROUSEL horizontal con scroll-snap nativo ───── */
.hm-pc-grid{
  display:flex!important;
  grid-template-columns:none!important;
  gap:20px;
  overflow-x:auto;
  overflow-y:visible;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scroll-padding-inline:0;
  scrollbar-width:none;
  -ms-overflow-style:none;
  padding:6px 2px 18px;
  margin-inline:-2px;
  -webkit-overflow-scrolling:touch;
}
.hm-pc-grid::-webkit-scrollbar{display:none}
.hm-pc-grid > *{
  flex:0 0 calc(25% - 15px);
  scroll-snap-align:start;
  min-width:0;
}
@media(max-width:1280px){.hm-pc-grid > *{flex:0 0 calc(33.333% - 14px)}}
@media(max-width:900px){.hm-pc-grid > *{flex:0 0 calc(50% - 10px)}}
@media(max-width:560px){.hm-pc-grid > *{flex:0 0 86%}}

.hm-pc-card{transition:border-color .25s,transform .35s var(--gh-ease),box-shadow .35s var(--gh-ease)!important;will-change:transform}
.hm-pc-card:hover{
  border-color:rgba(78,99,238,.45)!important;
  transform:translateY(-5px)!important;
  box-shadow:0 20px 50px -10px rgba(0,0,0,.5),0 0 40px -10px rgba(78,99,238,.4)!important;
}

/* ───── Carousel wrapper + nav buttons ───── */
.gh-carousel{position:relative}
.gh-carousel__nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(18,24,33,.85);
  color:#fff;border:1px solid rgba(78,99,238,.35);
  cursor:pointer;z-index:5;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:0 12px 30px -8px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.04) inset;
  transition:opacity .25s var(--gh-ease),background .2s,transform .25s var(--gh-ease);
  opacity:1;
}
.gh-carousel__nav:hover{background:rgba(78,99,238,.55);transform:translateY(-50%) scale(1.08)}
.gh-carousel__nav:active{transform:translateY(-50%) scale(.94)}
.gh-carousel__nav[disabled]{opacity:0;pointer-events:none;transform:translateY(-50%) scale(.85)}
.gh-carousel__nav svg{width:18px;height:18px;stroke-width:2.2}
.gh-carousel__nav--prev{left:-22px}
.gh-carousel__nav--next{right:-22px}
@media(max-width:900px){
  .gh-carousel__nav{width:38px;height:38px}
  .gh-carousel__nav--prev{left:-6px}
  .gh-carousel__nav--next{right:-6px}
}
@media(max-width:560px){
  /* en mobile el carrusel se maneja 100% por swipe — botones no aportan */
  .gh-carousel__nav{display:none}
}

/* progress bar del carousel — oculta a pedido del cliente, sin tocar el JS */
.gh-carousel__progress{
  display:none;
  height:2px;
  border-radius:99px;
  background:rgba(255,255,255,.05);
  margin:28px auto 4px;
  max-width:220px;
  overflow:hidden;
  position:relative;
  opacity:.85;
  transition:opacity .25s var(--gh-ease);
}
.gh-carousel:hover .gh-carousel__progress{opacity:1}
.gh-carousel__progress-fill{
  position:absolute;top:0;left:0;bottom:0;
  background:rgba(78,99,238,.7);
  border-radius:99px;
  width:25%;
  transition:width .45s cubic-bezier(.45,.35,0,1),transform .45s cubic-bezier(.45,.35,0,1);
  transform-origin:left;
}
/* oculta si todo el carousel cabe sin scroll (no hay overflow) */
.gh-carousel--no-overflow .gh-carousel__progress,
.gh-carousel--no-overflow .gh-carousel__nav{display:none}

@media(max-width:560px){
  .gh-carousel__progress{margin-top:20px;max-width:160px}
}

/* ───── Badge pulse SOLO en hero card (no en grid) ─────
   En grid serían 6 animaciones constantes corriendo → distrae + GPU.
   En hero hay 1 sola → tiene sentido narrativo. */
.hm-hero-card .hm-hero-card-pill{
  animation:gh-badgePulse 2.4s var(--gh-ease) infinite;
}
@keyframes gh-badgePulse{
  0%,100%{box-shadow:0 0 0 0 rgba(78,99,238,0)}
  50%{box-shadow:0 0 16px 0 rgba(78,99,238,.55)}
}

/* ───── Servicios — icono con motion en hover ───── */
.hm-svc-card{transition:border-color .25s,transform .35s var(--gh-ease),box-shadow .35s var(--gh-ease)!important}
.hm-svc-card:hover{transform:translateY(-4px)!important;box-shadow:0 18px 40px -10px rgba(0,0,0,.45),0 0 32px -10px rgba(78,99,238,.3)!important}
.hm-svc-ico{transition:transform .45s var(--gh-ease-spring),background .25s,border-color .25s!important}
.hm-svc-card:hover .hm-svc-ico{transform:rotate(-6deg) scale(1.08)}

/* ───── Features — ring rotating en hover sobre icon ───── */
.hm-feature{transition:border-color .25s,transform .35s var(--gh-ease)!important}
.hm-feature:hover{transform:translateY(-3px)}
.hm-feature .ic{position:relative;transition:transform .45s var(--gh-ease-spring),background .25s!important}
.hm-feature:hover .ic{transform:scale(1.08)}
.hm-feature .ic::after{
  content:'';position:absolute;inset:-4px;border-radius:12px;
  border:1px dashed rgba(78,99,238,0);
  transition:border-color .35s var(--gh-ease);
}
.hm-feature:hover .ic::after{
  border-color:rgba(78,99,238,.55);
  animation:gh-ringSpin 3s linear infinite;
}
@keyframes gh-ringSpin{to{transform:rotate(360deg)}}

/* ───── VS competencia — tabla fila por fila reveal ───── */
.hm-vs tbody tr{
  opacity:0;transform:translateX(-12px);
  transition:opacity .55s var(--gh-ease),transform .55s var(--gh-ease);
}
.hm-vs.gh-in tbody tr{opacity:1;transform:none}
.hm-vs.gh-in tbody tr:nth-child(1){transition-delay:.05s}
.hm-vs.gh-in tbody tr:nth-child(2){transition-delay:.12s}
.hm-vs.gh-in tbody tr:nth-child(3){transition-delay:.19s}
.hm-vs.gh-in tbody tr:nth-child(4){transition-delay:.26s}
.hm-vs.gh-in tbody tr:nth-child(5){transition-delay:.33s}
.hm-vs.gh-in tbody tr:nth-child(6){transition-delay:.40s}
.hm-vs.gh-in tbody tr:nth-child(7){transition-delay:.47s}
.hm-vs.gh-in tbody tr:nth-child(8){transition-delay:.54s}
.hm-vs tbody tr td.us.y::before{
  display:inline-block;opacity:0;transform:scale(.5);
  transition:opacity .35s var(--gh-ease-spring) .15s,transform .35s var(--gh-ease-spring) .15s;
}
.hm-vs.gh-in tbody tr td.us.y::before{opacity:1;transform:scale(1)}

/* ───── FAQ — transición suave en open ───── */
.hm-faq-wrap details{transition:border-color .25s var(--gh-ease)}
.hm-faq-wrap details[open]{border-color:rgba(78,99,238,.35)}
.hm-faq-wrap details summary{transition:color .2s var(--gh-ease)}
.hm-faq-wrap details summary:hover{color:#fff}
.hm-faq-wrap details .body{
  animation:gh-faqOpen .4s var(--gh-ease);
}
@keyframes gh-faqOpen{
  from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:none}
}

/* ───── KPI countup — el valor inicia "casi invisible" hasta que JS lo activa ───── */
.hm-kpi .v[data-target]:not(.gh-counted){
  color:transparent;
  background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,.1));
  -webkit-background-clip:text;background-clip:text;
}
.hm-kpi .v.gh-counted{color:var(--sh-text);background:none;-webkit-text-fill-color:initial}

/* ───── CTA Final — extra glow ───── */
.hm-cta-final .hm-btn-primary{position:relative;overflow:hidden}
.hm-cta-final .hm-btn-primary::before{
  content:'';position:absolute;top:0;bottom:0;width:80px;left:-150px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
  transform:skewX(-20deg);
  animation:gh-shine 4.5s var(--gh-ease) 2.5s infinite;
  pointer-events:none;
}
@keyframes gh-shine{
  0%{left:-150px}
  18%{left:120%}
  100%{left:120%}
}

/* ───── Cursor spotlight (desktop only) ─────
   Halo cobalto sutil que sigue el cursor. mix-blend-mode soft-light
   sobre fondos oscuros = glow ambiental sin invadir contenido. */
.gh-spotlight{
  position:fixed;top:0;left:0;width:280px;height:280px;
  margin:-140px 0 0 -140px;
  background:radial-gradient(circle,rgba(78,99,238,.18) 0%,rgba(78,99,238,.06) 35%,transparent 70%);
  border-radius:50%;
  pointer-events:none;z-index:9998;
  mix-blend-mode:soft-light;
  transform:translate3d(-9999px,-9999px,0);
  transition:transform .12s var(--gh-ease),opacity .35s var(--gh-ease);
  opacity:0;
  will-change:transform;
}
.gh-spotlight.gh-on{opacity:1}

/* ───── Mobile / touch: simplificar (no blur, no spotlight) ─────
   filter:blur en transitions trigger compositing pesado en mobile → jank.
   Mantenemos opacity + translateY para conservar el reveal pero ligero. */
@media (max-width: 768px), (hover: none){
  .gh-reveal{filter:none}
  .gh-reveal{transition:opacity .7s var(--gh-ease),transform .7s var(--gh-ease)}
  .hm-hero h1 .gh-w{filter:none;transition:opacity .8s var(--gh-ease),transform .8s var(--gh-ease)}
  .gh-spotlight{display:none}
  /* tilt 3D no aplica en touch */
  .hm-hero-card{transform:none!important}
}

/* ───── prefers-reduced-motion ───── */
@media (prefers-reduced-motion: reduce){
  .gh-scroll-progress,.gh-spotlight{display:none}
  .gh-reveal,.hm-hero h1 .gh-w,.hm-vs tbody tr{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  .hm-hero-pill::after,.hm-hero-card .hm-hero-card-pill,.hm-cta-final .hm-btn-primary::before{animation:none!important}
  .hm-feature:hover .ic::after{animation:none!important}
}