/* ============================================
   HablaNova Kids — Animaciones premium
   Fade-in · Scroll reveal · Microinteracciones
   ============================================ */

:root {
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --anim-duration: 0.75s;
  --anim-duration-fast: 0.35s;
}

/* ---------- Hero entrance (page load) ---------- */

.hero-enter {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(6px);
}

.hero-enter.is-loaded {
  animation: heroEnter var(--anim-duration) var(--ease-smooth) forwards;
  animation-delay: calc(var(--hero-delay, 0) * 80ms);
}

.hero-enter--visual.is-loaded {
  animation-name: heroEnterVisual;
  animation-duration: 1s;
}

.hero-enter--visual {
  transform: translateY(32px) scale(0.97);
}

.trust-checklist li {
  opacity: 0;
  transform: translateX(-12px);
}

.hero-enter.is-loaded .trust-checklist li {
  animation: trustItemIn 0.55s var(--ease-smooth) forwards;
}

.hero-enter.is-loaded .trust-checklist li:nth-child(1) { animation-delay: 0.45s; }
.hero-enter.is-loaded .trust-checklist li:nth-child(2) { animation-delay: 0.52s; }
.hero-enter.is-loaded .trust-checklist li:nth-child(3) { animation-delay: 0.59s; }
.hero-enter.is-loaded .trust-checklist li:nth-child(4) { animation-delay: 0.66s; }

@keyframes heroEnter {
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes heroEnterVisual {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes trustItemIn {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Hero card subtle float */
.hero-card {
  transition: transform 0.6s var(--ease-smooth), box-shadow 0.6s var(--ease-smooth);
}

.hero-card.is-parallax-ready {
  will-change: transform;
}

/* ---------- Scroll reveal variants ---------- */

.reveal-left {
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity var(--anim-duration) var(--ease-smooth),
    transform var(--anim-duration) var(--ease-smooth);
}

.reveal-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity var(--anim-duration) var(--ease-smooth),
    transform var(--anim-duration) var(--ease-smooth);
}

.reveal-scale.is-visible {
  opacity: 1;
  transform: scale(1);
}

.reveal-fade {
  opacity: 0;
  transform: none;
  transition: opacity 0.9s var(--ease-smooth);
}

.reveal-fade.is-visible {
  opacity: 1;
}

/* Stagger handled via inline delay from JS */

/* ---------- Card microinteractions ---------- */

.outcome-card,
.benefit-card,
.trust-pillar,
.testimonial-card,
.philosophy-card {
  transition:
    transform var(--anim-duration-fast) var(--ease-smooth),
    box-shadow var(--anim-duration-fast) var(--ease-smooth),
    border-color var(--anim-duration-fast) var(--ease-smooth);
}

.outcome-card:hover,
.benefit-card:hover,
.trust-pillar:hover,
.testimonial-card:hover {
  transform: translateY(-4px);
}

.outcome-card__icon,
.benefit-icon {
  transition: transform 0.4s var(--ease-spring), background 0.3s;
}

.outcome-card:hover .outcome-card__icon,
.benefit-card:hover .benefit-icon {
  transform: scale(1.12) rotate(6deg);
  animation: iconWiggle 0.5s ease-in-out;
}

@keyframes iconWiggle {
  0%, 100% { transform: scale(1.12) rotate(6deg); }
  25% { transform: scale(1.15) rotate(-4deg); }
  75% { transform: scale(1.1) rotate(8deg); }
}

.dev-milestone {
  animation: none;
}

.dev-milestone.reveal.is-visible {
  animation: milestonePop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.dev-milestone.reveal-delay.reveal.is-visible {
  animation: milestonePop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.dev-milestones .dev-milestone:nth-child(1).reveal.is-visible { animation-delay: 0s; }
.dev-milestones .dev-milestone:nth-child(2).reveal-delay.reveal.is-visible { animation-delay: 0.1s; }
.dev-milestones .dev-milestone:nth-child(3).reveal.is-visible { animation-delay: 0.2s; }
.dev-milestones .dev-milestone:nth-child(4).reveal-delay.reveal.is-visible { animation-delay: 0.3s; }

@keyframes milestonePop {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.92);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.trust-pillar:hover {
  transform: translateY(-6px) rotate(0.5deg);
}

.section--trust {
  background: linear-gradient(180deg, var(--blanco) 0%, color-mix(in srgb, var(--amarillo-vivo) 6%, var(--blanco)) 100%);
}


/* ---------- Buttons premium ---------- */

.btn {
  position: relative;
  overflow: hidden;
  transition:
    transform var(--anim-duration-fast) var(--ease-smooth),
    box-shadow var(--anim-duration-fast) var(--ease-smooth),
    background var(--anim-duration-fast);
}

.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    transparent 30%,
    color-mix(in srgb, white 22%, transparent) 50%,
    transparent 70%
  );
  transform: translateX(-120%);
  transition: transform 0.55s var(--ease-smooth);
  pointer-events: none;
}

.btn:hover::after {
  transform: translateX(120%);
}

.btn-primary:hover {
  transform: translateY(-2px);
}

.btn-primary:active {
  transform: translateY(0) scale(0.98);
}

/* ---------- Nova journey panel transition ---------- */

.nova-journey__panel {
  transition: opacity 0.35s var(--ease-smooth), transform 0.35s var(--ease-smooth);
}

.nova-journey__panel.is-updating {
  opacity: 0;
  transform: translateY(8px);
}

.nova-journey__step {
  transition:
    transform var(--anim-duration-fast) var(--ease-smooth),
    border-color var(--anim-duration-fast),
    background var(--anim-duration-fast),
    box-shadow var(--anim-duration-fast);
}

.nova-journey__step.is-active {
  animation: novaStepPulse 0.5s var(--ease-smooth);
}

.nova-journey__step-icon {
  transition: transform 0.4s var(--ease-spring);
}

.nova-journey__step.is-active .nova-journey__step-icon {
  transform: scale(1.1);
}

@keyframes novaStepPulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

@media (min-width: 768px) {
  .nova-journey__steps::before {
    transition: background 0.4s;
  }
}

/* Method steps — staggered reveal overrides generic .reveal */
.method-step.reveal {
  transform: translateY(16px);
}

.method-step.reveal.is-visible {
  transition: none;
  animation: methodStepIn 0.65s var(--ease-smooth) backwards;
}

.method-step[data-step="1"].reveal.is-visible { animation-delay: 0s; }
.method-step[data-step="2"].reveal.is-visible { animation-delay: 0.12s; }
.method-step[data-step="3"].reveal.is-visible { animation-delay: 0.24s; }
@keyframes methodStepIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.method-step {
  transition: transform var(--anim-duration-fast) var(--ease-smooth),
    box-shadow var(--anim-duration-fast);
}

/* ---------- CTA emotional band ---------- */

.cta-band--emotional .cta-inner {
  position: relative;
  overflow: hidden;
}

.cta-band--emotional .cta-inner::before {
  content: "";
  position: absolute;
  inset: -50%;
  background: radial-gradient(
    circle at 30% 50%,
    color-mix(in srgb, var(--amarillo) 18%, transparent),
    transparent 55%
  );
  animation: ctaGlow 8s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes ctaGlow {
  from { transform: translate(0, 0) scale(1); opacity: 0.6; }
  to { transform: translate(4%, -3%) scale(1.08); opacity: 1; }
}

.cta-band--emotional .cta-inner > * {
  position: relative;
  z-index: 1;
}

/* ---------- Testimonials ---------- */

.testimonial-card__avatar {
  transition: transform 0.4s var(--ease-spring), box-shadow 0.3s;
}

.testimonial-card:hover .testimonial-card__avatar {
  transform: scale(1.06);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--azul-cielo) 20%, transparent);
}

/* ---------- FAQ accordion ---------- */

.faq-item summary {
  transition: color 0.25s, background 0.25s;
}

.faq-item[open] summary {
  color: var(--azul-cielo);
}

.faq-icon {
  transition: transform 0.35s var(--ease-spring);
}

.faq-item[open] .faq-icon {
  transform: rotate(45deg);
}

.faq-answer {
  animation: faqOpen 0.35s var(--ease-smooth);
}

@keyframes faqOpen {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- Form focus ---------- */

.form-group input {
  transition:
    border-color 0.25s,
    box-shadow 0.25s,
    transform 0.2s var(--ease-smooth);
}

.form-group input:focus {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--azul-cielo) 12%, transparent);
}

/* ---------- Floating WhatsApp ---------- */

.float-wa-btn {
  animation: waFloat 3s ease-in-out infinite;
}

@keyframes waFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.float-wa-btn:hover {
  animation: none;
  transform: scale(1.08);
}

.float-wa-label {
  animation: waLabelIn 0.6s var(--ease-smooth) 1.2s backwards;
}

@keyframes waLabelIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- Header nav active indicator ---------- */

.nav-desktop a.is-active:not(.btn) {
  color: var(--azul-cielo);
  position: relative;
}

.nav-desktop a.is-active:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  background: linear-gradient(90deg, var(--durazno), var(--amarillo));
  border-radius: 2px;
  animation: navUnderline 0.35s var(--ease-smooth);
}

@keyframes navUnderline {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* ---------- Carousel ---------- */

.slide img {
  transition: transform 8s linear;
}

.slide.active img {
  transform: scale(1.04);
}

.carousel-btn {
  transition: transform 0.25s var(--ease-smooth), background 0.25s, box-shadow 0.25s;
}

.carousel-btn:hover {
  transform: scale(1.08);
}

.carousel-dots button {
  transition: transform 0.3s var(--ease-spring), background 0.3s, width 0.3s;
}

.carousel-dots button.is-active {
  transform: scale(1.15);
}

/* ---------- Section headers ---------- */

.section-kicker {
  display: inline-block;
  animation: none;
}

.section-header.reveal.is-visible .section-kicker {
  animation: none;
  opacity: 1;
  letter-spacing: 0.04em;
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .hero-enter,
  .hero-enter.is-loaded,
  .trust-checklist li,
  .float-wa-btn,
  .cta-band--emotional .cta-inner::before,
  .slide.active img {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  .reveal-left,
  .reveal-scale,
  .reveal-fade {
    opacity: 1;
    transform: none;
  }

  .btn::after {
    display: none;
  }
}