/* ============================================================
   ANIMACIONES — Fabricio Delgado Sistemas Educativos
   CSS puro, cero librerías. Sutiles y con respeto a
   "prefers-reduced-motion" (accesibilidad).
   ============================================================ */

/* ---------- Keyframes base ---------- */
@keyframes fdFadeUp {
  from { opacity: 0; transform: translate3d(0, 26px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

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

@keyframes fdScaleIn {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes fdSlideDown {
  from { opacity: 0; transform: translate3d(0, -10px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* ---------- Reveal al hacer scroll ---------- */
/* Los elementos arrancan ocultos y se muestran cuando entran en pantalla */
.fd-reveal {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1),
              transform .7s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.fd-reveal.fd-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Variantes */
.fd-reveal--scale { transform: scale(.96); }
.fd-reveal--scale.fd-visible { transform: scale(1); }

.fd-reveal--left { transform: translate3d(-28px, 0, 0); }
.fd-reveal--left.fd-visible { transform: translate3d(0, 0, 0); }

.fd-reveal--right { transform: translate3d(28px, 0, 0); }
.fd-reveal--right.fd-visible { transform: translate3d(0, 0, 0); }

/* Stagger: retardo escalonado para listas de tarjetas */
.fd-reveal[data-fd-delay="1"] { transition-delay: .08s; }
.fd-reveal[data-fd-delay="2"] { transition-delay: .16s; }
.fd-reveal[data-fd-delay="3"] { transition-delay: .24s; }
.fd-reveal[data-fd-delay="4"] { transition-delay: .32s; }
.fd-reveal[data-fd-delay="5"] { transition-delay: .40s; }
.fd-reveal[data-fd-delay="6"] { transition-delay: .48s; }

/* ---------- Entrada del hero al cargar ---------- */
.fd-enter {
  animation: fdFadeUp .8s cubic-bezier(.22,.61,.36,1) both;
}
.fd-enter--1 { animation-delay: .05s; }
.fd-enter--2 { animation-delay: .15s; }
.fd-enter--3 { animation-delay: .28s; }
.fd-enter--4 { animation-delay: .40s; }
.fd-enter--5 { animation-delay: .52s; }

/* ---------- Hover enriquecido (solo en dispositivos con puntero) ---------- */
@media (hover: hover) and (pointer: fine) {
  .sol-card,
  .strip-item,
  .flagship-card {
    transition: transform .3s cubic-bezier(.22,.61,.36,1),
                box-shadow .3s cubic-bezier(.22,.61,.36,1),
                border-color .3s ease;
  }
  .sol-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(10,31,63,.13);
    border-color: rgba(200,168,78,.5);
  }
  .strip-item:hover {
    transform: translateY(-2px);
  }
  /* El botón principal que se "levanta" */
  .btn {
    transition: transform .22s cubic-bezier(.22,.61,.36,1),
                box-shadow .22s ease,
                background .2s ease;
  }
  .btn:hover {
    transform: translateY(-2px);
  }
  /* Enlace con subrayado que crece */
  .text-link .arr {
    transition: transform .25s cubic-bezier(.22,.61,.36,1);
  }
  .text-link:hover .arr {
    transform: translateX(4px);
  }
}

/* ---------- Barra de progreso de lectura (opcional, bloque noticias) ---------- */
.fd-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, #c8a84e, #d4b96a);
  z-index: 9999;
  transition: width .1s linear;
  pointer-events: none;
}

/* ---------- Navbar con sombra al hacer scroll ---------- */
.fd-scrolled {
  box-shadow: 0 2px 14px rgba(10,31,63,.08);
}

/* ---------- Flotación suave para elementos destacados ---------- */
@keyframes fdFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.fd-float {
  animation: fdFloat 6s ease-in-out infinite;
}

/* ---------- Accesibilidad: si el usuario pide menos movimiento, se apaga ---------- */
@media (prefers-reduced-motion: reduce) {
  .fd-reveal,
  .fd-enter,
  .fd-float {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  .sol-card:hover,
  .strip-item:hover,
  .btn:hover {
    transform: none !important;
  }
}

/* ============================================================
   CAPA 2 — Animaciones de detalle (brillo, aurora, pulso)
   ============================================================ */

/* ---------- Aurora animada de fondo en el hero ---------- */
@keyframes fdAurora {
  0%   { transform: translate3d(-6%, -4%, 0) scale(1);    opacity: .55; }
  50%  { transform: translate3d(6%, 4%, 0) scale(1.12);   opacity: .8;  }
  100% { transform: translate3d(-6%, -4%, 0) scale(1);    opacity: .55; }
}
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.hero::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -12%;
  width: 70vw;
  max-width: 900px;
  height: 70vw;
  max-height: 900px;
  background: radial-gradient(circle at 50% 50%,
              rgba(200,168,78,.20) 0%,
              rgba(200,168,78,.08) 32%,
              rgba(200,168,78,0) 68%);
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  animation: fdAurora 16s ease-in-out infinite;
  will-change: transform, opacity;
}
.hero > * { position: relative; z-index: 1; }

/* ---------- Brillado (shimmer) en las palabras doradas del hero ---------- */
@keyframes fdShimmer {
  0%   { background-position: -180% 0; }
  100% { background-position: 280% 0; }
}
.hero .total,
.fd-shimmer {
  background-image: linear-gradient(100deg,
      #c8a84e 0%,
      #c8a84e 38%,
      #f6e7b8 50%,
      #c8a84e 62%,
      #c8a84e 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: fdShimmer 7s ease-in-out infinite;
}

/* ---------- Brillo que cruza los botones dorados ---------- */
.btn-gold { position: relative; overflow: hidden; }
.btn-gold::after {
  content: '';
  position: absolute;
  top: 0; left: -140%;
  width: 60%; height: 100%;
  background: linear-gradient(100deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.55) 50%,
      rgba(255,255,255,0) 100%);
  transform: skewX(-18deg);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .btn-gold:hover::after { animation: fdShine .85s ease-out; }
}
@keyframes fdShine {
  from { left: -140%; }
  to   { left: 160%;  }
}

/* ---------- Pulso suave en las etiquetas "Disponible" ---------- */
@keyframes fdPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200,168,78,.45); }
  60%      { box-shadow: 0 0 0 7px rgba(200,168,78,0); }
}
.badge.ready { animation: fdPulse 3.2s ease-out infinite; }

/* ---------- Borde dorado animado en las tarjetas destacadas ---------- */
@keyframes fdBorderGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200,168,78,0); }
  50%      { box-shadow: 0 0 0 3px rgba(200,168,78,.18); }
}
.sol-card.featured { animation: fdBorderGlow 5s ease-in-out infinite; }

/* ---------- Iconos de producto: pequeño giro al pasar el mouse ---------- */
@media (hover: hover) and (pointer: fine) {
  .product-icon, .fc-logo {
    transition: transform .45s cubic-bezier(.34,1.56,.64,1);
  }
  .sol-card:hover .product-icon,
  .flagship-card:hover .fc-logo {
    transform: rotate(-6deg) scale(1.08);
  }
}

/* ---------- Zoom suave en imágenes de noticias y blog ---------- */
.blog-card img, .news-card .nc-img img, .post-hero img {
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
}
@media (hover: hover) and (pointer: fine) {
  .news-card:hover .nc-img img,
  .blog-card:hover img {
    transform: scale(1.045);
  }
}

/* ---------- Aparición de la franja de estado (borde que se dibuja) ---------- */
@keyframes fdBorderDraw {
  from { border-color: transparent; }
  to   { border-color: currentColor; }
}

/* ---------- Sombra flotante para la tarjeta del paquete ---------- */
@keyframes fdLift {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
.sol-card.featured:hover { animation: fdLift 3s ease-in-out infinite; }

/* ---------- Barra de progreso de lectura (posts) ---------- */
/* .fd-progress ya está definida arriba; aquí solo el refuerzo móvil */
@media (max-width: 768px) {
  .fd-progress { height: 2px; }
}

/* ---------- Accesibilidad: apagar la capa 2 si se pide menos movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero::before,
  .hero .total,
  .fd-shimmer,
  .badge.ready,
  .sol-card.featured,
  .btn-gold::after {
    animation: none !important;
  }
  .hero .total,
  .fd-shimmer {
    -webkit-text-fill-color: currentColor;
    color: inherit;
    background: none;
  }
  .news-card:hover .nc-img img,
  .blog-card:hover img,
  .sol-card:hover .product-icon {
    transform: none !important;
  }
}