/* Portada (body.mkz-home, se carga en el <head> solo en Home::index; el backend lo usa para las vistas previas).
   1) Variables comunes  2) Slider (/admin/slider_home)  3) Banners (/admin/banners_home)  4) Estilo homogéneo del resto de secciones */
:root{--mkz-radius:10px;--mkz-radius-pill:999px;--mkz-shadow:0 2px 8px rgba(49,54,65,.08);--mkz-shadow-hover:0 14px 30px rgba(49,54,65,.18);--mkz-seccion:28px;--mkz-texto:#313641;}
@media only screen and (min-width:768px){:root{--mkz-seccion:40px;}}

.mkz-titulo-seccion{margin:0 0 24px;font-family:'Ubuntu',sans-serif;font-weight:700;font-size:30px;line-height:1.1;letter-spacing:-.02em;text-align:center;color:var(--mkz-texto);}
@media only screen and (min-width:768px){.mkz-titulo-seccion{font-size:39px;margin-bottom:30px;}}

/* ---------- 2) Slider ---------- */
.mkz-sl{padding:12px 0 0;background:#fff;}
.mkz-sl-viewport{position:relative;border-radius:var(--mkz-radius,10px);overflow:hidden;box-shadow:var(--mkz-shadow,0 2px 8px rgba(49,54,65,.08));background:#f3f4f6;}
.mkz-sl-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.mkz-sl-track::-webkit-scrollbar{display:none;}
.mkz-sl-slide{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always;display:block;}
.mkz-sl-slide picture,.mkz-sl-slide img{display:block;width:100%;}
.mkz-sl-slide img{height:auto;max-width:none;aspect-ratio:8/9;object-fit:cover;}

.mkz-sl-flecha{position:absolute;top:50%;z-index:2;display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin-top:-20px;padding:0;border:0;border-radius:var(--mkz-radius-pill,999px);background:rgba(255,255,255,.9);box-shadow:0 2px 8px rgba(0,0,0,.18);cursor:pointer;transition:background-color .2s ease,transform .2s ease;}
.mkz-sl-flecha svg{width:22px;height:22px;fill:none;stroke:#313641;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;}
.mkz-sl-flecha:hover,.mkz-sl-flecha:focus-visible{background:#fff;transform:scale(1.08);outline:none;}
.mkz-sl-prev{left:10px;}
.mkz-sl-next{right:10px;}
.mkz-sl-puntos{position:absolute;left:0;right:0;bottom:10px;z-index:2;display:flex;justify-content:center;gap:8px;}
.mkz-sl-puntos button{width:10px;height:10px;padding:0;border:0;border-radius:var(--mkz-radius-pill,999px);background:rgba(255,255,255,.7);box-shadow:0 0 0 1px rgba(49,54,65,.15);cursor:pointer;transition:width .2s ease,background-color .2s ease;}
.mkz-sl-puntos button.activo{width:26px;background:#FF6060;box-shadow:none;}

@media only screen and (max-width:767px){
  .mkz-sl-flecha{display:none;}
}
@media only screen and (min-width:768px){
  .mkz-sl{padding-top:20px;}
  .mkz-sl-slide img{aspect-ratio:1140/400;}
  .mkz-sl-puntos{bottom:14px;}
}
@media (prefers-reduced-motion:reduce){
  .mkz-sl-track{scroll-behavior:auto;}
}

/* ---------- 3) Banners ---------- */
.mkz-hb{padding:var(--mkz-seccion) 0;}
.mkz-hb-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:row dense;gap:12px;}

.mkz-hb-card{display:flex;flex-direction:column;min-width:0;border-radius:var(--mkz-radius);overflow:hidden;background:var(--hb-color,#1aa6ee);color:var(--hb-texto,#fff);text-decoration:none;box-shadow:var(--mkz-shadow);transition:transform .25s ease,box-shadow .25s ease;}
.mkz-hb-card:hover,.mkz-hb-card:focus,.mkz-hb-card:focus-visible{color:var(--hb-texto,#fff);text-decoration:none;}
.mkz-hb-card:hover,.mkz-hb-card:focus-visible{transform:translateY(-4px);box-shadow:var(--mkz-shadow-hover);outline:none;}

.mkz-hb-img{position:relative;display:block;overflow:hidden;aspect-ratio:1/1;background:#f3f4f6;}
.mkz-hb-img img{position:absolute;top:0;left:0;width:100%;height:100%;max-width:none;object-fit:cover;transition:transform .6s ease;}
.mkz-hb-card:hover .mkz-hb-img img{transform:scale(1.05);}

.mkz-hb-texto{flex:1 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:14px 12px 16px;text-align:center;}
.mkz-hb-textos{display:flex;flex-direction:column;gap:5px;min-width:0;}
.mkz-hb-card .mkz-hb-nombre{margin:0;padding:0;font-family:'Ubuntu',sans-serif;font-weight:700;font-size:18px;line-height:1.1;letter-spacing:-.02em;color:inherit;}
.mkz-hb-card .mkz-hb-sub{margin:0;padding:0;color:inherit;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:13px;line-height:1.35;}
.mkz-hb-btn{flex:0 0 auto;display:inline-block;padding:8px 16px;border-radius:var(--mkz-radius-pill);background:#fff;color:var(--mkz-texto);font-family:'Ubuntu',sans-serif;font-weight:500;font-size:14px;line-height:1.2;letter-spacing:-.01em;white-space:nowrap;box-shadow:0 2px 6px rgba(0,0,0,.08);transition:background-color .2s ease,color .2s ease;}
.mkz-hb-card:hover .mkz-hb-btn{background:#313641;color:#fff;}

/* Móvil y tablet: ancho, grande y completo ocupan toda la fila */
.mkz-hb--ancho,.mkz-hb--grande,.mkz-hb--completo{grid-column:span 2;}
.mkz-hb--ancho .mkz-hb-img,.mkz-hb--completo .mkz-hb-img{aspect-ratio:16/9;}
.mkz-hb--grande .mkz-hb-img{aspect-ratio:4/3;}
.mkz-hb--ancho .mkz-hb-nombre,.mkz-hb--grande .mkz-hb-nombre,.mkz-hb--completo .mkz-hb-nombre{font-size:22px;}
.mkz-hb--ancho .mkz-hb-sub,.mkz-hb--grande .mkz-hb-sub,.mkz-hb--completo .mkz-hb-sub{font-size:15px;}

@media only screen and (max-width:420px){
  .mkz-hb-grid{gap:10px;}
  .mkz-hb--normal .mkz-hb-texto{padding:12px 8px 14px;}
  .mkz-hb--normal .mkz-hb-nombre{font-size:16px;}
  .mkz-hb--normal .mkz-hb-btn{padding:7px 12px;font-size:13px;}
}

@media only screen and (min-width:768px){
  .mkz-hb-grid{gap:16px;}
  .mkz-hb-card .mkz-hb-sub{font-size:15px;}
  .mkz-hb-card .mkz-hb-nombre{font-size:22px;}
  .mkz-hb-btn{padding:10px 20px;font-size:16px;}
  /* Ancho y grande: texto a la izquierda y botón a la derecha */
  .mkz-hb--ancho .mkz-hb-texto,.mkz-hb--grande .mkz-hb-texto{flex-direction:row;justify-content:space-between;gap:16px;padding:18px 22px;text-align:left;}
  .mkz-hb--ancho .mkz-hb-nombre,.mkz-hb--grande .mkz-hb-nombre{font-size:26px;}
  .mkz-hb--ancho .mkz-hb-sub,.mkz-hb--grande .mkz-hb-sub{-webkit-line-clamp:2;}
  /* Completo: imagen a la izquierda y franja de color a la derecha */
  .mkz-hb--completo{flex-direction:row;}
  .mkz-hb--completo .mkz-hb-img{flex:0 0 58%;aspect-ratio:auto;min-height:320px;}
  .mkz-hb--completo .mkz-hb-texto{flex:1 1 auto;gap:18px;padding:30px;}
  .mkz-hb--completo .mkz-hb-nombre{font-size:34px;}
  .mkz-hb--completo .mkz-hb-sub{font-size:17px;-webkit-line-clamp:5;}
}

/* Escritorio: 4 columnas con filas de alto fijo; la imagen llena el hueco que deja la franja */
@media only screen and (min-width:992px){
  .mkz-hb-grid{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:360px;}
  .mkz-hb-img,.mkz-hb--ancho .mkz-hb-img,.mkz-hb--grande .mkz-hb-img{flex:1 1 auto;min-height:0;aspect-ratio:auto;}
  .mkz-hb-texto,.mkz-hb--ancho .mkz-hb-texto,.mkz-hb--grande .mkz-hb-texto{flex:0 0 auto;}
  .mkz-hb--normal .mkz-hb-texto{padding:14px 14px 18px;}
  .mkz-hb--normal .mkz-hb-sub{-webkit-line-clamp:2;}
  .mkz-hb--grande{grid-row:span 2;}
  .mkz-hb--grande .mkz-hb-nombre{font-size:30px;}
  .mkz-hb--completo{grid-column:span 4;}
  .mkz-hb--completo .mkz-hb-img{min-height:0;}
}
@media only screen and (min-width:1200px){
  .mkz-hb-grid{grid-auto-rows:400px;}
}

@media (prefers-reduced-motion:reduce){
  .mkz-hb-card,.mkz-hb-img img,.mkz-hb-btn{transition:none;}
  .mkz-hb-card:hover,.mkz-hb-card:focus-visible,.mkz-hb-card:hover .mkz-hb-img img{transform:none;}
}

/* Vista previa del backend (Bootstrap 5): mismo mosaico a escala */
.mkz-hb-previa{max-width:1140px;margin:0 auto;}
.mkz-hb-previa .mkz-titulo-seccion{font-size:26px;margin:0 0 16px;}

/* ---------- 4) Estilo homogéneo del resto de la portada (solo body.mkz-home: listados y fichas no cambian) ---------- */
/* Catálogos de Navidad: se mantiene la banda roja a todo el ancho */
.mkz-home .cnv-home{padding:var(--mkz-seccion) 0;}
.mkz-home .cnv-home-cab h2{font-family:'Ubuntu',sans-serif;font-weight:700;font-size:30px;line-height:1.1;letter-spacing:-.02em;}
.mkz-home .cnv-tarjeta{border-radius:var(--mkz-radius);box-shadow:var(--mkz-shadow);transition:transform .25s ease,box-shadow .25s ease;}
.mkz-home .cnv-tarjeta:hover{transform:translateY(-4px);box-shadow:var(--mkz-shadow-hover);}
.mkz-home .cnv-btn,.mkz-home .cnv-home-edades a{border-radius:var(--mkz-radius-pill);}

/* Productos destacados */
.mkz-home .sectitems{padding:var(--mkz-seccion) 0;}
.mkz-home .sectitems .mkz-home-productos-cab{padding:0;margin:0;text-align:center;}
.mkz-home .sectitems .mkz-home-productos-cab .mkz-titulo-seccion{margin-bottom:6px;}
.mkz-home .sectitems .mkz-home-productos-cab .h1home{padding:0 0 20px;margin:0;}
.mkz-home .items article.thumbnail{border-radius:var(--mkz-radius);box-shadow:var(--mkz-shadow);transition:transform .25s ease,box-shadow .25s ease;}
.mkz-home .items article.thumbnail:hover{transform:translateY(-4px);box-shadow:var(--mkz-shadow-hover);}
.mkz-home .items .addcart{border-radius:var(--mkz-radius-pill);}

/* Nuestro compromiso, newsletter, Instagram y ayuda */
.mkz-home section.compromiso{padding:var(--mkz-seccion) 0;}
.mkz-home section.compromiso h4{margin-top:0;font-size:30px;line-height:1.1;}
.mkz-home section.compromiso .well{border-radius:var(--mkz-radius);overflow:hidden;box-shadow:var(--mkz-shadow);}
.mkz-home section.compromiso .well.newsletter{margin:var(--mkz-seccion) 0;border-bottom:0;background:#F8F6F2;box-shadow:none;}
.mkz-home section.compromiso .well img{display:block;width:100%;}
.mkz-home section.compromiso .well.newsletter img{display:inline-block;width:auto;}
.mkz-home section.compromiso a.clicknews,.mkz-home section.compromiso .well.newsletter a{border-radius:var(--mkz-radius-pill);}
.mkz-home section.compromiso .influencers img{border-radius:var(--mkz-radius);}
@media only screen and (min-width:768px){
  .mkz-home .cnv-home-cab h2,.mkz-home section.compromiso h4{font-size:39px;}
}
@media (prefers-reduced-motion:reduce){
  .mkz-home .cnv-tarjeta,.mkz-home .items article.thumbnail{transition:none;}
  .mkz-home .cnv-tarjeta:hover,.mkz-home .items article.thumbnail:hover{transform:none;}
}