/* PREMIUM VISUAL ENHANCEMENTS - Microinteracciones y Componentes Avanzados */

/* Hero premium con partículas y efectos */
.hero-section{
  background:linear-gradient(135deg,var(--wp--preset--color--primary-blue),var(--wp--preset--color--primary-deep));
  color:#fff;position:relative;overflow:hidden;min-height:100vh;display:flex;align-items:center;
}
.hero-section::before {
  content:"";position:absolute;inset:0;
  background:var(--nicteo-gradient-mesh);opacity:.22;
  animation:float 20s ease-in-out infinite alternate;
}
.hero-section::after {
  content:"";position:absolute;inset:0;
  background:linear-gradient(45deg,transparent 30%,rgba(255,255,255,.02) 50%,transparent 70%);
  background-size:200% 200%;animation:shimmer 8s linear infinite;
}

.hero-particles {position:absolute;inset:0;overflow:hidden;pointer-events:none;}
.hero-particles::before,.hero-particles::after {
  content:"";position:absolute;width:6px;height:6px;
  background:rgba(255,255,255,.4);border-radius:50%;
  animation:float 6s ease-in-out infinite;
}
.hero-particles::before {top:20%;left:10%;animation-delay:-2s;}
.hero-particles::after {top:60%;right:15%;animation-delay:-4s;width:4px;height:4px;}

.hero-section .hero-title{position:relative;overflow:hidden}
.hero-section .hero-subtitle{font-size:1.25rem;line-height:1.6;margin:1.5rem 0 2.5rem}

.hero-highlight{
  background:linear-gradient(135deg,#fbbf24,#f59e0b);
  background-clip:text;-webkit-background-clip:text;color:transparent;font-weight:800
}
.hero-highlight::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:10px;
  background:rgba(251,191,36,.3);filter:blur(6px);border-radius:999px;
  animation:pulse 2s ease-in-out infinite
}

.hero-ctas .wp-element-button{
  border-radius:.75rem;padding:1rem 2rem;font-weight:600;font-size:1.1rem;
  position:relative;overflow:hidden;
}
.hero-ctas .wp-element-button:hover{
  transform:translateY(-3px);
  box-shadow:0 20px 40px -10px rgba(0,0,0,.4);
}
/* Botones base y variaciones */
.ripple-btn{display:inline-block;padding:.85rem 1.4rem;border-radius:.75rem;background:#2563eb;color:#fff;font-weight:700;position:relative;overflow:hidden;transition:transform var(--nicteo-transition),box-shadow var(--nicteo-transition)}
.ripple-btn:hover{transform:translateY(-2px);box-shadow:0 16px 32px -12px rgba(37,99,235,.45)}
.ripple-btn:after{content:"";position:absolute;inset:0;background:radial-gradient(circle,rgba(255,255,255,.35) 10%,transparent 11%) 0 0/10px 10px;opacity:0;transition:opacity .3s}
.ripple-btn:active:after{opacity:.25}
.outline-btn{display:inline-block;padding:.85rem 1.4rem;border-radius:.75rem;border:2px solid rgba(255,255,255,.85);color:#fff;background:rgba(0,0,0,.25);backdrop-filter:blur(8px);font-weight:700;transition:all var(--nicteo-transition)}
.outline-btn:hover{background:rgba(0,0,0,.4)}

/* Typewriter effect */
.typewriter {
  overflow:hidden;border-right:3px solid rgba(255,255,255,.8);
  white-space:nowrap;animation:typewriter 3s steps(40) 1s both,blink .75s step-end infinite;
}

/* Decorative sections */
.section-divider {
  height:100px;margin:2rem 0;position:relative;
  background:linear-gradient(135deg,transparent 49%,rgba(37,99,235,.1) 50%,transparent 51%);
}
.section-divider::before {
  content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:40px;height:40px;background:var(--wp--preset--color--primary-blue);
  border-radius:50%;box-shadow:var(--nicteo-glow);
}

.wave-separator {
  height:60px;
  background:url("data:image/svg+xml,%3Csvg viewBox='0 0 1200 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1200 120L0 16.48 0 0 1200 0 1200 120z' fill='%23f8fafc'/%3E%3C/svg%3E") no-repeat center;
  background-size:cover;
}

/* Services premium */
.service-card-inner{
  position:relative;
  transition:transform var(--nicteo-transition-slow), box-shadow var(--nicteo-transition);
}
.service-card-inner::before {
  content:"💼";position:absolute;top:1rem;right:1rem;
  font-size:1.5rem;opacity:.3;transition:all var(--nicteo-transition);
}
.service-card-inner:hover::before {opacity:.7;transform:scale(1.1);}
.service-card-inner:hover{
  transform:translateY(-8px) rotateY(2deg);
  box-shadow:0 25px 50px -12px rgba(37,99,235,.25);
}

/* Portfolio interactivo */
.portfolio-card{
  position:relative;overflow:hidden;
  transition:transform var(--nicteo-transition-slow), box-shadow var(--nicteo-transition);
}
.portfolio-card::before {
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,transparent,rgba(37,99,235,.1));
  opacity:0;transition:opacity var(--nicteo-transition);
}
.portfolio-card:hover::before {opacity:1;}
.portfolio-card:hover{
  transform:translateY(-8px) scale(1.02);
  box-shadow:0 30px 60px -12px rgba(37,99,235,.4);
}

.portfolio-badges .badge{
  background:linear-gradient(135deg,#34d399,#10b981);color:#fff;
  animation:scaleIn .6s ease-out;box-shadow:var(--nicteo-shadow-md);
}
.portfolio-badges .badge:nth-child(2){animation-delay:.2s;}

/* Stats con contadores animados */
.stat-card{
  position:relative;overflow:hidden;
  background:rgba(255,255,255,.08);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.15);
  transition:transform var(--nicteo-transition);
}
.stat-card::before {
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,#fbbf24,#f59e0b);
  transform:scaleX(0);transition:transform 1s ease-out;
}
.stat-card.in-view::before {transform:scaleX(1);}
.stat-card:hover{transform:scale(1.05);}

/* Testimonials carousel */
.testimonials-grid{
  position:relative;
}
.testimonial-card-inner{
  position:relative;
  transition:transform var(--nicteo-transition), box-shadow var(--nicteo-transition);
}
.testimonial-card-inner::before {
  content:"\201C";position:absolute;top:-10px;left:10px;
  font-size:4rem;color:rgba(37,99,235,.1);font-family:Georgia,serif;
}
.testimonial-card-inner:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 40px -10px rgba(37,99,235,.2);
}

/* Pricing interactivo */
.pricing-card-inner{
  position:relative;overflow:hidden;
  transition:transform var(--nicteo-transition-slow), box-shadow var(--nicteo-transition);
}
.pricing-card-inner::before {
  content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(37,99,235,.1),transparent);
  transition:left .8s ease-out;
}
.pricing-card-inner:hover::before {left:100%;}
.pricing-card-inner:hover{
  transform:translateY(-8px) scale(1.02);
  box-shadow:0 30px 60px -12px rgba(37,99,235,.3);
}

.pricing-badge{
  animation:pulse 2s ease-in-out infinite;
  background:linear-gradient(135deg,#f59e0b,#d97706);
}

/* FAQ premium */
.faq-item{
  transition:all var(--nicteo-transition);
  border:1px solid #e5e7eb;margin-bottom:1rem;
}
.faq-item:hover{box-shadow:var(--nicteo-shadow-md);}
.faq-question{
  cursor:pointer;position:relative;
  transition:background-color var(--nicteo-transition);
}
.faq-question:hover{background-color:#f8fafc;}
.faq-toggle{
  transition:transform var(--nicteo-transition);
  width:24px;height:24px;display:flex;align-items:center;justify-content:center;
  border:2px solid #d1d5db;border-radius:50%;
}
.faq-answer{
  max-height:0;overflow:hidden;
  transition:max-height .4s ease-out, padding .4s ease-out;
}
.faq-item.open .faq-answer{max-height:200px;padding:20px;}

/* CTA premium */
.cta-columns{align-items:center;gap:3rem;}
.cta-left{animation:fadeInLeft 1s ease-out;}
.cta-right{animation:fadeInRight 1s ease-out .3s both;}

/* Quick contact mejorado */
.quick-contact{
  background:rgba(255,255,255,.12);backdrop-filter:blur(15px);
  border:1px solid rgba(255,255,255,.25);
  transition:transform var(--nicteo-transition);
}
.quick-contact:hover{transform:scale(1.02);}
.quick-contact-form input:focus,.quick-contact-form textarea:focus{
  outline:none;border-color:rgba(251,191,36,.6);
  box-shadow:0 0 0 3px rgba(251,191,36,.2);
}
.quick-contact-form button{
  transition:all var(--nicteo-transition);
  position:relative;overflow:hidden;
}
.quick-contact-form button::before {
  content:"";position:absolute;inset:0;
  background:linear-gradient(45deg,transparent,rgba(255,255,255,.2),transparent);
  transform:translateX(-100%);transition:transform .6s;
}
.quick-contact-form button:hover::before {transform:translateX(100%);}

/* Brands premium */
.brand-logos{
  position:relative;
}
.brand-logo{
  transition:all var(--nicteo-transition);
  padding:.5rem 1rem;border-radius:.5rem;
}
.brand-logo:hover{
  color:#374151;background:rgba(37,99,235,.05);
  transform:translateY(-2px);
}

/* Responsive enhancements */
@media (max-width: 768px) {
  .hero-section{min-height:80vh;}
  .hero-ctas{flex-direction:column;gap:.75rem;}
  .cta-columns{flex-direction:column;gap:2rem;}
  .portfolio-card:hover,.service-card-inner:hover,.pricing-card-inner:hover{
    transform:translateY(-4px);
  }
}

/* Performance optimizations */
@media (prefers-reduced-motion: reduce) {
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
  .hero-section::before,.hero-section::after,.hero-particles::before,.hero-particles::after{animation:none;}
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .card{background:#1f2937;border-color:#374151;}
  .service-card-inner,.portfolio-card,.testimonial-card-inner,.pricing-card-inner{
    background:#1f2937;border-color:#374151;
  }
}