/* ==========================================================================
   LAYOUT Y ARQUITECTURA DE IMÁGENES ANTIRROTURA
   Marketing Innova - Reglas de aspect-ratio rígidas y contenedores seguros
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container-max-w);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.container-narrow {
  width: 100%;
  max-width: var(--container-narrow-w);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* Secciones estándar */
.section {
  padding-top: 5rem;
  padding-bottom: 5rem;
  position: relative;
}

.section-lg {
  padding-top: 7rem;
  padding-bottom: 7rem;
}

/* --------------------------------------------------------------------------
   ARQUITECTURA DE IMÁGENES: BLINDAJE VISUAL CON ASPECT-RATIO
   Garantiza que cualquier imagen subida por el cliente mantenga proporciones
   exactas sin alterar el layout ni generar saltos visuales (CLS = 0).
   -------------------------------------------------------------------------- */

/* Envoltorio genérico de imagen fija */
.innova-img-box {
  position: relative;
  overflow: hidden;
  display: block;
  background-color: var(--bg-surface-elevated);
}

.innova-img-box img,
.innova-img-box picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform var(--transition-smooth);
}

/* 1. Hero Image: 16:9 proporción panorámica cinemática */
.img-ratio-hero {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-glow);
}

/* 2. Caso de Publicidad / Proyectos: 16:10 proporción estándar */
.img-ratio-case {
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

/* 3. Icono o Miniatura de Servicio AI: 1:1 cuadrado centrado */
.img-ratio-service {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  width: 72px;
  height: 72px;
}

.img-ratio-service img {
  object-fit: contain;
  padding: 8px;
}

/* 4. Avatar de Testimonios: 1:1 circular estricto */
.img-ratio-avatar {
  aspect-ratio: 1 / 1;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  border: 2px solid var(--primary);
  flex-shrink: 0;
}

/* 5. Foto de Perfil CEO / Equipo: 4:5 retrato profesional */
.img-ratio-profile {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* 6. Logo de Certificación o Alianza: 5:2 contenedor transparente */
.img-ratio-partner {
  aspect-ratio: 5 / 2;
  border-radius: var(--radius-sm);
  background-color: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  padding: 0.75rem 1.25rem;
}

.img-ratio-partner img {
  object-fit: contain;
}

/* Efecto hover elegante sin romper el contenedor */
.innova-img-box:hover img {
  transform: scale(1.03);
}

/* 7. Hero Portrait: 3:4 retrato para foto del CEO en portada */
.img-ratio-portrait {
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: 420px;
}

/* 8. Logo en banda de confianza: contenedor sin fondo */
.img-ratio-trust-logo {
  aspect-ratio: auto;
  max-height: 40px;
  width: auto;
  background: transparent;
  border: none;
}

.img-ratio-trust-logo img {
  object-fit: contain;
  filter: brightness(0) invert(1);
  max-height: 40px;
  width: auto;
}

/* 9. Captura de resultado: 16:9 con borde sutil */
.img-ratio-screenshot {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
}

/* 10. Video thumbnail con overlay de play */
.img-ratio-video-thumb {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  cursor: pointer;
  position: relative;
}

.video-thumb-wrapper {
  position: relative;
  display: block;
}

.video-play-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast);
  pointer-events: none;
  z-index: 2;
}

.video-thumb-wrapper:hover .video-play-overlay {
  background: rgba(37, 99, 235, 0.85);
}

.video-play-overlay svg {
  fill: white;
  width: 28px;
  height: 28px;
  margin-left: 3px;
}

/* Conservar el encuadre completo de retratos y capturas; no encadenar recortes. */
.img-ratio-portrait img, .img-ratio-profile img,
.img-ratio-screenshot img, .img-ratio-video-thumb img {
  object-fit: contain;
}
.img-ratio-portrait img, .img-ratio-profile img { object-position: center bottom; }
.img-ratio-portrait:hover img, .img-ratio-profile:hover img,
.img-ratio-screenshot:hover img, .img-ratio-video-thumb:hover img { transform: none; }

/* Grillas responsivas */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
}

@media (max-width: 1024px) {
  .grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
  .section {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }
}

/* Centrado y adaptabilidad */
.services-home-grid {
  justify-content: center;
}

.destinatarios-card-single {
  max-width: 780px;
  margin-inline: auto;
  margin-bottom: 4rem;
}