/* =========================================================
   A.L.M.A. — Adaptación a tabletas y celulares
   ========================================================= */

/* Tabletas */
@media (max-width: 1024px) {
  .rejilla-4 { grid-template-columns: repeat(2, 1fr); }
  .metricas  { grid-template-columns: repeat(2, 1fr); }
  .seccion   { padding: 80px 0; }
}

/* Menú móvil y columnas simples */
@media (max-width: 860px) {
  .menu-boton { display: inline-flex; }

  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid var(--borde);
    box-shadow: 0 12px 24px rgba(11, 59, 130, 0.1);
    display: none;
  }
  .nav.abierto { display: block; }
  .nav ul { flex-direction: column; align-items: stretch; padding: 12px 24px 20px; gap: 4px; }
  .nav a { padding: 14px 16px; border-radius: 12px; }
  .nav a.boton { justify-content: center; margin-top: 8px; }

  .hero { padding: 48px 0 72px; }
  .hero .contenedor { grid-template-columns: 1fr; text-align: center; gap: 24px; }
  .hero-visual { order: -1; }
  .hero-visual img { width: min(260px, 70%); }
  .hero-texto { margin-left: auto; margin-right: auto; }
  .hero-subtitulo::after { left: 50%; transform: translateX(-50%); }
  .hero-acciones, .hero-pilares { justify-content: center; }

  .rejilla-3,
  .rejilla-2,
  .solucion,
  .validacion,
  .dos-columnas { grid-template-columns: 1fr; }

  .solucion, .dos-columnas { gap: 32px; }
  .rejilla-3 .ancho-2 { grid-column: auto; }
  /* Línea del tiempo en una columna, con la línea a la izquierda */
  .trayecto { --col-punto: 56px; }
  .trayecto-linea { left: 28px; }
  .paso { grid-template-columns: var(--col-punto) 1fr; column-gap: 14px; }
  .paso-punto { grid-column: 1; width: 48px; height: 48px; }
  .paso:nth-child(n) .paso-tarjeta { grid-column: 2; transform: translateX(40px); }
  .paso.visible .paso-tarjeta { transform: none; }
  .paso:nth-child(n) .paso-tarjeta::before { left: -8px; right: auto; border: 1px solid var(--borde); border-right: 0; border-top: 0; }
  .paso-final .paso-punto { width: 56px; height: 56px; margin-top: 0; }
  .paso-final .paso-tarjeta::before { border-color: #F2D27A; }
  /* En tabletas y celulares el texto del cierre va debajo de la foto */
  .cierre-foto { aspect-ratio: 16 / 9; }
  .cierre-foto img { object-position: 50% 40%; }
  .cierre-texto { padding: 24px 22px 28px; text-align: left; }
  .cierre { align-items: flex-start; }
  .cierre-conector { margin-left: 26px; }

  .pie-rejilla { grid-template-columns: 1fr 1fr; }
  .pie-rejilla > :first-child { grid-column: 1 / -1; }
}

/* Celulares */
@media (max-width: 560px) {
  body { font-size: 1rem; }
  .contenedor { padding: 0 16px; }
  .seccion { padding: 64px 0; }
  .seccion-cabecera { margin-bottom: 36px; }

  .rejilla-4,
  .metricas { grid-template-columns: 1fr; }
  .ancho-2 { grid-column: auto; }

  .hero-pilares { gap: 18px; }
  .pilar { flex-direction: column; text-align: center; gap: 8px; font-size: 0.85rem; }

  .hero-acciones .boton { width: 100%; justify-content: center; }

  .dato-grande { flex-direction: column; text-align: center; gap: 12px; }
  .cita { padding: 32px 26px; }
  .cita p { font-size: 1.2rem; }

  .logro { flex-direction: column; }
  .paso-tarjeta { padding: 20px; }
  .visor-cerrar { top: -54px; right: 0; }

  .pie-rejilla { grid-template-columns: 1fr; }
  .pie-legal { flex-direction: column; text-align: center; }
}