/**
 * Slider principal del home – diseño unificado
 * Anula estilos de la plantilla (styles.css) y de Slick solo para .home-slider.
 * No editar styles.css para este slider; ajustar aquí o en las variables.
 */

.home-slider {
  --home-slider-infor-padding-x: 1.5rem;
  --home-slider-infor-padding-y: 2rem;
  --home-slider-infor-margin-arrows: 70px; /* margen para no quedar bajo las flechas */
  --home-slider-title-big-size: 1.25rem;   /* descripción: tamaño contenido */
  --home-slider-title-small-size: 1rem;    /* título: más visible y proporcional */
  --home-slider-title-small-line-height: 1.3;
  --home-slider-title-big-line-height: 1.45;
  --home-slider-arrow-size: 52px;
  --home-slider-dots-bottom: 20px;
}

/* Reset y contenedor */
.home-slider.style1,
.home-slider.fullwidth {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: none !important;
}

.home-slider .slider-owl {
  margin: 0 !important;
  padding: 0 !important;
  position: relative;
  width: 100%;
}

/* Un solo slide visible: list con ancho fijo y overflow hidden */
.home-slider .slider-owl .slick-list,
.home-slider .slider-owl .slick-track {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

.home-slider .slider-owl .slick-slider {
  width: 100% !important;
  display: block !important;
}

.home-slider .slider-owl .slick-list {
  display: block !important;
  width: 100% !important;
  overflow: hidden !important;
}

/* Track en fila: evita que los slides se apilen hacia abajo */
.home-slider .slider-owl .slick-track {
  display: block !important;
  white-space: nowrap !important;
}

/* Slides en línea (inline-block) para que nunca se apilen; el ancho lo pone Slick por JS */
.home-slider .slider-owl .slick-slide {
  display: inline-block !important;
  float: none !important;
  vertical-align: top !important;
  white-space: normal !important;
  height: auto !important;
  clear: none !important;
}

.home-slider .slider-owl .slick-slide > div {
  height: auto !important;
  display: block !important;
}

.home-slider .slider-item {
  height: auto !important;
}

/* Contenedor del slide: ancho 100% del slide, altura = imagen */
.home-slider .slider-item .slider-inner {
  position: relative;
  width: 100%;
  display: block;
}

/* Imagen: ocupa todo el ancho del slide (1 imagen por slide, sin repetir) */
.home-slider .slider-item .slider-inner .home-slider-img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: middle;
}

/* Overlay de texto encima de la imagen: flex para alinear left/center/right y contenido en columna */
.home-slider .slider-item .slider-inner .slider-infor,
.home-slider .slider-item .slider-inner .slider-infor-wrap {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  pointer-events: none;
  box-sizing: border-box;
}

/* Alineación horizontal del bloque + inset para no quedar bajo las flechas (left/right fijos) */
body.home .home-slider .slider-item .slider-inner .slider-infor.align-left,
body .home-slider .slider-item .slider-inner .slider-infor-wrap.align-left,
.home-slider .slider-item .slider-inner .slider-infor.align-left,
.home-slider .slider-item .slider-inner .slider-infor-wrap.align-left {
  justify-content: flex-start;
  left: var(--home-slider-infor-margin-arrows) !important;
  right: var(--home-slider-infor-margin-arrows) !important;
}
body.home .home-slider .slider-item .slider-inner .slider-infor.align-center,
body .home-slider .slider-item .slider-inner .slider-infor-wrap.align-center,
.home-slider .slider-item .slider-inner .slider-infor.align-center,
.home-slider .slider-item .slider-inner .slider-infor-wrap.align-center {
  justify-content: center;
  left: var(--home-slider-infor-margin-arrows) !important;
  right: var(--home-slider-infor-margin-arrows) !important;
}
body.home .home-slider .slider-item .slider-inner .slider-infor.align-right,
body .home-slider .slider-item .slider-inner .slider-infor-wrap.align-right,
.home-slider .slider-item .slider-inner .slider-infor.align-right,
.home-slider .slider-item .slider-inner .slider-infor-wrap.align-right {
  justify-content: flex-end;
  left: var(--home-slider-infor-margin-arrows) !important;
  right: var(--home-slider-infor-margin-arrows) !important;
}

.home-slider .slider-item .slider-inner .slider-infor {
  pointer-events: auto;
}

.home-slider .slider-item .slider-inner .slider-infor-wrap .slider-infor {
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  pointer-events: auto;
}

/* Fullwidth: el .container no ocupa todo el ancho para que la alineación (left/center/right) funcione */
.home-slider.fullwidth .slider-infor-wrap.container {
  width: auto;
  max-width: 100%;
}

/* Bloque de texto: en columna (título, texto y botón en líneas separadas); position: absolute para overlay sobre la imagen */
.home-slider .slider-item .slider-inner .slider-infor {
  padding: var(--home-slider-infor-padding-y) var(--home-slider-infor-padding-x) !important;
  position: absolute;
  z-index: 1;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  max-width: 90%;
}

/* Alineación: el bloque mantiene columna pero se posiciona left/center/right */
.home-slider .slider-item .slider-inner .slider-infor.align-center {
  align-items: center;
  text-align: center;
}
.home-slider .slider-item .slider-inner .slider-infor.align-right {
  align-items: flex-end;
  text-align: right;
}

.home-slider .slider-item .slider-inner .slider-infor-wrap.align-center .slider-infor {
  align-items: center;
  text-align: center;
}
.home-slider .slider-item .slider-inner .slider-infor-wrap.align-right .slider-infor {
  align-items: flex-end;
  text-align: right;
}

/* Tipografía base: respetar mayúsculas/minúsculas del CMS (anula theme .slider-item .title-small { text-transform: uppercase }) */
.home-slider .slider-item .title-small,
.home-slider .slider-item .title-big {
  text-transform: none !important;
  font-variant: normal !important;
}

.home-slider .slider-item .title-small {
  font-size: var(--home-slider-title-small-size);
  line-height: var(--home-slider-title-small-line-height);
  margin-bottom: 0.35rem;
  display: block;
  width: 100%;
  font-weight: 600;
  letter-spacing: normal !important;
}

.home-slider .slider-item .title-big {
  font-size: var(--home-slider-title-big-size);
  line-height: var(--home-slider-title-big-line-height);
  max-width: 100%;
  margin-bottom: 0.75rem;
  display: block;
  font-weight: 500;
}

.home-slider .slider-item .slider-infor .button {
  margin-top: 0.5rem;
  display: inline-block;
}

/* Flechas: siempre visibles y clicables */
.home-slider .slider-owl .slick-slider.nav-center > .slick-arrow,
.home-slider .slider-owl .slick-prev,
.home-slider .slider-owl .slick-next {
  z-index: 20;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  width: var(--home-slider-arrow-size) !important;
  height: var(--home-slider-arrow-size) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: #fff !important;
  border-radius: 50%;
  opacity: 1;
  visibility: visible;
  cursor: pointer;
  pointer-events: auto;
  transition: opacity 0.3s ease, left 0.3s ease, right 0.3s ease;
}

.home-slider:hover .slider-owl .slick-slider.nav-center > .slick-arrow,
.home-slider:hover .slider-owl .slick-prev,
.home-slider:hover .slider-owl .slick-next {
  opacity: 1;
}

.home-slider .slider-owl .slick-arrow::before {
  display: none !important;
}

.home-slider .slider-owl .slick-arrow svg {
  margin: 0;
  flex-shrink: 0;
}

.home-slider .slider-owl .slick-prev {
  left: 30px !important;
  right: auto !important;
}

.home-slider .slider-owl .slick-next {
  right: 30px !important;
  left: auto !important;
}

.home-slider:hover .slider-owl .slick-prev {
  left: 15px !important;
}

.home-slider:hover .slider-owl .slick-next {
  right: 15px !important;
}

/* Dots: siempre visibles y clicables (el click va en el botón) */
.home-slider .container > .slick-dots,
.home-slider.style1 > .slick-dots,
.home-slider.fullwidth > .slick-dots {
  bottom: var(--home-slider-dots-bottom) !important;
}

.home-slider .slider-owl .slick-dots,
.home-slider .slider-owl .slick-slider .slick-dots {
  position: absolute !important;
  bottom: var(--home-slider-dots-bottom) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 30;
  display: block !important;
  pointer-events: auto;
}

/* Una sola capa visual: styles.css pinta el <li> (#ccc) y slick-theme el button:before ('•') → doble punto */
.home-slider .slider-owl .slick-dots li,
.home-slider .slider-owl .slick-slider .slick-dots li {
  display: inline-block !important;
  position: relative !important;
  pointer-events: auto;
  width: 12px !important;
  height: 12px !important;
  margin: 0 6px !important;
  padding: 0 !important;
  vertical-align: middle !important;
  background-color: transparent !important;
  border: none !important;
  font-size: 0 !important;
}

.home-slider .slider-owl .slick-dots li.slick-active,
.home-slider .slider-owl .slick-slider .slick-dots li.slick-active {
  background-color: transparent !important;
  border-color: transparent !important;
  width: 24px !important;
  height: 12px !important;
}

/* Botón del dot: customPaging; cubre el li para el click */
.home-slider .slider-owl .slick-dots li button,
.home-slider .slider-owl .slick-slider .slick-dots li button,
.home-slider .slider-owl .slick-dots li .home-slider-dot-btn,
.home-slider .slider-owl .slick-slider .slick-dots li .home-slider-dot-btn {
  display: block !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 24px !important;
  min-height: 24px !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  font-size: 0 !important;
  color: transparent !important;
}

/* Quitar bullet de slick-theme (no usar :before como punto) */
.home-slider .slider-owl .slick-dots li button:before,
.home-slider .slider-owl .slick-dots li .home-slider-dot-btn:before,
.home-slider .slider-owl .slick-slider .slick-dots li button:before,
.home-slider .slider-owl .slick-slider .slick-dots li .home-slider-dot-btn:before {
  content: none !important;
  display: none !important;
}

/* Punto único: solo ::after en el botón */
.home-slider .slider-owl .slick-dots li .home-slider-dot-btn::after,
.home-slider .slider-owl .slick-slider .slick-dots li .home-slider-dot-btn::after {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background-color: rgba(0, 0, 0, 0.28);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.45);
  pointer-events: none;
  transition: width 0.2s ease, height 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.home-slider .slider-owl .slick-dots li.slick-active .home-slider-dot-btn::after,
.home-slider .slider-owl .slick-slider .slick-dots li.slick-active .home-slider-dot-btn::after {
  width: 18px;
  height: 8px;
  border-radius: 999px;
  background-color: var(--primary-color, #111827);
  box-shadow: none;
}

/* ----- Breakpoints: texto y padding ----- */

/* Tablet: 768px – 1199px */
@media (min-width: 768px) {
  .home-slider {
    --home-slider-infor-padding-x: 2rem;
    --home-slider-infor-padding-y: 2.5rem;
    --home-slider-title-big-size: 1.375rem;
    --home-slider-title-small-size: 1.125rem;
  }
}

/* Desktop: ≥ 1200px */
@media (min-width: 1200px) {
  .home-slider {
    --home-slider-infor-padding-x: 3rem;
    --home-slider-infor-padding-y: 3rem;
    --home-slider-title-big-size: 1.5rem;
    --home-slider-title-small-size: 1.25rem;
  }
}

/* ----- Móvil: altura más cuadrada y imagen tipo cover ----- */
@media (max-width: 767px) {
  .home-slider {
    /* Interlineado más compacto (antes 1.4/1.55 se veía muy separado) */
    --home-slider-title-small-line-height: 1.15;
    --home-slider-title-big-line-height: 1.2;
  }

  .home-slider .slider-item .title-small {
    margin-top: 0;
    margin-bottom: 0.2rem;
  }

  .home-slider .slider-item .title-big {
    margin-top: 0;
    margin-bottom: 0.45rem;
  }

  /* CMS suele meter <p> en la descripción: anular márgenes de párrafo que abren mucho el bloque */
  .home-slider .slider-item .title-big p,
  .home-slider .slider-item .title-big div {
    margin: 0 0 0.2em 0 !important;
    line-height: 1.2 !important;
  }
  .home-slider .slider-item .title-big p:last-child,
  .home-slider .slider-item .title-big div:last-child {
    margin-bottom: 0 !important;
  }
  .home-slider .slider-item .title-big br + br {
    display: none;
  }

  /* Descripción: sombra más ligera en móvil (menos “borroso”) */
  .home-slider .slider-infor .title-big {
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2) !important;
  }

  /* Gana a NormalSlider inline (line-height 1.35 fijo en style1/fullwidth) */
  .home-slider.style1 .slider-infor .title-big,
  .home-slider.fullwidth .slider-infor .title-big {
    line-height: var(--home-slider-title-big-line-height) !important;
  }
  .home-slider.style1 .slider-infor .title-small,
  .home-slider.fullwidth .slider-infor .title-small {
    line-height: var(--home-slider-title-small-line-height) !important;
  }

  .home-slider .slider-owl .slick-slider.nav-center > .slick-arrow {
    display: none !important;
  }

  /* En móvil sin flechas: overlay sin inset (vuelve a left/right 0) */
  .home-slider .slider-item .slider-inner .slider-infor.align-left,
  .home-slider .slider-item .slider-inner .slider-infor-wrap.align-left,
  .home-slider .slider-item .slider-inner .slider-infor.align-center,
  .home-slider .slider-item .slider-inner .slider-infor-wrap.align-center,
  .home-slider .slider-item .slider-inner .slider-infor.align-right,
  .home-slider .slider-item .slider-inner .slider-infor-wrap.align-right {
    left: 1rem !important;
    right: 1rem !important;
  }

  /* Altura en móvil: menos alta para que el cover muestre más contenido (menos recorte) */
  body.home .home-slider .slider-owl .slick-list,
  .home-slider .slider-owl .slick-list,
  .home-slider.style1 .slider-owl .slick-list,
  .home-slider.fullwidth .slider-owl .slick-list {
    height: 62vw !important;
    min-height: 260px !important;
    max-height: 62vw !important;
  }

  body.home .home-slider .slider-owl .slick-slide,
  body.home .home-slider .slider-item .slider-inner,
  .home-slider .slider-owl .slick-slide,
  .home-slider .slider-owl .slick-slide > div,
  .home-slider .slider-item,
  .home-slider .slider-item .slider-inner {
    height: 62vw !important;
    min-height: 260px !important;
  }

  /* Cover centrado: se ve más contenido y el centro de la imagen queda en el centro del marco */
  body.home .home-slider .slider-item .slider-inner .home-slider-img,
  .home-slider .slider-item .slider-inner .home-slider-img {
    width: 100% !important;
    height: 100% !important;
    min-height: 260px !important;
    object-fit: cover !important;
    object-position: 50% 50% !important;
  }
}

/* Telefonos pequenos: mas alto, texto con mas ancho util y CTA visible */
@media (max-width: 420px) {
  .home-slider {
    --home-slider-title-small-size: 1rem;
    --home-slider-title-big-size: 1.95rem;
    --home-slider-title-small-line-height: 1.1;
    --home-slider-title-big-line-height: 1.15;
    --home-slider-infor-padding-x: 0.45rem;
    --home-slider-infor-padding-y: 0.9rem;
  }

  .home-slider .slider-item .slider-inner .slider-infor.align-left,
  .home-slider .slider-item .slider-inner .slider-infor-wrap.align-left,
  .home-slider .slider-item .slider-inner .slider-infor.align-center,
  .home-slider .slider-item .slider-inner .slider-infor-wrap.align-center,
  .home-slider .slider-item .slider-inner .slider-infor.align-right,
  .home-slider .slider-item .slider-inner .slider-infor-wrap.align-right {
    left: 0.5rem !important;
    right: 0.5rem !important;
  }

  .home-slider .slider-item .slider-inner .slider-infor,
  .home-slider .slider-item .slider-inner .slider-infor-wrap .slider-infor {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: flex-start !important;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    gap: 0.35rem;
  }

  .home-slider .slider-item .slider-inner .slider-infor .button {
    margin-top: 0.25rem;
  }

  body.home .home-slider .slider-owl .slick-list,
  .home-slider .slider-owl .slick-list,
  .home-slider.style1 .slider-owl .slick-list,
  .home-slider.fullwidth .slider-owl .slick-list {
    height: 90vw !important;
    min-height: 340px !important;
    max-height: 420px !important;
  }

  body.home .home-slider .slider-owl .slick-slide,
  body.home .home-slider .slider-item .slider-inner,
  .home-slider .slider-owl .slick-slide,
  .home-slider .slider-owl .slick-slide > div,
  .home-slider .slider-item,
  .home-slider .slider-item .slider-inner {
    height: 90vw !important;
    min-height: 340px !important;
    max-height: 420px !important;
  }

  body.home .home-slider .slider-item .slider-inner .home-slider-img,
  .home-slider .slider-item .slider-inner .home-slider-img {
    min-height: 340px !important;
    object-position: 60% 50% !important;
  }
}