/* ============================================================
   KOMFY HOME BENEFITS — 3 columnas debajo del hero según handoff
   Pisa estilos del bloque "banner-services" del tema base.
   Aplica solo cuando se carga desde el home (link condicional
   en layout.tpl). Anula la inicialización de Swiper con CSS para
   garantizar grid estático (3 cols desktop / 1 col mobile).
   ============================================================ */

/* ------------------------------------------------------------
   REORDEN CSS: poner el banner informativo entre el hero y
   los shorts sin tocar el template (Twig de Tiendanube no
   permite mover el include sin romper el render).
   El container `.home-sections-container` SOLO existe en
   home.tpl, así que estas reglas están naturalmente scope-adas
   al home — cero riesgo en otras páginas.
   ------------------------------------------------------------ */
/* CRITICAL: forzar que el container sea flex column con !important.
   Si Tiendanube lo pisa con `display: block`, las secciones se solapan via
   absolute/fixed y el banner termina debajo del hero. */
div.js-home-sections-container,
.home-sections-container,
.js-home-sections-container.home-sections-container {
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
}
/* Hero/slider primero */
.home-sections-container > .js-main-slider-section,
.home-sections-container > .section-slider-home {
  order: -20 !important;
  position: relative !important;
  z-index: 1 !important;
}
/* Banner informativo segundo */
.home-sections-container > .section-informative-banners {
  order: -10 !important;
}
/* Todos los demás quedan con order:0 (default) */

/* Padding y margin balanceados — texto centrado entre el final del hero y la
   línea separadora, banner compacto. */
section.section-informative-banners,
.section-informative-banners {
  --kh-carbon: #1C1C1C;
  --kh-muted: #6B6B6B;
  --kh-line: #E8E2D6;
  --kh-blue: #0047BB;
  --kh-font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --kh-font-body: 'Noto Sans', system-ui, -apple-system, sans-serif;

  background: #fff;
  border-bottom: none;
  padding: 32px 0 !important;
  margin: 0 !important;
  /* z-index muy alto + isolation + transform para forzar a la sección a estar
     SIEMPRE arriba en stacking context. El hero tiene z-index alto y nos tapaba. */
  position: relative !important;
  z-index: 999 !important;
  isolation: isolate !important;
  transform: translateZ(0) !important;
  pointer-events: auto !important;
}

/* Forzar pointer-events: auto en TODOS los descendientes */
.section-informative-banners,
.section-informative-banners * {
  pointer-events: auto !important;
}

/* Asegurar que el hero NO tape la sección — z-index bajo en el hero */
.home-sections-container > .js-main-slider-section,
.home-sections-container > .section-slider-home {
  z-index: 1 !important;
}

/* Línea separadora full-width edge-to-edge (match handoff Claude Design) */
.section-informative-banners::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--kh-line);
}

/* El container solo controla el padding LATERAL (horizontal). El vertical
   ya lo da la sección directamente para evitar conflictos con Bootstrap. */
.section-informative-banners > .container {
  max-width: 1180px;
  padding: 0 24px !important;
}

.section-informative-banners > .container > .row,
.section-informative-banners > .container > .row > .col-12 {
  margin: 0;
  padding: 0;
}

/* ------------------------------------------------------------
   DESKTOP (default, ≥801px): Grid estático 3 columnas, títulos
   top-aligned, sin dots. Match handoff Komfy.

   MOBILE (≤800px, definido más abajo): Carousel horizontal con
   scroll-snap + dots clickeables. Match handoff Calm mobile.
   ------------------------------------------------------------ */
.section-informative-banners .kh-banners-track {
  overflow: visible;
  padding: 0 !important;
  width: 100% !important;
}

/* DESKTOP: grid 3 cols. Celdas top-aligned (align-items: start) y descripciones
   con min-height igual al alto de 2 líneas — así las 3 celdas tienen exactamente
   el mismo alto de contenido y los 3 títulos quedan en el mismo Y. */
.section-informative-banners .swiper-wrapper {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  transform: none !important;
  transition: none !important;
  align-items: start;
}

.section-informative-banners .swiper-slide {
  display: block !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  flex-shrink: 1 !important;
  align-self: start !important;
}

/* Esconder clones que Swiper inyecta con loop:true */
.section-informative-banners .swiper-slide-duplicate,
.section-informative-banners .swiper-slide-duplicate-prev,
.section-informative-banners .swiper-slide-duplicate-next {
  display: none !important;
}

/* Dots de paginación — escondidos en desktop */
.section-informative-banners .kh-benefits-dots {
  display: none;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
  padding: 0;
}

.section-informative-banners .kh-benefits-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d4d4d4;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
  flex-shrink: 0;
}

.section-informative-banners .kh-benefits-dot:hover {
  background: #a3a3a3;
}

.section-informative-banners .kh-benefits-dot.is-active {
  background: #F5C518;
  transform: scale(1.25);
}

/* ------------------------------------------------------------
   Cada item: centrado, sin íconos, tipografía Komfy
   ------------------------------------------------------------ */

/* Anular layout horizontal del item (.row no-gutters > col-auto + col) */
.section-informative-banners .swiper-slide .row.no-gutters {
  display: block;
  text-align: center;
  margin: 0;
}

/* Ocultar la columna del ícono — handoff Calm es solo texto */
.section-informative-banners .swiper-slide .row.no-gutters > .col-auto {
  display: none;
}

/* Columna del texto: full width, sin padding-left heredado */
.section-informative-banners .swiper-slide .row.no-gutters > .col {
  padding: 0 !important;
  flex: 1 1 100%;
  max-width: 100%;
}

.section-informative-banners .swiper-slide .align-item-middle {
  display: block;
}

/* Título — Barlow Condensed Bold 20px / line-height 1.5 / #1c1c1c.
   !important porque la <h3 class="h6 font-weight-bold"> hereda Lexend del
   theme via Bootstrap y nos pisa. Forzamos las 3 props clave. */
.section-informative-banners .swiper-slide h3,
.section-informative-banners .swiper-slide h3.h6 {
  font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--kh-carbon);
  margin: 0;
  text-transform: none;
}

/* Descripción — Noto Sans Regular 13.5px / line-height 1.5 / #6b6b6b / mt 8px.
   min-height: 40px ≈ 2 líneas → uniforma el alto de las 3 descripciones.
   Esto es lo que permite que los 3 títulos queden alineados al mismo Y
   (porque el bloque [título + descripción] tiene la misma altura siempre). */
.section-informative-banners .swiper-slide p,
.section-informative-banners .swiper-slide p.service-text {
  font-family: 'Noto Sans', system-ui, -apple-system, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  line-height: 1.5;
  color: var(--kh-muted);
  margin: 8px 0 0 0;
  min-height: 40px !important;
}

/* Si el item tiene link, no subrayar ni cambiar color heredado */
.section-informative-banners .swiper-slide a {
  color: inherit;
  text-decoration: none;
  display: block;
}

.section-informative-banners .swiper-slide a:hover h3 {
  color: var(--kh-blue);
}

/* ------------------------------------------------------------
   MOBILE (≤800px): carousel scroll-snap horizontal + dots amarillos.
   El JS de banner-services.tpl ya destruye Swiper.js, así que acá solo
   tenemos que decirle a la flexbox cómo comportarse.
   ------------------------------------------------------------ */
@media (max-width: 800px) {
  /* Mobile: margin chico desde hero + padding compacto adentro */
  section.section-informative-banners,
  .section-informative-banners {
    padding: 16px 0 !important;
    margin: 32px 0 0 !important;
  }

  .section-informative-banners > .container {
    padding: 0 16px !important;
  }

  .section-informative-banners .kh-banners-track {
    overflow: visible !important;
    width: 100% !important;
  }

  /* Wrapper: pasa de grid → flex horizontal con scroll-snap */
  .section-informative-banners .swiper-wrapper {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    align-items: flex-start !important;
  }

  .section-informative-banners .swiper-wrapper::-webkit-scrollbar {
    display: none;
  }

  /* Cada slide ocupa 100% del wrapper, sin padding lateral que recorte texto */
  .section-informative-banners .swiper-slide {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    align-self: flex-start !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
    display: block !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 !important;
    transform: none !important;
  }

  /* Refuerzo: contenido como block top-aligned (no flex centrado) */
  .section-informative-banners .swiper-slide .row.no-gutters,
  .section-informative-banners .swiper-slide .col,
  .section-informative-banners .swiper-slide .align-item-middle {
    display: block !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
    flex: none !important;
  }

  /* Título mobile — color negro forzado por TODOS los caminos posibles:
     color, -webkit-text-fill-color (que pisa cualquier text-fill aplicado
     por gradiente/transparente), text-stroke. */
  .section-informative-banners .swiper-slide h3,
  .section-informative-banners .swiper-slide h3.h6,
  .section-informative-banners .swiper-slide .h6 {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    position: relative !important;
    clip: auto !important;
    clip-path: none !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
    -webkit-text-stroke: 0 !important;
    text-align: center !important;
    text-indent: 0 !important;
    letter-spacing: normal !important;
    white-space: normal !important;
    word-spacing: normal !important;
    text-shadow: none !important;
    background: transparent !important;
    z-index: 2 !important;
    font-stretch: normal !important;
    font-style: normal !important;
    font-variant: normal !important;
  }
  .section-informative-banners .swiper-slide p,
  .section-informative-banners .swiper-slide p.service-text {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    position: static !important;
    transform: none !important;
    font-family: 'Noto Sans', system-ui, sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: #6B6B6B !important;
    margin: 8px 0 0 0 !important;
    padding: 0 !important;
    text-align: center !important;
  }

  /* Dots visibles solo en mobile */
  .section-informative-banners .kh-benefits-dots {
    display: flex;
    margin-top: 20px;
  }
}