/* ============================================================
   Ayentik — Premium visual layer
   Se monta sobre el HTML original sin modificarlo.
   Paleta: violeta #7F00FF · cian #00FFFF · tinta #1A1A1A
   ============================================================ */

:root {
  --ay-violet: #7F00FF;
  --ay-cyan: #00FFFF;
  --ay-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- 14. Transiciones entre páginas (View Transitions API) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) {
  animation: ayVtOut 200ms cubic-bezier(0.4, 0, 1, 1) both;
}
::view-transition-new(root) {
  animation: ayVtIn 420ms var(--ay-ease) 60ms both;
}
@keyframes ayVtOut { to { opacity: 0; transform: translateY(-10px); } }
@keyframes ayVtIn { from { opacity: 0; transform: translateY(14px); } }

/* ---------- 5. Barra de progreso de lectura ---------- */
.ay-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  z-index: 300; background: transparent; pointer-events: none;
}
.ay-progress span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--ay-violet), var(--ay-cyan));
  transform-origin: 0 0; transform: scaleX(0);
  box-shadow: 0 0 12px rgba(127, 0, 255, 0.45);
}

/* ---------- 15. Navbar vidrio esmerilado al hacer scroll ---------- */
#global-header {
  transition: background-color 0.35s ease, box-shadow 0.35s ease,
              backdrop-filter 0.35s ease;
}
#global-header.ay-glass {
  background-color: rgba(255, 255, 255, 0.78) !important;
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  backdrop-filter: blur(16px) saturate(170%);
  box-shadow: 0 1px 0 rgba(26, 26, 26, 0.05),
              0 16px 40px -24px rgba(127, 0, 255, 0.25);
}

/* ---------- 9. Subrayado animado en el menú ---------- */
.ay-nav {
  position: relative;
}
.ay-nav::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px;
  height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--ay-violet), var(--ay-cyan));
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.45s var(--ay-ease);
}
.ay-nav:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------- 1. Aurora reactiva al mouse en el hero ---------- */
.ay-hero-host { position: relative; }
/* Solo los hijos estáticos suben de capa; los posicionados (decorativos
   absolute, etc.) conservan su position original */
.ay-hero-host > *:not(.ay-aurora):not(.absolute):not(.fixed):not(.sticky) {
  position: relative; z-index: 1;
}
.ay-hero-host > .absolute { z-index: 1; }
.ay-aurora {
  position: absolute; inset: -12%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(42% 38% at var(--ay-mx, 32%) var(--ay-my, 30%),
      rgba(127, 0, 255, 0.16), transparent 62%),
    radial-gradient(38% 34% at calc(var(--ay-mx, 32%) + 30%) calc(var(--ay-my, 30%) + 22%),
      rgba(0, 255, 255, 0.15), transparent 60%),
    radial-gradient(30% 30% at calc(var(--ay-mx, 32%) - 16%) calc(var(--ay-my, 30%) + 34%),
      rgba(127, 0, 255, 0.10), transparent 55%);
  filter: blur(40px) saturate(130%);
}

/* ---------- 2. Reveal escalonado al hacer scroll ---------- */
[data-ayreveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.85s var(--ay-ease), transform 0.85s var(--ay-ease);
  transition-delay: var(--ayd, 0s);
  will-change: opacity, transform;
}
[data-ayreveal].ay-in { opacity: 1; transform: translateY(0); }
/* El JS elimina data-ayreveal al terminar para devolver los hovers originales */

/* ---------- 6+7. Tilt 3D + halo de luz en tarjetas ---------- */
.ay-tilt {
  transform: perspective(900px) rotateX(var(--ay-rx, 0deg))
             rotateY(var(--ay-ry, 0deg)) translateY(var(--ay-lift, 0px));
  transition: transform 0.55s var(--ay-ease);
  will-change: transform;
}
.ay-tilt.ay-tilting { transition-duration: 0.14s; }
.ay-halo:not(.absolute):not(.fixed):not(.sticky) { position: relative; }
.ay-halo::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(240px circle at var(--ay-hx, 50%) var(--ay-hy, 50%),
    rgba(127, 0, 255, 0.13), rgba(0, 255, 255, 0.05) 45%, transparent 65%);
  opacity: 0; transition: opacity 0.35s ease;
}
.ay-halo:hover::after { opacity: 1; }

/* ---------- 10. Borde de gradiente cónico rotando (tarjetas destacadas) ---------- */
.ay-conic { position: relative; isolation: isolate; }
.ay-conic::before {
  content: ""; position: absolute; inset: -2px; z-index: 1;
  border-radius: 1.15rem; pointer-events: none;
  background: conic-gradient(from 140deg,
    var(--ay-violet), var(--ay-cyan) 25%, transparent 45%,
    transparent 60%, var(--ay-violet));
  /* Deja visible solo un anillo de 2px: interior enmascarado */
  padding: 2px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0.7;
}

/* ---------- 8. Botones magnéticos ---------- */
.ay-mag { will-change: transform; }

/* ---------- 11. Pulso del botón de WhatsApp ---------- */
#whatsapp-float-btn a { position: relative; }
#whatsapp-float-btn a::before {
  content: ""; position: absolute; inset: 0; border-radius: 9999px;
  pointer-events: none;
  animation: ayPulse 2.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes ayPulse {
  0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.45); }
  70%  { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* ---------- 12. Split-text (palabras) ---------- */
.ay-w { display: inline-block; }
/* Red de seguridad: si GSAP no corre, las palabras quedan visibles */
.ay-split-ready .ay-w { opacity: 1; }

/* ---------- 13. Gradientes de texto: estaticos (el shimmer animado
   forzaba re-raster continuo con background-clip:text y congelaba paginas
   grandes; se elimino por rendimiento) ---------- */

/* ---------- 16. Formulario premium ---------- */
form input:focus, form textarea:focus, form select:focus {
  outline: none;
  border-color: var(--ay-violet) !important;
  box-shadow: 0 0 0 3px rgba(127, 0, 255, 0.14),
              0 8px 28px -12px rgba(127, 0, 255, 0.35);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
form button[type="submit"] {
  transition: transform 0.4s var(--ay-ease), box-shadow 0.4s var(--ay-ease),
              filter 0.3s ease;
}
form button[type="submit"]:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 44px -14px rgba(127, 0, 255, 0.55);
}
form button[type="submit"].ay-sending {
  background-image: linear-gradient(110deg,
    var(--ay-violet) 30%, var(--ay-cyan) 50%, var(--ay-violet) 70%) !important;
  background-size: 220% 100% !important;
  animation: aySend 1.1s linear infinite;
  pointer-events: none;
}
@keyframes aySend {
  from { background-position: 0% 50%; }
  to   { background-position: 220% 50%; }
}
.ay-confetti {
  position: fixed; pointer-events: none; z-index: 9999;
  width: 8px; height: 12px; left: 50%; top: 50%;
  animation: ayConfetti 1.3s ease-out forwards;
}
@keyframes ayConfetti {
  to {
    transform: translate(var(--ay-ctx), var(--ay-cty)) rotate(var(--ay-crot));
    opacity: 0;
  }
}

/* ---------- Render diferido (páginas muy pesadas) ---------- */
.ay-cv {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}

/* ---------- 17. Fundido lateral en carruseles ---------- */
.ay-carousel-fade {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}