/* === HIKI ENHANCEMENTS · centrado + animaciones avanzadas de agentes === */

/* ====== FIXES DE CENTRADO ====== */

/* Container universal · siempre centrado */
.container, .container-narrow {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Hero CTA · alineación consistente */
.hero-cta { flex-wrap: wrap; align-items: center; gap: 12px; }

/* Sección oscura CTA final · centrado real */
.cta-final h2, .cta-final .lead { margin-left: auto !important; margin-right: auto !important; text-align: center; }
.cta-final .section-eyebrow { justify-content: center; }
.cta-final form { margin-left: auto !important; margin-right: auto !important; }

/* Stats grid · centrado interno consistente */
.stats-grid .stat-card { text-align: left; }
.caso-metrics { align-items: stretch; }
.caso-metric { display: flex; flex-direction: column; justify-content: center; }

/* Partners · grid centrado */
.partners-grid { justify-items: center; }
.partner-item { text-align: center; align-items: center !important; }

/* Comparison table · alinear centrado verticalmente */
.compare-row { align-items: center; }

/* Stack grid · header alineado */
.stack-col-head { align-items: center !important; }
.stack-item { align-items: center !important; }

/* Reto cards · centrado interno */
.reto-card { align-items: center; }
.reto-card-num { display: flex; align-items: center; justify-content: center; height: 100%; }

/* Pilares · centrado de iconos */
.pilar-icon-circle, .pilar-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; }

/* Quote block · realmente centrado */
.quote-block { margin-left: auto !important; margin-right: auto !important; }

/* Form labels · espaciado consistente */
form { margin-left: auto !important; margin-right: auto !important; }
form input, form textarea, form select { display: block; }


/* ====== ANIMACIONES AVANZADAS · AGENTES ====== */

/* 1. Status dots verdes · pulse continuo (los agentes están "vivos") */
.mockup-dot.green, .flow-dot, .agent-status,
.mockup-item.active .mockup-dot,
.demo-title::before {
  position: relative;
  animation: agentLive 2.4s ease-in-out infinite !important;
}
@keyframes agentLive {
  0%, 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.6); }
  50% { box-shadow: 0 0 0 6px rgba(22, 163, 74, 0); }
}

/* 2. Progress bars · llenado al entrar viewport · animación contínua suave después */
.mockup-bar-progress span, .agent-progress span {
  background: linear-gradient(90deg, var(--purple), var(--lavender)) !important;
  background-size: 200% 100%;
  animation: progressShimmer 3s ease-in-out infinite !important;
}
@keyframes progressShimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* 3. Avatar agente · glow sutil */
.mock-agent-avatar, .agent-avatar, .quote-avatar, .demo-foot-avatar {
  position: relative;
  animation: avatarGlow 4s ease-in-out infinite;
}
@keyframes avatarGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(191, 153, 242, 0); }
  50% { box-shadow: 0 0 24px 4px rgba(191, 153, 242, 0.35); }
}

/* 4. Mockup window · sutil flotación */
.mockup-window {
  animation: mockupFloat 8s ease-in-out infinite;
}
@keyframes mockupFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* 5. Mini-mocks (en cards de productos hiki.es) · respiración */
.mini-mock { animation: miniMockBreathe 6s ease-in-out infinite; }
@keyframes miniMockBreathe {
  0%, 100% { transform: rotate(-2deg) scale(1); }
  50% { transform: rotate(-1deg) scale(1.02); }
}

/* 6. Nueva tarea/agente que "aparece" cada cierto tiempo */
@keyframes newItemAppear {
  0%, 92%, 100% { opacity: 1; transform: translateY(0); }
  93%, 95% { opacity: 0; transform: translateY(-8px); }
  96%, 99% { opacity: 1; transform: translateY(0); }
}
.mockup-card:nth-child(3), .agent-cell:nth-child(3) {
  animation: newItemAppear 14s ease-in-out infinite;
}

/* 7. Brillo en el borde del mockup · línea premium */
.mockup-window::before {
  content: '';
  position: absolute;
  top: 0; left: -50%; width: 200%; height: 2px;
  background: linear-gradient(90deg, transparent 30%, var(--lavender) 50%, transparent 70%);
  animation: borderShine 4s linear infinite;
  z-index: 3;
}
@keyframes borderShine {
  to { transform: translateX(50%); }
}

/* 8. Botones primary · pulso de atención sutil */
.btn-primary {
  position: relative;
  overflow: hidden;
}
.btn-primary::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.2) 50%, transparent 70%);
  transition: left 0.6s ease;
}
.btn-primary:hover::before { left: 100%; }

/* 9. Cards · sutil "respiración" cuando no hay hover */
@keyframes cardBreathe {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}
.tesis-item:not(:hover), .pilar:not(:hover) { animation: cardBreathe 8s ease-in-out infinite; }
.tesis-item:nth-child(2), .pilar:nth-child(2) { animation-delay: -2s; }
.tesis-item:nth-child(3), .pilar:nth-child(3) { animation-delay: -4s; }

/* 10. Hero mesh · más vida */
.hero-mesh::before { animation-duration: 14s !important; }
.hero-mesh::after { animation-duration: 14s !important; }

/* 11. Reto disponible (UIA) · resaltado vivo */
.reto-card.disponible {
  position: relative;
}
.reto-card.disponible::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 22px;
  background: linear-gradient(135deg, var(--lavender), transparent 50%, var(--purple));
  z-index: -1;
  opacity: 0.4;
  animation: retoBorderGlow 5s ease-in-out infinite;
}
@keyframes retoBorderGlow {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.55; }
}

/* 12. Counter al cargar · efecto de "deslizar dígitos" sutil */
.counter, .stat-num, .caso-metric .num { display: inline-block; }

/* 13. Especialista cards (atelier) · icono pulsa */
.especialista-icon {
  animation: iconPulse 5s ease-in-out infinite;
  display: inline-block;
}
@keyframes iconPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

/* 14. Mockup chat (builder) · burbujas aparecen secuencialmente al cargar */
.chat-msg.user { animation: chatAppear 0.6s ease-out 0.3s backwards; }
.chat-msg.agent:nth-of-type(2) { animation: chatAppear 0.6s ease-out 0.9s backwards; }
.chat-msg.agent:nth-of-type(3) { animation: chatAppear 0.6s ease-out 1.5s backwards; }
@keyframes chatAppear {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* 15. Spec card aparece después del chat */
.spec-card { animation: specAppear 0.8s ease-out 2.2s backwards; }
.deploy-btn { animation: specAppear 0.8s ease-out 3s backwards; }
@keyframes specAppear {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 16. Tipografía del hero · letter spacing animation sutil */
header h1 { transition: letter-spacing 0.6s ease; }
header h1:hover { letter-spacing: -2.5px; }

/* 17. Nav link · underline animado mejorado */
.nav-link {
  position: relative;
  padding-bottom: 2px;
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 2px;
  background: linear-gradient(90deg, var(--lavender), var(--purple));
  transition: width 0.3s ease;
  border-radius: 2px;
}
.nav-link:hover::after { width: 100%; }

/* 18. Smooth fadeIn al cargar página */
body { animation: pageFadeIn 0.6s ease-out; }
@keyframes pageFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 19. WhatsApp float · entrance dramática */
.wa-float { animation: waEntrance 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s backwards, waPulse 2.5s ease-in-out 1.4s infinite !important; }
@keyframes waEntrance {
  from { opacity: 0; transform: scale(0) rotate(180deg); }
  to { opacity: 1; transform: scale(1) rotate(0); }
}

/* 20. Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ====== PRODUCT SWITCHER · sub-bar superior cross-pages ====== */
.product-switcher {
  background: var(--deep, #0a0014);
  color: rgba(255,255,255,0.7);
  font-size: 12px;
  padding: 8px 0;
  position: sticky;
  top: 0;
  z-index: 101;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.product-switcher .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.product-switcher-label {
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.product-switcher-label::before {
  content: '◆';
  color: var(--lavender, #bf99f2);
  font-size: 10px;
}
.product-switcher-links {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.product-switcher-links a {
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  padding: 4px 12px;
  border-radius: 100px;
  font-weight: 500;
  font-size: 12px;
  transition: all 0.2s;
}
.product-switcher-links a:hover {
  background: rgba(255,255,255,0.08);
  color: white;
}
.product-switcher-links a.active {
  background: rgba(191,153,242,0.18);
  color: var(--lavender, #bf99f2);
  font-weight: 600;
}
@media (max-width: 640px) {
  .product-switcher { font-size: 11px; padding: 6px 0; }
  .product-switcher-label { display: none; }
  .product-switcher .container { justify-content: center; }
  .product-switcher-links { gap: 2px; justify-content: center; }
  .product-switcher-links a { padding: 3px 10px; font-size: 11px; }
}
/* Cuando hay product-switcher, el nav sticky se ajusta */
.product-switcher + nav { top: 32px; }
@media (max-width: 640px) { .product-switcher + nav { top: 28px; } }


/* === Hiki nav dropdown · productos cross-portal === */
.nav-dropdown { position:relative; }
.nav-dropdown-toggle {
  background:transparent; border:none; cursor:pointer; font-family:inherit;
  color:var(--deep, #0a0014); font-weight:500; font-size:14px;
  display:inline-flex; align-items:center; gap:6px; padding:6px 0;
}
.nav-dropdown-toggle:hover { color:var(--purple, #3d1670); }
.nav-dropdown-toggle .caret { font-size:11px; transition:transform .2s; }
.nav-dropdown[data-open=\"true\"] .caret { transform:rotate(180deg); }
.nav-dropdown-menu {
  position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(-6px);
  background:#fff; border:1px solid #e4dcef; border-radius:18px;
  box-shadow:0 24px 60px -16px rgba(35,6,63,.22);
  padding:8px; min-width:560px;
  display:grid; grid-template-columns:1fr 1fr; gap:6px;
  opacity:0; pointer-events:none; transition:opacity .18s, transform .18s;
  z-index:120;
}
.nav-dropdown[data-open=\"true\"] .nav-dropdown-menu {
  opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0);
}
.nav-product {
  display:block; padding:14px 16px; border-radius:12px;
  text-decoration:none; color:inherit; transition:background .15s;
  position:relative;
}
.nav-product:hover { background:#f8f6fb; }
.nav-product.current { background:#f4ecff; }
.nav-product.current::after {
  content:\"AQUÍ\";
  position:absolute; top:10px; right:10px;
  font-size:9px; font-weight:700; letter-spacing:1.2px;
  background:#3d1670; color:#fff; padding:2px 7px; border-radius:100px;
}
.nav-product-head { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:6px; padding-right:40px; }
.nav-product-name { font-weight:700; font-size:15px; color:#0a0014; letter-spacing:-0.3px; }
.nav-product-domain { font-family:\"JetBrains Mono\", monospace; font-size:11px; color:#5b4276; opacity:.7; }
.nav-product-desc { font-size:12.5px; color:#2d1b46; line-height:1.5; margin-bottom:8px; }
.nav-product-desc em { color:#8a5a00; font-style:normal; font-weight:600; }
.nav-product-tag { display:inline-block; font-size:10px; font-weight:700; padding:2px 8px; border-radius:100px; background:#efe5fc; color:#2a0e4e; letter-spacing:.5px; }
@media (max-width:760px) {
  .nav-dropdown-menu {
    position:fixed; top:64px; left:16px; right:16px; transform:none;
    grid-template-columns:1fr; min-width:0; max-height:calc(100vh - 80px); overflow-y:auto;
  }
  .nav-dropdown[data-open=\"true\"] .nav-dropdown-menu { transform:none; }
}