/* Borrador local de la página principal.
   Los ajustes de diseño que acordemos se incorporarán aquí. */

/* Evita que el desenfoque del encabezado se proyecte sobre el video. */
.mg-nav {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: #02060a;
}

.mg-solution-contact__whatsapp{display:flex;align-items:center;gap:10px;border-radius:4px}
.mg-solution-contact__whatsapp .mg-svg-icon{width:24px;height:24px;flex:0 0 24px;color:#78f2ac}
.mg-solution-contact__whatsapp > span > span{font-weight:400}
.mg-solution-contact__whatsapp:hover strong{text-decoration:underline;text-underline-offset:3px}
.mg-solution-contact__whatsapp:focus-visible{outline:2px solid #a2ffd1;outline-offset:6px}

.mg-hero__media video {
  position: absolute;
  top: 0;
  right: 0;
  left: auto;
  width: auto;
  max-width: 60%;
  height: 100%;
  /* Un encuadre más ancho reduce el estiramiento necesario para llenar el banner. */
  aspect-ratio: 2 / 1;
  object-fit: cover;
  object-position: center var(--hero-video-focus-y, 44%);
  /* Comparte los límites de las fotos reales; el ajuste se calcula al redimensionar. */
  transform: scaleX(var(--hero-video-scale-x, 1.35));
  transform-origin: right center;
  /* Realce suave de detalle sobre el MOV original, sin alterar su saturación. */
  filter: url('../img/video-nitidez.svg#nitidez');
  opacity: 0;
  transition: opacity .7s ease, object-position .3s linear;
  /* Mismo fundido lateral que las fotografías reales. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.3) 20%, #000 48%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.3) 20%, #000 48%);
}
.mg-hero__media video.is-active { opacity: 1; }
/* El fundido de ::after permanece idéntico al cambiar de diapositiva. */
.mg-hero::before { transition: opacity .7s ease; }
.mg-hero.mg-hero--video::before { opacity: 0; }
.mg-hero__controls .mg-hero__play[hidden] { display: none; }

/* Las dos composiciones aprobadas conservan sus colores originales. */
.mg-hero__media img.mg-hero__media-image--expanded { filter: none; }

/* Foto del depósito ampliada a formato horizontal; marca con la composición de las otras fotos. */
.mg-hero__photo-slide {
  container-type: size;
  overflow: clip;
  position: absolute;
  top: 0;
  bottom: 0;
  left: clamp(220px, 28vw, 540px);
  right: 0;
  opacity: 0;
  transition: opacity .7s ease;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.3) 20%, #000 48%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.3) 20%, #000 48%);
}
.mg-hero__photo-slide.is-active { opacity: 1; }
.mg-hero__photo-slide > .mg-hero__photo {
  opacity: 1;
  object-position: center bottom;
  transform: scale(1.35);
  transform-origin: right bottom;
  filter: none;
}
.mg-hero__photo-brand-frame {
  position: absolute;
  width: max(100cqw, 224.32cqh);
  aspect-ratio: 2324 / 1036;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.mg-hero__photo-brand-frame > .mg-hero__photo-logo {
  /* Referencia 2324 × 1036: logo original en x=1074, y=100, ancho=1248. */
  top: 9.65251%;
  right: .08606%;
  width: 53.70052%;
  height: auto;
  object-fit: contain;
  opacity: 1;
  filter: saturate(.9) contrast(1.02)
    drop-shadow(0 0 .45cqw #ffffff60)
    drop-shadow(0 0 1.2cqw #ffffff20);
}

/* Categorías: tarjetas compactas y un desplazamiento suave, de a una. */
.mg-solution-showcase {
  --showcase-columns: 6;
  --showcase-gap: 14px;
  padding-bottom: 8px;
}
.mg-solution-showcase__viewport {
  overflow-x: auto;
  min-width: 0;
  padding-top: 3px;
}
.mg-solution-showcase.is-slider-ready .mg-solution-showcase__viewport {
  overflow: hidden;
  touch-action: pan-y;
}
.mg-solution-showcase__grid {
  display: flex;
  align-items: stretch;
  gap: var(--showcase-gap);
  width: 100%;
}
.mg-solution-showcase .mg-showcase-card {
  box-sizing: border-box;
  flex: 0 0 calc((100% - (var(--showcase-columns) - 1) * var(--showcase-gap)) / var(--showcase-columns));
  min-width: 0;
  min-height: 184px;
  padding: 17px;
  gap: 10px;
}
.mg-solution-showcase .mg-showcase-card:hover { transform: none; }
.mg-solution-showcase .mg-showcase-card__header { min-height: 56px; gap: 12px; }
.mg-category-icon {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  object-fit: contain;
  filter: none;
}
.mg-solution-showcase .mg-showcase-card h2 { font-size: .92rem; line-height: 1.22; }
.mg-solution-showcase .mg-showcase-card p {
  font-size: .82rem;
  line-height: 1.5;
  padding-top: 10px;
  margin: 0;
}
.mg-solution-showcase__controls {
  display: none;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 7px;
}
.mg-solution-showcase.is-slider-ready .mg-solution-showcase__controls { display: flex; }
.mg-solution-showcase__controls button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid #a4c2e640;
  border-radius: 50%;
  background: #081522;
  color: #d4dce8;
  font-size: 14px;
  cursor: pointer;
}
.mg-solution-showcase__controls button:hover { border-color: #6ea6ff; color: #fff; }
.mg-solution-showcase__controls svg { width: 11px; height: 11px; }
.mg-solution-showcase__controls button:focus-visible,
.mg-solution-showcase__viewport:focus-visible { outline: 2px solid #6ea6ff; outline-offset: 2px; }
@media (max-width: 1599.98px) { .mg-solution-showcase { --showcase-columns: 4; } }
@media (max-width: 1099.98px) { .mg-solution-showcase { --showcase-columns: 3; } }
@media (max-width: 799.98px) { .mg-solution-showcase { --showcase-columns: 2; } }
@media (max-width: 539.98px) {
  .mg-solution-showcase { --showcase-columns: 1.12; --showcase-gap: 12px; }
  .mg-solution-showcase__controls button { width: 36px; height: 36px; }
}
@media (max-width: 767.98px) {
  /* Una zona de imagen estable evita recortes extremos y texto sobre los racords. */
  .mg-home-fold .mg-hero {
    --hero-mobile-media-height: clamp(210px, 55vw, 360px);
    min-height: 0;
    background: #081522;
  }
  .mg-hero__media {
    height: var(--hero-mobile-media-height);
    bottom: auto;
    overflow: hidden;
  }
  .mg-hero__media img.mg-hero__media-image--expanded {
    object-position: right center;
  }
  .mg-hero__media img.mg-hero__media-image--photo {
    left: 0;
    width: 100%;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .mg-hero__photo-slide {
    left: 0;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .mg-hero__photo-slide > .mg-hero__photo {
    object-position: right bottom;
    transform: scale(1.1);
  }
  .mg-hero__photo-brand-frame {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    left: 0;
    top: 0;
    transform: none;
  }
  .mg-hero__photo-brand-frame > .mg-hero__photo-logo { top: 8px; right: 8px; }
  .mg-hero__media video {
    width: 100%;
    max-width: 100%;
    transform: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .mg-home-fold .mg-hero::before { background: none; }
  .mg-home-fold .mg-hero::after {
    height: var(--hero-mobile-media-height);
    bottom: auto;
    background: linear-gradient(0deg, #081522 0%, #08152266 15%, transparent 32%);
    pointer-events: none;
  }
  .mg-hero__content {
    padding: calc(var(--hero-mobile-media-height) + 24px) 0 32px;
  }
  .mg-hero__controls {
    top: calc(var(--hero-mobile-media-height) - 40px);
    bottom: auto;
    right: 18px;
  }
}