/* ==========================================================================
   VAULT — section builder: frontend blocks
   Mobile-first. Every block reuses the theme tokens and grid classes, so the
   builder pages stay visually identical to the rest of the storefront.
   ========================================================================== */

.kz-page {
  width: 100%;
}

.kz-page__crumbs {
  padding: 20px 0 4px;
}

.kz-section {
  padding: 32px 0;
}

.kz-section--hero,
.kz-section--espaciador {
  padding: 0;
}

.kz-section--banner {
  padding: 24px 0;
}

/* Shared section headers
   ========================================================================== */

.kz-products__header,
.kz-combos__header,
.kz-categories__header {
  margin-bottom: 18px;
}

.kz-benefits__title,
.kz-gallery__title,
.kz-faq__title {
  margin-bottom: 16px;
}

/* Hero
   ========================================================================== */

.kz-hero {
  position: relative;
  overflow: hidden;
  background: var(--color-bg);
}

.kz-hero__media {
  position: absolute;
  inset: 0;
}

.kz-hero__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
}

.kz-hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(11, 11, 12, var(--kz-hero-overlay, 0.45));
}

.kz-hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  width: 100%;
  min-height: 360px;
  padding: 56px 0 40px;
}

.kz-hero--compacto .kz-hero__content {
  min-height: 280px;
}

.kz-hero__title {
  font-size: clamp(38px, 9vw, 84px);
  line-height: 0.95;
  margin-bottom: 10px;
  color: var(--color-text);
}

.kz-hero__subtitle {
  max-width: 560px;
  margin-bottom: 22px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-text);
  opacity: 0.85;
}

@media (min-width: 700px) {
  .kz-hero--completo .kz-hero__content {
    min-height: calc(100svh - var(--header-height, 68px));
    padding-bottom: 64px;
  }
}

/* Featured (text + image)
   ========================================================================== */

.kz-feature {
  display: grid;
  gap: 22px;
  align-items: center;
}

.kz-feature__title {
  margin-bottom: 12px;
}

.kz-feature__text {
  color: var(--color-muted);
}

.kz-feature__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  object-fit: cover;
}

@media (min-width: 900px) {
  .kz-feature {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 44px;
  }

  .kz-feature--izquierda .kz-feature__media {
    order: -1;
  }

  .kz-feature--sin-imagen {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Combos subset (card + grid styles live in promociones.css and are shared)
   ========================================================================== */

.kz-section--combos .promo-combo-card {
  height: 100%;
}

/* Size guide
   ========================================================================== */

.kz-sizes__title {
  text-align: center;
  margin-bottom: 10px;
}

.kz-sizes__intro {
  max-width: 640px;
  margin: 0 auto 22px;
  text-align: center;
  color: var(--color-muted);
}

/* Banner
   ========================================================================== */

.kz-banner--izquierda {
  text-align: left;
}

.kz-banner__media img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 260px;
  object-fit: cover;
  border-radius: var(--radius);
  margin-bottom: 20px;
}

.kz-banner__title {
  margin-bottom: 8px;
}

.kz-banner__text {
  max-width: 640px;
  margin: 0 auto 20px;
  color: var(--color-muted);
}

.kz-banner--izquierda .kz-banner__text {
  margin-left: 0;
  margin-right: 0;
}

.kz-banner--izquierda .kz-banner__title {
  margin-left: 0;
}

/* Benefits
   ========================================================================== */

.benefit__title {
  display: block;
  font-weight: 700;
}

.benefit__text {
  display: block;
  font-weight: 500;
}

/* Gallery
   ========================================================================== */

.kz-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kz-gallery__item {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.kz-gallery__image {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

@media (min-width: 700px) {
  .kz-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }
}

@media (min-width: 1000px) {
  .kz-gallery {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Text and raw HTML
   ========================================================================== */

.kz-text__title {
  margin-bottom: 12px;
}

.kz-html {
  color: var(--color-text);
}

.kz-html iframe,
.kz-html video,
.kz-html embed {
  max-width: 100%;
}

/* Spacer
   ========================================================================== */

.kz-spacer {
  width: 100%;
}