/* =============================================================
   ANIMACIONES Y RESPONSIVE GLOBAL
   Keyframes compartidos, prefers-reduced-motion y los breakpoints que
   reorganizan el LAYOUT completo. Los ajustes responsive propios de un
   componente viven junto a ese componente, no aca.
   ============================================================= */


/* ---------- Animaciones ---------- */
/* =============================================
   ANIMACIONES
============================================= */
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ---------- Accesibilidad: prefers-reduced-motion ---------- */
/* =============================================
   ACCESIBILIDAD: prefers-reduced-motion
============================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  #cursor-light { display: none; }
}

/* ---------- Breakpoints de layout ---------- */
/* =============================================
   RESPONSIVE
============================================= */
@media (max-width: 900px) {
  .hero .container { grid-template-columns: 1fr; text-align: center; }
  .hero-ctas, .hero-stats { justify-content: center; }

  .hero-image {
    display: block;
    max-width: 440px;
    margin: 0 auto;
  }
  .hero-photo { width: 100%; border-radius: 20px; }
  .hero-float-card { display: none; }

  .quien-soy .container { grid-template-columns: 1fr; }
  .quien-foto-wrap { max-width: 380px; margin: 0 auto; }
  .features-grid { grid-template-columns: 1fr 1fr; }
  .feature-card.destacada { grid-column: span 2; }
  .niveles-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
  .galeria-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }

  /* FIX: al pasar a filas 'auto', el height:100% del <video> deja de
     resolver y colapsaba a 150px (el video se veia como una franja negra
     en celulares). Le damos a la celda su propia caja con aspect-ratio. */
  .galeria-item.tall,
  .carrusel-box {
    grid-row: auto;
    height: auto;
    aspect-ratio: 9 / 16;
    max-height: 65vh;
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
  }

  /* En mobile se navega con swipe: las flechas tapan la foto y sobran.
     Los puntos, en cambio, se agrandan un toque para el dedo. */
  .carrusel-arrow { display: none; }
  .carrusel-dot { width: 8px; height: 8px; }
  .videos-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .nav-links, .nav-right { display: none; }
  .nav-toggle { display: flex; }
  .nav-links.open {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 56px; left: 0; right: 0;
    background: rgba(13,27,110,0.97);
    padding: 1.4rem;
    gap: 1.1rem;
    z-index: 99;
  }

  .hero h1 {
    font-size: clamp(1.8rem, 7.5vw, 2.6rem);
    word-break: break-word;
    overflow-wrap: break-word;
  }
  .hero-sub { font-size: 0.92rem; padding: 0 0.5rem; }
  .hero-image { max-width: 320px; }
  .hero-stat-div { display: none; }
  .hero-stat strong { font-size: 1rem; }
  .hero-stat span { font-size: 0.65rem; }

  .features-grid { grid-template-columns: 1fr; }
  .feature-card.destacada { grid-column: auto; grid-template-columns: 1fr; }
  .videos-grid { grid-template-columns: 1fr; }
  .galeria-grid { grid-template-columns: 1fr; grid-template-rows: auto; }

  /* Trust bar mobile: grid 2x2 compacto */
  .trust-div { display: none; }
  .trust-bar .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem 1rem;
    padding: 0 1rem;
  }
  .trust-item {
    font-size: 0.75rem;
    gap: 0.35rem;
    justify-content: center;
    text-align: center;
  }
  .trust-bar { padding: 0.9rem 0; }

  .cta-contact { flex-direction: column; align-items: center; gap: 0.9rem; }
}