/* ===========================
   NOSOTROS — ANIMATIONS
   =========================== */

/* ——— Keyframes ——— */

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

@keyframes nRevealLeft {
  from { opacity: 0; transform: translateX(-28px); }
  to   { opacity: 1; transform: translateX(0);     }
}

@keyframes nRevealRight {
  from { opacity: 0; transform: translateX(28px); }
  to   { opacity: 1; transform: translateX(0);    }
}

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

@keyframes nFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

@keyframes nFloatBlob {
  0%,  100% { transform: translate(0,   0)    scale(1);    }
  33%        { transform: translate(26px, -18px) scale(1.05); }
  66%        { transform: translate(-16px, 14px) scale(0.95); }
}

@keyframes nShimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

@keyframes nCountPulse {
  0%,  100% { transform: scale(1);    }
  50%        { transform: scale(1.06); }
}

@keyframes nStatLineDraw {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

/* ===========================
   SCROLL REVEAL — Universal
   =========================== */

/* Elements use [data-reveal] attribute + .is-visible toggled by JS */

[data-reveal] {
  opacity: 0;
}

[data-reveal="up"] {
  transform: translateY(28px);
}

[data-reveal="left"] {
  transform: translateX(-28px);
}

[data-reveal="right"] {
  transform: translateX(28px);
}

[data-reveal="scale"] {
  transform: scale(0.93) translateY(14px);
}

[data-reveal].is-revealed {
  animation: none; /* cleared by JS, inline opacity/transform set */
}

/* Specific animations per direction — JS adds is-revealed → runs animation */
[data-reveal="up"].is-revealed    { animation: nRevealUp     0.65s cubic-bezier(0.16, 1, 0.3, 1) both; }
[data-reveal="left"].is-revealed  { animation: nRevealLeft   0.65s cubic-bezier(0.16, 1, 0.3, 1) both; }
[data-reveal="right"].is-revealed { animation: nRevealRight  0.65s cubic-bezier(0.16, 1, 0.3, 1) both; }
[data-reveal="scale"].is-revealed { animation: nRevealScale  0.65s cubic-bezier(0.16, 1, 0.3, 1) both; }
[data-reveal="fade"].is-revealed  { animation: nFadeIn       0.65s cubic-bezier(0.16, 1, 0.3, 1) both; }

/* Stagger via --delay custom property */
[data-reveal].is-revealed {
  animation-delay: var(--delay, 0ms);
}

/* ===========================
   HERO — Page Load Animations
   =========================== */

.nosotros-page-header {
  overflow: hidden;
  position: relative;
}

.nosotros-page-header .section-container {
  position: relative;
  z-index: 1;
}

.nosotros-hero-animate .nosotros-label {
  animation: nRevealUp 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.10s;
}

.nosotros-hero-animate .nosotros-page-title {
  animation: nRevealUp 0.65s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.28s;
}

.nosotros-hero-animate .nosotros-hero-desc {
  animation: nRevealUp 0.65s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.44s;
}

/* Thin accent line below hero */
.nosotros-hero-line {
  display: block;
  width: 56px;
  height: 3px;
  background: linear-gradient(90deg, #3b82f6 0%, #93c5fd 100%);
  border-radius: 2px;
  margin: var(--space-xl) auto 0;
  transform-origin: left center;
  animation: nHeroLineGrow 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.60s;
}

/* ===========================
   HERO — Floating Background Blobs
   =========================== */

.nosotros-hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  pointer-events: none;
  z-index: 0;
  animation: nFloatBlob var(--blob-duration, 15s) ease-in-out infinite;
  animation-delay: var(--blob-delay, 0s);
}

.nosotros-hero-blob--1 {
  width: 520px;
  height: 520px;
  background: radial-gradient(circle at 40% 40%, #3b82f6 0%, #1d4ed8 100%);
  opacity: 0.12;
  top: -140px;
  right: -100px;
  --blob-duration: 17s;
  --blob-delay: 0s;
}

.nosotros-hero-blob--2 {
  width: 380px;
  height: 380px;
  background: radial-gradient(circle at 60% 60%, #93c5fd 0%, #3b82f6 100%);
  opacity: 0.10;
  bottom: -80px;
  left: -60px;
  --blob-duration: 14s;
  --blob-delay: -5s;
}

/* ===========================
   STATS — Counter + Divider
   =========================== */

/* Animated vertical divider between stat items */
.nosotros-exp-item {
  position: relative;
}

.nosotros-exp-item::after {
  content: '';
  position: absolute;
  right: 0;
  top: 20%;
  height: 60%;
  width: 1px;
  background: rgba(255, 255, 255, 0.18);
  transform-origin: top;
  transform: scaleY(0);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--divider-delay, 0.1s);
}

.nosotros-experiencia.is-revealed .nosotros-exp-item::after {
  transform: scaleY(1);
}

.nosotros-exp-item:last-child::after {
  display: none;
}

/* Responsive: when KPI grid wraps (2 cols / 1 col),
   avoid vertical dividers on the right edge of each item. */
@media (max-width: 1024px) {
  .nosotros-exp-item::after {
    display: none;
  }
}

/* Stat number pulse after counter lands */
.nosotros-exp-number.count-done {
  animation: nCountPulse 0.4s ease;
}

/* ===========================
   CUERPO ACADÉMICO — Staggered Cards
   (parent .academico-grid gets is-revealed, nth-child fires per-card)
   =========================== */

.academico-grid .academico-card {
  opacity: 0;
  transform: translateY(26px);
}

.academico-grid.is-revealed .academico-card {
  animation: nRevealUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.academico-grid.is-revealed .academico-card:nth-child(1) { animation-delay: 0ms;   }
.academico-grid.is-revealed .academico-card:nth-child(2) { animation-delay: 90ms;  }
.academico-grid.is-revealed .academico-card:nth-child(3) { animation-delay: 180ms; }
.academico-grid.is-revealed .academico-card:nth-child(4) { animation-delay: 270ms; }
.academico-grid.is-revealed .academico-card:nth-child(5) { animation-delay: 360ms; }
.academico-grid.is-revealed .academico-card:nth-child(6) { animation-delay: 450ms; }
.academico-grid.is-revealed .academico-card:nth-child(7) { animation-delay: 540ms; }

/* ===========================
   GALERÍA — Staggered Reveal
   =========================== */

.galeria-grid .galeria-item {
  opacity: 0;
  transform: scale(0.94) translateY(18px);
}

.galeria-grid.is-revealed .galeria-item {
  animation: nRevealScale 0.65s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.galeria-grid.is-revealed .galeria-item:nth-child(1) { animation-delay: 0ms;   }
.galeria-grid.is-revealed .galeria-item:nth-child(2) { animation-delay: 80ms;  }
.galeria-grid.is-revealed .galeria-item:nth-child(3) { animation-delay: 160ms; }
.galeria-grid.is-revealed .galeria-item:nth-child(4) { animation-delay: 240ms; }
.galeria-grid.is-revealed .galeria-item:nth-child(5) { animation-delay: 320ms; }
.galeria-grid.is-revealed .galeria-item:nth-child(6) { animation-delay: 400ms; }
.galeria-grid.is-revealed .galeria-item:nth-child(7) { animation-delay: 480ms; }

/* ===========================
   CTA BANNER — Shimmer Button
   =========================== */

.btn-cta-banner {
  position: relative;
  overflow: hidden;
}

.btn-cta-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent   35%,
    rgba(255, 255, 255, 0.22) 50%,
    transparent   65%
  );
  background-size: 200% 100%;
  animation: nShimmer 3.2s linear infinite;
  pointer-events: none;
}

/* ===========================
   VALOR CARDS — Staggered Reveal
   =========================== */

.nosotros-valores-grid .nosotros-valor-card {
  opacity: 0;
  transform: translateY(22px);
}

.nosotros-valores-grid.is-revealed .nosotros-valor-card {
  animation: nRevealUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.nosotros-valores-grid.is-revealed .nosotros-valor-card:nth-child(1) { animation-delay: 0ms;   }
.nosotros-valores-grid.is-revealed .nosotros-valor-card:nth-child(2) { animation-delay: 100ms; }
.nosotros-valores-grid.is-revealed .nosotros-valor-card:nth-child(3) { animation-delay: 200ms; }
.nosotros-valores-grid.is-revealed .nosotros-valor-card:nth-child(4) { animation-delay: 300ms; }

/* ===========================
   UBICACIÓN — Smooth Reveal
   =========================== */

/* handled by [data-reveal] attribute */

/* ===========================
   REDUCE MOTION — Accessibility
   =========================== */

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  .nosotros-hero-animate .nosotros-label,
  .nosotros-hero-animate .nosotros-page-title,
  .nosotros-hero-animate .nosotros-hero-desc,
  .nosotros-hero-line,
  .academico-grid .academico-card,
  .galeria-grid .galeria-item,
  .nosotros-valores-grid .nosotros-valor-card {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }

  .nosotros-hero-blob {
    animation: none !important;
  }

  .btn-cta-banner::after {
    animation: none !important;
  }

  .nosotros-exp-item::after {
    transform: scaleY(1) !important;
    transition: none !important;
  }
}