/*
  Página Servicios — hero section.
  1) Stagger de aparición para las 5 cards del grid (además del fade+translateY que ya trae
     .scroll-into-view), replicando el efecto de "cards entrando una tras otra" del template.
  2) Las 3 cards de la fila 1 (services_clients, service_hero-img, services_rate-img) comparten
     una altura fija en desktop, en vez de depender de JS: el grid las estira parejo (align-items
     stretch por defecto) y las fotos usan .img (object-fit:cover) para llenar la caja sin distorsión.
  3) Cards con foto (service_hero-img, services_rate-img): overlay con gradiente para que el texto
     de .rate_content contraste sobre la foto.
*/

.hero_services-grid .services_clients.scroll-into-view { transition-delay: 0s; }
.hero_services-grid .service_hero-img.scroll-into-view { transition-delay: 0.1s; }
.hero_services-grid .services_rate-img.scroll-into-view { transition-delay: 0.2s; }
.hero_services-grid .stats_card.scroll-into-view { transition-delay: 0.3s; }
.hero_services-grid .rate_card.scroll-into-view { transition-delay: 0.4s; }

/* La primera card (37 años) no se distinguía como card: fondo propio distinto al resto */
.services_clients {
  background-color: #025178;
}

/* Fila 1 del hero (37 años / foto familia / foto Zeiss) a la misma altura, sin recortes raros */
@media screen and (min-width: 1031px) {
  .hero_services-grid {
    grid-template-rows: 22rem auto;
  }
  .service_hero-img,
  .services_rate-img {
    height: auto !important;
  }
}

/* Mobile: las cards del hero (37 años / foto familia / foto Zeiss, etc.) a 1 columna.
   El tema base solo baja a 1 columna hasta 479px; entre 480–767px se quedaban en 2. */
@media screen and (max-width: 767px) {
  .hero_services-grid {
    grid-template-columns: 1fr;
  }
}

/* Mobile (≤479px): el tema base ocultaba por completo la card "37 años" (services_clients)
   con display:none. Se vuelve a mostrar, ya apilada a 1 columna por la regla de arriba. */
@media screen and (max-width: 479px) {
  .services_clients {
    display: flex;
  }
}

/* Tablet (768–991px): el tema base limita la fila del grid a minmax(auto,12rem), lo que
   recortaba el texto de la card "37 años" (título + testimonio) cuando no alcanzaba en ese alto.
   Se quita el tope para que la fila crezca según su contenido, igual que ya ocurre en mobile. */
@media screen and (min-width: 768px) and (max-width: 1030px) {
  .hero_services-grid {
    grid-template-rows: minmax(auto, auto);
  }
}

/* Overlay de gradiente detrás del texto, para contraste sobre la foto */
.service_hero-img::before,
.services_rate-img::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(1, 39, 61, 0.85) 0%, rgba(1, 39, 61, 0) 55%);
  pointer-events: none;
  z-index: 1;
}
.service_hero-img .rate_content,
.services_rate-img .rate_content {
  z-index: 2;
  background-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}