/* ================================
   ANIMACIONES TIPO PPT (PRO)
   ================================ */

/* Por defecto (sin JS), NO ocultes nada */
.animate { opacity: 1; transform: none; }

/* Solo si JS está activo, entonces animamos */
.js .animate{
  opacity: 0;
  transition: opacity var(--anim-duration) var(--anim-ease),
              transform var(--anim-duration) var(--anim-ease),
              filter var(--anim-duration) var(--anim-ease);
  will-change: opacity, transform;
}

  
  /* Desde abajo */
  .animate-up{ transform: translateY(56px); }
  .animate-up.is-visible{ opacity: 1; transform: translateY(0); }
  
  /* Desde la izquierda */
  .animate-left{ transform: translateX(-76px); }
  .animate-left.is-visible{ opacity: 1; transform: translateX(0); }
  
  /* Desde la derecha */
  .animate-right{ transform: translateX(76px); }
  .animate-right.is-visible{ opacity: 1; transform: translateX(0); }
  
  /* Zoom suave */
  .animate-zoom{ transform: scale(.92); filter: blur(0px); }
  .animate-zoom.is-visible{ opacity: 1; transform: scale(1); }
  
  /* Delays escalonados */
  .animate-delay-1{ transition-delay: .10s; }
  .animate-delay-2{ transition-delay: .22s; }
  .animate-delay-3{ transition-delay: .34s; }
  .animate-delay-4{ transition-delay: .46s; }

/* Cards and lists: give a subtle entrance transform so stagger is more visible */
/* Only hide cards when JS is active so content isn't missing by default */
.js .cards .card, .js .list .list-item{ opacity: 0; transform: translateY(18px); }
.js .cards .card.animated, .js .list .list-item.animated{ opacity: 1; transform: translateY(0); transition: opacity var(--anim-duration) var(--anim-ease), transform var(--anim-duration) var(--anim-ease); }
  
  /* Hover pro para imágenes (opcional, pero queda brutal) */
  .media-pro{ overflow: hidden; border-radius: var(--radius); }
  
  .media-pro img{
    transform: scale(1.001);
    transition: transform .75s cubic-bezier(.2,.8,.2,1),
                filter .75s cubic-bezier(.2,.8,.2,1);
    will-change: transform;
  }
  
  .media-pro:hover img{
    transform: scale(1.06);
    filter: saturate(1.08) contrast(1.04);
  }
  
  /* Accesibilidad: si el usuario reduce animaciones */
  @media (prefers-reduced-motion: reduce){
    .animate{ opacity: 1; transform: none !important; transition: none !important; }
    .media-pro img{ transition: none !important; }
  }
  
  /* Buttons */
  .btn{ display: inline-flex; align-items:center; gap:10px; padding: 10px 14px; border-radius: 10px; font-weight:700; font-size: .95rem; cursor:pointer; }
  .btn-primary{ border: 1px solid rgba(255,255,255,0.9); color: #fff; background: transparent; }
  .btn-ghost{ background: transparent; color: rgba(255,255,255,0.9); border: none; padding: 8px 0; font-weight:600; }
  .btn[aria-disabled="true"]{ opacity:.5; pointer-events:none; }

  /* Cards layout */
  .cards{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 18px; }
  .cards .card{ background: transparent; padding: 18px 12px; border-radius: 12px; }
  .cards .card h3{ font-size: 1.05rem; color: var(--text); margin-bottom: .4rem; }
  .cards .card p{ color: var(--muted); margin-bottom: 10px; }
  .cards .card a{ color: var(--text); font-weight:700; }

  @media (max-width: 920px){ .cards{ grid-template-columns: 1fr; } }
  /* ======================================
   Animaciones por scroll (modo seguro)
   ====================================== */

/* Sin JS: NO ocultes nada */
[data-animate] { opacity: 1; }

/* Con JS: empiezan ocultos y entran animados */
.js [data-animate] { opacity: 0; }
.section [data-animate] { opacity: 1 !important; transform: none !important; transition: none !important; }
.js .animated { opacity: 1; }

/* Hover pro en imágenes (opcional) */
.media-pro{
  overflow: hidden;
  border-radius: var(--radius);
}
.media-pro img{
  transform: scale(1.001);
  transition: transform .75s cubic-bezier(.2,.8,.2,1),
              filter .75s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}
.media-pro:hover img{
  transform: scale(1.06);
  filter: saturate(1.08) contrast(1.04);
}