/*
 * Mobile UX corrections layered over the recovered visual baseline.
 * Keep the historical evidence in recovered-deploy/ immutable.
 */

@media (max-width: 760px) {
  /* Keep the hero inside the viewport on narrow phones. */
  .hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-copy,
  .diagnostic-card {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .hero h1 {
    font-size: clamp(2.7rem, 13vw, 3.55rem);
    line-height: 0.96;
  }

  .proof-list li {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding-block: 8px;
    line-height: 1.35;
  }

  .microcopy {
    margin-inline: 0;
  }

  /* “Una ruta distinta para cada etapa” is a horizontal rail on phones.
   * JavaScript advances Secundaria -> Preparatoria -> Universidad using native
   * smooth scrolling instead of writing scrollLeft every animation frame. */
  .level-grid.levels-two,
  .level-grid.levels-two.university-enabled {
    display: flex;
    grid-template-columns: none;
    gap: 14px;
    width: calc(100% + 20px);
    max-width: none;
    margin-right: -20px;
    padding: 2px 20px 18px 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0 20px;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .level-grid.levels-two.apim-auto-carousel,
  .level-grid.levels-two.university-enabled.apim-auto-carousel {
    scroll-snap-type: none;
  }

  .level-grid.levels-two::-webkit-scrollbar,
  .level-grid.levels-two.university-enabled::-webkit-scrollbar {
    display: none;
  }

  .level-grid.levels-two .level-card,
  .level-grid.levels-two.university-enabled .level-card {
    flex: 0 0 min(82vw, 330px);
    width: min(82vw, 330px);
    min-width: min(82vw, 330px);
    min-height: 360px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    transform-origin: center center;
    transition:
      transform 300ms cubic-bezier(.22,.72,.24,1),
      opacity 260ms ease;
  }

  /* During the automatic tour the active card is unmistakable, but the effect
   * only uses transform/opacity: no animated box-shadow or filter, both more
   * expensive to paint on low-power phones. */
  .level-grid.levels-two.apim-auto-carousel .level-card,
  .level-grid.levels-two.university-enabled.apim-auto-carousel .level-card {
    opacity: 0.64;
    transform: scale(0.975);
  }

  .level-grid.levels-two .level-card.apim-carousel-current,
  .level-grid.levels-two.university-enabled .level-card.apim-carousel-current {
    opacity: 1;
    transform: translateY(-5px) scale(1.018);
    animation: apimLevelCardFocus 760ms cubic-bezier(.22,.72,.24,1) both;
  }

  /* The historical sticky CTA stays hidden until the hero actions have passed. */
  .mobile-sticky {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(calc(100% + 18px));
    transition:
      opacity 180ms ease,
      visibility 180ms ease,
      transform 180ms ease;
  }

  .mobile-sticky.mobile-sticky--visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }
}

@keyframes apimLevelCardFocus {
  0% {
    opacity: 0.72;
    transform: translateY(5px) scale(0.98);
  }
  58% {
    opacity: 1;
    transform: translateY(-7px) scale(1.022);
  }
  100% {
    opacity: 1;
    transform: translateY(-5px) scale(1.018);
  }
}

@media (max-width: 340px) {
  .hero h1 {
    font-size: 2.7rem;
  }

  .level-grid.levels-two .level-card,
  .level-grid.levels-two.university-enabled .level-card {
    flex-basis: 86vw;
    width: 86vw;
    min-width: 86vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-sticky,
  .level-grid.levels-two .level-card,
  .level-grid.levels-two.university-enabled .level-card {
    transition: none;
    animation: none !important;
  }
}