/*
  premium.css — CTCC Enhanced Layer
  Mejoras evolutivas: animaciones, microinteracciones, UX mejorada.
  NO modifica colores, tipografía ni estructura base.
*/

/* ━━━━━━━━━━━━━━━━━━━━━━━━━
   1. CSS CUSTOM PROPERTIES
━━━━━━━━━━━━━━━━━━━━━━━━━ */
:root {
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 180ms;
  --duration-mid: 320ms;
  --duration-slow: 600ms;
  --shadow-premium: 0 4px 24px rgba(25,64,103,0.10), 0 1px 6px rgba(25,64,103,0.06);
  --shadow-hover: 0 12px 40px rgba(25,64,103,0.16), 0 2px 8px rgba(25,64,103,0.08);
  --shadow-xl: 0 20px 60px rgba(25,64,103,0.18), 0 4px 16px rgba(25,64,103,0.10);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━
   2. SCROLL ANIMATION ENGINE
━━━━━━━━━━━━━━━━━━━━━━━━━ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity var(--duration-slow) var(--ease-out-expo),
    transform var(--duration-slow) var(--ease-out-expo);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered children */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--duration-slow) var(--ease-out-expo),
    transform var(--duration-slow) var(--ease-out-expo);
  will-change: opacity, transform;
}
.reveal-stagger.is-visible > *:nth-child(1)  { opacity: 1; transform: translateY(0); transition-delay: 0ms; }
.reveal-stagger.is-visible > *:nth-child(2)  { opacity: 1; transform: translateY(0); transition-delay: 80ms; }
.reveal-stagger.is-visible > *:nth-child(3)  { opacity: 1; transform: translateY(0); transition-delay: 160ms; }
.reveal-stagger.is-visible > *:nth-child(4)  { opacity: 1; transform: translateY(0); transition-delay: 240ms; }
.reveal-stagger.is-visible > *:nth-child(5)  { opacity: 1; transform: translateY(0); transition-delay: 320ms; }
.reveal-stagger.is-visible > *:nth-child(6)  { opacity: 1; transform: translateY(0); transition-delay: 400ms; }
.reveal-stagger.is-visible > *:nth-child(n+7){ opacity: 1; transform: translateY(0); transition-delay: 480ms; }

/* Fade from left */
.reveal-left {
  opacity: 0;
  transform: translateX(-32px);
  transition:
    opacity var(--duration-slow) var(--ease-out-expo),
    transform var(--duration-slow) var(--ease-out-expo);
  will-change: opacity, transform;
}
.reveal-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Fade from right */
.reveal-right {
  opacity: 0;
  transform: translateX(32px);
  transition:
    opacity var(--duration-slow) var(--ease-out-expo),
    transform var(--duration-slow) var(--ease-out-expo);
  will-change: opacity, transform;
}
.reveal-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━
   3. NAVBAR — GLASS EFFECT
━━━━━━━━━━━━━━━━━━━━━━━━━ */
#navbar {
  transition: padding var(--duration-mid) var(--ease-out-expo),
              box-shadow var(--duration-mid) var(--ease-out-expo),
              background var(--duration-mid) ease,
              backdrop-filter var(--duration-mid) ease !important;
}

#navbar.scrolled {
  background: rgba(255,255,255,0.88) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  box-shadow: 0 1px 0 rgba(25,64,103,0.08), 0 4px 24px rgba(25,64,103,0.10) !important;
}

/* Nav logo: hover scale */
.nav-logo {
  transition: transform var(--duration-fast) var(--ease-spring);
}
.nav-logo:hover {
  transform: scale(1.02);
}

/* Nav menu items: smoother transition */
.nav-menu a {
  transition: color var(--duration-fast) ease !important;
}
.nav-menu a::after {
  transition: transform 240ms var(--ease-out-expo) !important;
  transform-origin: left center;
}

/* Hamburger bars: animated transform */
.hamburger span {
  transition: transform var(--duration-mid) var(--ease-out-expo),
              opacity var(--duration-fast) ease;
}
.hamburger.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.hamburger.open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.hamburger.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━
   4. BUTTONS — MICRO
━━━━━━━━━━━━━━━━━━━━━━━━━ */
.btn-primary,
.btn-cta,
.btn-white,
.btn-newsletter {
  position: relative;
  overflow: hidden;
  transition:
    background var(--duration-fast) ease,
    transform 200ms var(--ease-spring),
    box-shadow var(--duration-fast) ease !important;
}

.btn-primary:hover,
.btn-cta:hover {
  box-shadow: 0 6px 20px rgba(249,168,37,0.35);
  transform: translateY(-2px) !important;
}

.btn-primary:active,
.btn-cta:active,
.btn-white:active,
.btn-newsletter:active {
  transform: translateY(0) scale(0.98) !important;
  transition-duration: 80ms !important;
}

.btn-secondary {
  transition:
    background var(--duration-fast) ease,
    color var(--duration-fast) ease,
    transform 200ms var(--ease-spring),
    box-shadow var(--duration-fast) ease !important;
}
.btn-secondary:hover {
  box-shadow: 0 4px 16px rgba(25,64,103,0.20);
  transform: translateY(-2px) !important;
}

/* Ripple effect */
.btn-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  transform: scale(0);
  animation: ripple-anim 500ms ease-out forwards;
  pointer-events: none;
}
@keyframes ripple-anim {
  to { transform: scale(3); opacity: 0; }
}

/* CTA button arrow animation */
.btn-cta, .btn-primary {
  letter-spacing: 0.01em;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━
   5. CARDS — DEPTH & HOVER
━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Course cards */
.course-card {
  transition:
    box-shadow var(--duration-mid) var(--ease-out-expo),
    transform var(--duration-mid) var(--ease-out-expo) !important;
  box-shadow: var(--shadow-premium) !important;
}
.course-card:hover {
  box-shadow: var(--shadow-hover) !important;
  transform: translateY(-6px) !important;
}

/* Course card image: zoom on hover */
.course-img {
  transition: transform 500ms var(--ease-out-expo) !important;
  transform-origin: center center;
}
.course-card:hover .course-img {
  transform: scale(1.04);
}

/* Services CTA card */
.services-cta-card {
  transition: box-shadow var(--duration-mid) var(--ease-out-expo),
              transform var(--duration-mid) var(--ease-out-expo);
}
.services-cta-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 48px rgba(249,168,37,0.22);
}

/* Hero card */
.hero-card {
  transition: box-shadow var(--duration-mid) var(--ease-out-expo),
              transform var(--duration-mid) var(--ease-out-expo);
  box-shadow: 0 4px 24px rgba(25,64,103,0.10);
}
.hero-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

/* Hero step numbers: subtle scale on hover */
.step-num {
  transition: transform 200ms var(--ease-spring),
              box-shadow 200ms ease;
}
.hero-step:hover .step-num {
  transform: scale(1.12);
  box-shadow: 0 4px 12px rgba(249,168,37,0.4);
}

/* Security cards */
.security-card {
  transition:
    box-shadow var(--duration-mid) var(--ease-out-expo),
    transform var(--duration-mid) var(--ease-out-expo) !important;
  box-shadow: var(--shadow-premium) !important;
}
.security-card:hover {
  box-shadow: var(--shadow-hover) !important;
  transform: translateY(-4px) !important;
}

/* Step cards */
.step-card {
  transition:
    box-shadow var(--duration-mid) var(--ease-out-expo),
    transform var(--duration-mid) var(--ease-out-expo) !important;
  box-shadow: var(--shadow-premium) !important;
}
.step-card:hover {
  box-shadow: var(--shadow-hover) !important;
  transform: translateY(-4px) !important;
}

/* Therapist card */
.therapist-card {
  transition:
    box-shadow var(--duration-mid) var(--ease-out-expo),
    transform var(--duration-mid) var(--ease-out-expo) !important;
}
.therapist-card:hover {
  box-shadow: var(--shadow-hover) !important;
  transform: translateY(-3px) !important;
}

/* About image wrap */
.about-img-wrap {
  transition: box-shadow var(--duration-slow) var(--ease-out-expo),
              transform var(--duration-slow) var(--ease-out-expo);
}
.about-img-wrap:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl) !important;
}

/* About image badge: float effect */
.about-img-badge,
.hero-img-badge {
  transition: transform var(--duration-mid) var(--ease-out-expo),
              box-shadow var(--duration-mid) var(--ease-out-expo);
}
.about-img-wrap:hover .about-img-badge,
.hero-img-card:hover .hero-img-badge {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.14);
}

/* Hero image card */
.hero-img-card {
  transition: box-shadow var(--duration-mid) var(--ease-out-expo),
              transform var(--duration-mid) var(--ease-out-expo);
}
.hero-img-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl) !important;
}

/* Pricing / info cards */
.pricing-card {
  transition:
    box-shadow var(--duration-mid) var(--ease-out-expo),
    transform var(--duration-mid) var(--ease-out-expo) !important;
}
.pricing-card:hover {
  box-shadow: var(--shadow-hover) !important;
  transform: translateY(-4px) !important;
}

/* FAQ items */
.faq-item {
  transition: box-shadow var(--duration-mid) ease;
}
.faq-item:hover {
  box-shadow: 0 2px 12px rgba(25,64,103,0.08);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━
   6. SERVICE ITEMS
━━━━━━━━━━━━━━━━━━━━━━━━━ */
.service-item {
  transition:
    color var(--duration-fast) ease,
    padding-left var(--duration-fast) var(--ease-out-expo),
    background var(--duration-fast) ease !important;
  border-radius: 6px;
  margin-left: -8px;
  padding-left: 8px !important;
}
.service-item:hover {
  color: var(--blue) !important;
  padding-left: 14px !important;
  background: rgba(25,64,103,0.04);
}
.service-arrow {
  transition: transform var(--duration-fast) var(--ease-out-expo);
}
.service-item:hover .service-arrow {
  transform: translateX(4px);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━
   7. FORMS — PREMIUM STATES
━━━━━━━━━━━━━━━━━━━━━━━━━ */
.form-group {
  position: relative;
}

.form-group label {
  transition: color var(--duration-fast) ease;
}

.form-group input,
.form-group textarea,
.form-group select {
  transition:
    border-color var(--duration-fast) ease,
    box-shadow var(--duration-fast) ease,
    background var(--duration-fast) ease !important;
  border-radius: 8px !important;
}

.form-group input:hover,
.form-group textarea:hover,
.form-group select:hover {
  border-color: rgba(25,64,103,0.4) !important;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none !important;
  border-color: var(--blue) !important;
  box-shadow: 0 0 0 3px rgba(25,64,103,0.10) !important;
  background: #fff !important;
}

/* Label highlight on focus-within */
.form-group:focus-within label {
  color: var(--blue) !important;
}

/* Input valid state */
.form-group input:not(:placeholder-shown):valid,
.form-group textarea:not(:placeholder-shown):valid {
  border-color: rgba(25,64,103,0.35) !important;
}

/* Newsletter form */
.newsletter-form input {
  transition:
    border-color var(--duration-fast) ease,
    box-shadow var(--duration-fast) ease !important;
}
.newsletter-form input:focus {
  outline: none !important;
  border-color: var(--blue) !important;
  box-shadow: 0 0 0 3px rgba(25,64,103,0.10) !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━
   8. SOCIAL CIRCLES
━━━━━━━━━━━━━━━━━━━━━━━━━ */
.social-circle {
  transition:
    background var(--duration-fast) ease,
    transform 200ms var(--ease-spring),
    box-shadow var(--duration-fast) ease !important;
}
.social-circle:hover {
  background: var(--orange) !important;
  transform: translateY(-3px) scale(1.08);
  box-shadow: 0 6px 16px rgba(249,168,37,0.35);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━
   9. TRUST STRIP ITEMS
━━━━━━━━━━━━━━━━━━━━━━━━━ */
.trust-item {
  transition: transform 200ms var(--ease-spring);
}
.trust-item:hover {
  transform: translateY(-2px);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━
   10. HERO ENTRANCE
━━━━━━━━━━━━━━━━━━━━━━━━━ */
@keyframes hero-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-left > * {
  animation: hero-fade-up var(--duration-slow) var(--ease-out-expo) both;
}
.hero-left > *:nth-child(1) { animation-delay: 80ms; }
.hero-left > *:nth-child(2) { animation-delay: 160ms; }
.hero-left > *:nth-child(3) { animation-delay: 240ms; }
.hero-left > *:nth-child(4) { animation-delay: 320ms; }
.hero-left > *:nth-child(5) { animation-delay: 400ms; }

.hero-card {
  animation: hero-fade-up var(--duration-slow) var(--ease-out-expo) 200ms both;
}

.page-hero-inner > *:first-child > * {
  animation: hero-fade-up var(--duration-slow) var(--ease-out-expo) both;
}
.page-hero-inner > *:first-child > *:nth-child(1) { animation-delay: 80ms; }
.page-hero-inner > *:first-child > *:nth-child(2) { animation-delay: 160ms; }
.page-hero-inner > *:first-child > *:nth-child(3) { animation-delay: 240ms; }
.page-hero-inner > *:first-child > *:nth-child(4) { animation-delay: 320ms; }

.hero-img-card, .hero-img-card-wrap {
  animation: hero-fade-up var(--duration-slow) var(--ease-out-expo) 280ms both;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━
   11. SECTION HEADERS
━━━━━━━━━━━━━━━━━━━━━━━━━ */
.section-label {
  position: relative;
  display: inline-block;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━
   12. KICKER DOTS — PULSE
━━━━━━━━━━━━━━━━━━━━━━━━━ */
.hero-kicker::before,
.page-hero-kicker::before {
  animation: pulse-dot 2.5s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(249,168,37,0.5); }
  50%       { box-shadow: 0 0 0 6px rgba(249,168,37,0); }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━
   13. STAT NUMBERS — COUNTER
━━━━━━━━━━━━━━━━━━━━━━━━━ */
.about-stat-num {
  transition: transform var(--duration-mid) var(--ease-spring);
}
.about-stat-num.counted {
  transform: scale(1.05);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━
   14. FOOTER
━━━━━━━━━━━━━━━━━━━━━━━━━ */
.footer-col a,
.footer-col p a {
  transition: color var(--duration-fast) ease,
              padding-left var(--duration-fast) ease;
}
.footer-col a:hover,
.footer-col p a:hover {
  color: var(--orange);
}

/* Footer accent bar animation */
.footer-accent {
  background: linear-gradient(90deg, var(--orange), #ffc53d, var(--orange));
  background-size: 200% 100%;
  animation: gradient-slide 4s linear infinite;
}
@keyframes gradient-slide {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━
   15. FAQ ACCORDION
━━━━━━━━━━━━━━━━━━━━━━━━━ */
.faq-question {
  transition: color var(--duration-fast) ease;
}
.faq-item:hover .faq-question {
  color: var(--blue);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━
   16. COURSE FOOTER LINK
━━━━━━━━━━━━━━━━━━━━━━━━━ */
.course-footer-link {
  transition: gap var(--duration-fast) var(--ease-out-expo),
              color var(--duration-fast) ease !important;
}
.course-footer-link:hover {
  gap: 10px !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━
   17. ABOUT YEAR BADGE
━━━━━━━━━━━━━━━━━━━━━━━━━ */
.about-year {
  transition: transform 200ms var(--ease-spring),
              box-shadow 200ms ease;
}
.about-year:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(249,168,37,0.3);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━
   18. FEATURE ITEMS / ICONS
━━━━━━━━━━━━━━━━━━━━━━━━━ */
.security-icon,
.step-card-icon,
.feature-icon {
  transition: transform 200ms var(--ease-spring);
}
.security-card:hover .security-icon,
.step-card:hover .step-card-icon,
.feature-card:hover .feature-icon {
  transform: scale(1.15) rotate(-4deg);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━
   19. TAG / BADGE HOVER
━━━━━━━━━━━━━━━━━━━━━━━━━ */
.course-tag,
.therapist-tag {
  transition: transform 200ms var(--ease-spring),
              box-shadow 200ms ease;
}
.course-card:hover .course-tag,
.therapist-card:hover .therapist-tag {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(249,168,37,0.3);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━
   20. MOBILE NAV SLIDE
━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 768px) {
  .nav-menu {
    transform: translateY(-8px);
    transition: transform var(--duration-mid) var(--ease-out-expo),
                opacity var(--duration-mid) ease;
  }
  .nav-menu.open {
    transform: translateY(0) !important;
    opacity: 1;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━
   21. FOCUS ACCESSIBILITY
━━━━━━━━━━━━━━━━━━━━━━━━━ */
:focus-visible {
  outline: 2px solid var(--orange) !important;
  outline-offset: 3px !important;
  border-radius: 4px !important;
}

button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--orange) !important;
  outline-offset: 3px !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━
   22. REDUCED MOTION
━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-stagger > *,
  .reveal-left,
  .reveal-right {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  .hero-left > *,
  .hero-card,
  .page-hero-inner > *:first-child > *,
  .hero-img-card {
    animation: none !important;
  }
  .footer-accent {
    animation: none !important;
    background: var(--orange) !important;
  }
  .hero-kicker::before,
  .page-hero-kicker::before {
    animation: none !important;
  }
}

/* Active nav link state */
.nav-menu a.active {
  color: var(--blue) !important;
  font-weight: 700 !important;
}
.nav-menu a.active::after {
  transform: scaleX(1) !important;
  background: var(--orange) !important;
}