/* ============================================================
   Home — front-page específico
   ============================================================ */

/* ============================================================
   Hero slider — 3 slides full-bleed con overlay verde
   ============================================================ */
.mk-hero-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--mk-green-900);
}

.mk-hero-slider__viewport {
  position: relative;
  height: clamp(420px, 60vh, 620px);
}

.mk-hero-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 600ms ease-in-out, visibility 600ms;
  pointer-events: none;
}

.mk-hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 2;
}

.mk-hero-slide__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.mk-hero-slide__placeholder {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      45deg,
      var(--mk-ink-500) 0,
      var(--mk-ink-500) 12px,
      var(--mk-ink-700) 12px,
      var(--mk-ink-700) 24px
    );
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.55);
  font-family: var(--mk-font-display);
  font-size: var(--mk-text-md);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Overlay verde para legibilidad del texto. Más fuerte a la izquierda
   donde va el copy, más liviano a la derecha donde se ve la imagen. */
.mk-hero-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(10, 68, 34, 0.78) 0%,
      rgba(29, 110, 61, 0.6) 60%,
      rgba(29, 110, 61, 0.45) 100%
    );
  z-index: 1;
}

.mk-hero-slide__content {
  position: relative;
  z-index: 2;
  color: #fff;
  max-width: 760px;
  padding: var(--mk-sp-6) var(--mk-sp-4);
}

.mk-hero-slide__eyebrow {
  display: inline-block;
  font-family: var(--mk-font-display);
  font-weight: 600;
  font-size: var(--mk-text-sm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mk-gold-300);
  padding-bottom: var(--mk-sp-2);
  border-bottom: 2px solid var(--mk-gold-500);
  margin-bottom: var(--mk-sp-4);
}

.mk-hero-slide__title {
  font-size: clamp(28px, 5vw, 52px);
  line-height: 1.05;
  margin: 0 0 var(--mk-sp-4);
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  font-family: var(--mk-font-display);
  font-weight: 800;
}

.mk-hero-slide__lead {
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.5;
  max-width: 560px;
  margin: 0 0 var(--mk-sp-5);
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.mk-hero-slide__cta {
  background: #fff;
  color: var(--mk-green-800);
  border-color: #fff;
}

.mk-hero-slide__cta:hover {
  background: var(--mk-gold-500);
  border-color: var(--mk-gold-500);
  color: var(--mk-ink-900);
}

/* Dots inferiores */
.mk-hero-slider__dots {
  position: absolute;
  bottom: var(--mk-sp-5);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--mk-sp-2);
  z-index: 5;
}

.mk-hero-slider__dot {
  width: 36px;
  height: 4px;
  background: rgba(255, 255, 255, 0.35);
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  padding: 0;
  transition: background var(--mk-trans), width var(--mk-trans);
}

.mk-hero-slider__dot:hover { background: rgba(255, 255, 255, 0.7); }

.mk-hero-slider__dot.is-active {
  background: var(--mk-gold-500);
  width: 56px;
}

@media (max-width: 767px) {
  .mk-hero-slider__viewport {
    height: clamp(360px, 80vh, 480px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mk-hero-slide { transition: none; }
}

/* Acceso rápido logueado */
.mk-quick-access {
  background: var(--mk-green-100);
  border-left: 4px solid var(--mk-green-500);
  padding: var(--mk-sp-5) var(--mk-sp-5);
  border-radius: var(--mk-radius);
}

.mk-quick-access h2 {
  font-size: var(--mk-text-xl);
  margin-bottom: var(--mk-sp-2);
}

.mk-quick-cards {
  display: grid;
  gap: var(--mk-sp-3);
  grid-template-columns: 1fr;
  margin-top: var(--mk-sp-4);
}

@media (min-width: 768px) {
  .mk-quick-cards {
    grid-template-columns: repeat(4, 1fr);
  }
}

.mk-quick-card {
  background: #fff;
  padding: var(--mk-sp-3) var(--mk-sp-4);
  border-radius: var(--mk-radius);
  border: 1px solid var(--mk-bg-soft);
  font-size: var(--mk-text-sm);
}

.mk-quick-card strong { display: block; margin-bottom: 2px; }
.mk-quick-card .mk-muted { font-size: var(--mk-text-xs); }

/* Categorías + aplicaciones */
/* Grid: 2 cols mobile/tablet, 4 cols desktop. Sin 3 cols ni 1 col. */
.mk-cat-grid {
  display: grid;
  gap: var(--mk-sp-5);
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 1024px) {
  .mk-cat-grid { grid-template-columns: repeat(4, 1fr); }
}

.mk-cat-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--mk-bg-soft);
  border-left: 4px solid transparent;
  border-radius: var(--mk-radius);
  text-decoration: none;
  color: var(--mk-ink-900);
  overflow: hidden;
  transition: all var(--mk-trans);
}

.mk-cat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--mk-shadow);
  border-left-color: var(--mk-gold-500);
  color: var(--mk-ink-900);
}

.mk-cat-card__img {
  aspect-ratio: 1 / 1;
  background: #fafafa;
  padding: var(--mk-sp-4);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--mk-bg-soft);
}

.mk-cat-card__img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply; /* funde el fondo blanco con el bg gris claro */
}

.mk-cat-card__img--empty {
  background:
    repeating-linear-gradient(
      45deg,
      #f4f4f4 0,
      #f4f4f4 8px,
      #ececec 8px,
      #ececec 16px
    );
  color: var(--mk-ink-300);
  font-size: var(--mk-text-2xl);
}

.mk-cat-card__body {
  padding: var(--mk-sp-4) var(--mk-sp-5);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mk-cat-card__name {
  font-family: var(--mk-font-display);
  font-weight: 700;
  font-size: var(--mk-text-md);
  line-height: 1.25;
  color: var(--mk-ink-900);
}

.mk-cat-card__count {
  font-size: var(--mk-text-xs);
  color: var(--mk-ink-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.mk-cat-card:hover .mk-cat-card__name { color: var(--mk-green-700); }

/* Two-col split: trust + ejecutivo */
.mk-split {
  display: grid;
  gap: var(--mk-sp-5);
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  .mk-split {
    grid-template-columns: 2fr 1fr;
  }
}

.mk-trust-block {
  padding: var(--mk-sp-6);
  background: #fff;
  border: 1px solid var(--mk-bg-soft);
  border-radius: var(--mk-radius);
}

.mk-trust-block h2 {
  font-size: var(--mk-text-2xl);
  margin-bottom: var(--mk-sp-3);
}

.mk-trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mk-sp-2);
  margin-top: var(--mk-sp-4);
}

.mk-trust-badges span {
  background: var(--mk-bg-alt);
  padding: var(--mk-sp-2) var(--mk-sp-3);
  border-radius: var(--mk-radius);
  font-size: var(--mk-text-xs);
  font-weight: 500;
  color: var(--mk-ink-700);
}

.mk-exec-block {
  padding: var(--mk-sp-6);
  background: var(--mk-green-100);
  border-radius: var(--mk-radius);
}

.mk-exec-block h3 {
  font-size: var(--mk-text-lg);
  margin-bottom: var(--mk-sp-3);
}

.mk-exec-block .mk-btn {
  margin-top: var(--mk-sp-3);
}

/* HDS banner */
.mk-hds-banner {
  background: var(--mk-ink-900);
  color: #fff;
  padding: var(--mk-sp-7) 0;
  text-align: center;
}

.mk-hds-banner h2 {
  color: #fff;
  font-size: var(--mk-text-2xl);
  margin-bottom: var(--mk-sp-3);
}

.mk-hds-banner p {
  max-width: 720px;
  margin: 0 auto var(--mk-sp-5);
  opacity: 0.85;
  font-size: var(--mk-text-md);
}

.mk-hds-banner .mk-btn {
  background: var(--mk-green-500);
  color: #fff;
  border-color: var(--mk-green-500);
}

.mk-hds-banner .mk-btn:hover {
  background: #fff;
  color: var(--mk-ink-900);
  border-color: #fff;
}

/* Líneas (Industrial / Hogar / Maquila) */
.mk-lineas {
  display: grid;
  gap: var(--mk-sp-4);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .mk-lineas { grid-template-columns: repeat(3, 1fr); }
}

.mk-linea-card {
  display: block;
  padding: var(--mk-sp-6);
  background: #fff;
  border: 1px solid var(--mk-bg-soft);
  border-top: 4px solid var(--mk-green-700);
  border-radius: var(--mk-radius);
  text-decoration: none;
  color: var(--mk-ink-900);
  transition: all var(--mk-trans);
}

.mk-linea-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--mk-shadow);
  color: var(--mk-ink-900);
}

.mk-linea-card h3 {
  margin-bottom: var(--mk-sp-2);
  color: var(--mk-green-700);
}

.mk-linea-card p {
  color: var(--mk-ink-700);
  margin-bottom: var(--mk-sp-3);
}

.mk-linea-card--gold {
  border-top-color: var(--mk-gold-500);
}

.mk-linea-card--gold h3 {
  color: var(--mk-gold-700);
}

.mk-linea-cta {
  font-family: var(--mk-font-display);
  font-weight: 600;
  font-size: var(--mk-text-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--mk-green-700);
}

.mk-linea-card--gold .mk-linea-cta { color: var(--mk-gold-700); }

/* Servicios (Soporte / Capacitación / Despachos / Desarrollo) */
.mk-servicios-grid {
  display: grid;
  gap: var(--mk-sp-4);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .mk-servicios-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .mk-servicios-grid { grid-template-columns: repeat(4, 1fr); }
}

.mk-servicio-card {
  padding: var(--mk-sp-5);
  background: #fff;
  border-radius: var(--mk-radius);
  border-left: 3px solid var(--mk-gold-500);
}

.mk-servicio-card h3 {
  font-size: var(--mk-text-lg);
  color: var(--mk-green-700);
  margin-bottom: var(--mk-sp-2);
}

.mk-servicio-card p {
  font-size: var(--mk-text-sm);
  color: var(--mk-ink-700);
  margin: 0;
}

/* Sucursales */
.mk-sucursales-grid {
  display: grid;
  gap: var(--mk-sp-4);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .mk-sucursales-grid { grid-template-columns: repeat(3, 1fr); }
}

.mk-sucursal-card {
  padding: var(--mk-sp-5);
  background: #fff;
  border: 1px solid var(--mk-bg-soft);
  border-radius: var(--mk-radius);
}

.mk-sucursal-card h3 {
  font-size: var(--mk-text-lg);
  color: var(--mk-green-700);
  margin-bottom: var(--mk-sp-3);
}

.mk-sucursal-card p {
  margin-bottom: var(--mk-sp-2);
}

.mk-sucursal-card a { color: var(--mk-ink-900); }
.mk-sucursal-card a:hover { color: var(--mk-green-500); }

/* Atención al Cliente — card único centrado en la sección.
   Antes había un split 2-col (Agente en Vivo + Atención al Cliente) pero
   el bloque izquierdo prometía video llamadas que no se ofrecen; lo
   quitamos y dejamos solo el contacto real. */
.mk-contacto .mk-contacto-card {
  background: #fff;
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
  padding: var(--mk-sp-6) var(--mk-sp-5);
  border: 1px solid var(--mk-bg-soft);
  border-radius: var(--mk-radius);
}

.mk-contacto .mk-contacto-card .mk-section-title {
  margin-top: 0;
  margin-bottom: var(--mk-sp-3);
}

.mk-contacto .mk-contacto-card .mk-btn {
  margin-top: var(--mk-sp-3);
}

/* ----------- Section head con link a la derecha ----------- */
.mk-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--mk-sp-3);
}

.mk-section-link {
  font-family: var(--mk-font-display);
  font-weight: 600;
  font-size: var(--mk-text-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mk-green-700);
  text-decoration: none;
  white-space: nowrap;
}

.mk-section-link:hover { color: var(--mk-gold-700); }

/* Reglas de .mk-product-grid y .mk-product-card movidas a base.css
   (componente reusable: home destacados + PDP relacionados). */

/* ----------- Videos ----------- */
.mk-video-grid {
  display: grid;
  gap: var(--mk-sp-4);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) { .mk-video-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .mk-video-grid { grid-template-columns: repeat(3, 1fr); } }

.mk-video-card {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--mk-radius);
  overflow: hidden;
  box-shadow: var(--mk-shadow-sm);
}

.mk-video-card iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ----------- Sucursales: card con mapa arriba ----------- */
.mk-sucursal-card {
  padding: 0;
  overflow: hidden;
}

.mk-sucursal-card__map {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--mk-bg-soft);
}

.mk-sucursal-card__map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(0.2) contrast(1.05);
}

.mk-sucursal-card__body {
  padding: var(--mk-sp-5);
}