/* HappyPlus Slider — frontend. Sin dependencias. */

.hps-slider {
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  max-width: 100%;
  outline: none;
  /* El dedo de costado lo maneja el JS (arrastre); el de arriba abajo lo
     sigue manejando el navegador, así la página scrollea normal. */
  touch-action: pan-y pinch-zoom;
}

.hps-slider:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* --- boxed: width/height fijos en px --- */
.hps-mode-boxed {
  width: var(--hps-w, 1200px);
}

.hps-mode-boxed .hps-viewport {
  height: var(--hps-h, 400px);
}

/* --- fluid: 100% del contenedor, alto por aspect-ratio --- */
.hps-mode-fluid {
  width: 100%;
}

.hps-mode-fluid .hps-viewport {
  aspect-ratio: var(--hps-ratio, auto);
}

.hps-viewport {
  position: relative;
  overflow: hidden;
  width: 100%;
}

/* Sin proporción fija el alto lo pone la imagen, y cada banner puede
   tener la suya. El JS le pasa al viewport el alto del slide que está a
   la vista; esto es para que el cambio acompañe al deslizamiento en vez
   de saltar. */
.hps-mode-fluid:not(.hps-fit-cover) .hps-viewport {
  transition: height 450ms cubic-bezier(0.4, 0, 0.2, 1);
}

.hps-track {
  display: flex;
  height: 100%;
  will-change: transform;
  transition: transform 450ms cubic-bezier(0.4, 0, 0.2, 1);
}

.hps-slide {
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
  height: 100%;
  position: relative;
}

/* Con el alto libre, un slide NO se estira hasta el más alto de la
   tanda: si lo hiciera, el más bajo mostraría su imagen arriba y una
   franja vacía abajo. Cada uno mide lo suyo y el viewport acompaña. */
.hps-mode-fluid:not(.hps-fit-cover) .hps-track {
  align-items: flex-start;
}

.hps-mode-fluid:not(.hps-fit-cover) .hps-slide {
  height: auto;
}

.hps-slide .hps-link {
  display: block;
  width: 100%;
  height: 100%;
}

.hps-picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hps-img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  /* Arrastrar de costado mueve el carrusel, no la imagen. */
  -webkit-user-drag: none;
  user-select: none;
}

/* --- Arte propio para mobile --------------------------------------------
   Las medidas que el navegador lee del <img> son las de la imagen de
   escritorio, y con ellas le da forma al hueco aunque el <source> le
   sirva otra imagen. Cuando el banner mobile tiene otra proporción, eso
   lo aplasta dentro de la forma del grande (y deja una franja blanca
   debajo, porque el slide de al lado mide bien). HPS_Render escribe las
   dos proporciones y acá cada pantalla toma la suya.

   El corte tiene que ser el mismo que HPS_Render::MOBILE_BREAKPOINT. */
.hps-picture--art .hps-img {
  aspect-ratio: var(--hps-desk, auto);
}

@media (max-width: 767px) {
  .hps-picture--art .hps-img {
    aspect-ratio: var(--hps-mob, auto);
  }
}

/* Cuando el alto está acotado (boxed o ratio fijo), recortamos. */
.hps-fit-cover .hps-img {
  object-fit: cover;
  object-position: center;
}

/* aspect_ratio = "auto": la imagen manda el alto. */
.hps-mode-fluid:not(.hps-fit-cover) .hps-img,
.hps-mode-fluid:not(.hps-fit-cover) .hps-picture {
  height: auto;
}

/* --- Flechas --- */
.hps-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition:
    opacity 200ms ease,
    background 200ms ease;
}

.hps-slider:hover .hps-arrow,
.hps-slider:focus-within .hps-arrow,
.hps-arrow:focus-visible {
  opacity: 1;
}

.hps-arrow:hover {
  background: rgba(0, 0, 0, 0.7);
}

.hps-prev {
  left: 12px;
}
.hps-next {
  right: 12px;
}

/* En touch no hay hover: mostramos siempre. */
@media (hover: none) {
  .hps-arrow {
    opacity: 1;
  }
}

/* --- Dots --- */
.hps-dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: 8px;
}

.hps-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition:
    background 200ms ease,
    transform 200ms ease;
}

.hps-dot.is-active {
  background: #fff;
  transform: scale(1.25);
}

@media (prefers-reduced-motion: reduce) {
  .hps-track,
  .hps-mode-fluid:not(.hps-fit-cover) .hps-viewport {
    transition: none;
  }
  .hps-dot {
    transition: none;
  }
}

/* ==========================================================================
   Bloque de imágenes (hpb)

   Dos disposiciones sobre el mismo marcado: grilla (por defecto) y
   carrusel. La cantidad por pantalla sale de --hpb-visibles, que Elementor
   escribe por breakpoint desde su control responsive — así los cortes son
   los mismos que usa el resto de la página, y no unos propios.
   ========================================================================== */
.hpb {
	position: relative;
	--hpb-gap: 12px;
	--hpb-radius: 10px;
}

.hpb-pista {
	display: grid;
	gap: var(--hpb-gap);
	grid-template-columns: 1fr;
}

.hpb .hps-img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--hpb-radius);
}

.hpb .hps-link,
.hpb .hps-picture {
	display: block;
}

/* Escritorio: cada layout abre sus columnas. En mobile quedan apiladas
   (la regla de arriba), que es lo que hace falta con piezas anchas. */
@media (min-width: 768px) {
	.hpb--medio  .hpb-pista { grid-template-columns: repeat(2, 1fr); }
	.hpb--tercio .hpb-pista { grid-template-columns: repeat(3, 1fr); }
	.hpb--cuarto .hpb-pista { grid-template-columns: repeat(4, 1fr); }
}

/* --- Carrusel ------------------------------------------------------------
   Sin librería: scroll horizontal con scroll-snap, que ya trae el arrastre
   con el dedo y con el trackpad gratis. El JS solo mueve las flechas.

   El ancho de cada celda sale de cuántas entran: se le restan los huecos y
   se reparte. --hpb-visibles lo pone Elementor por dispositivo. */
.hpb--carrusel .hpb-pista {
	display: flex;
	grid-template-columns: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.hpb--carrusel .hpb-pista::-webkit-scrollbar {
	display: none;
}

.hpb--carrusel .hpb-celda {
	flex: 0 0 calc(
		(100% - (var(--hpb-visibles, 1) - 1) * var(--hpb-gap)) /
		var(--hpb-visibles, 1)
	);
	scroll-snap-align: start;
}

.hpb-flecha {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--hpb-flecha-borde, #e5e5e5);
	border-radius: 50%;
	background: var(--hpb-flecha-fondo, #fff);
	color: var(--hpb-flecha-color, #222);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	transition: background-color .2s ease, opacity .2s ease;
}

.hpb-flecha:hover {
	background: var(--hpb-flecha-fondo-hover, #f4f4f4);
}

/* Al principio y al final, la flecha que no lleva a ningún lado se apaga
   en vez de desaparecer, para que el carrusel no se mueva de lugar. */
.hpb-flecha[disabled] {
	opacity: .35;
	cursor: default;
	pointer-events: none;
}

.hpb-prev { left: -6px; }
.hpb-next { right: -6px; }

/* --- Mosaico -------------------------------------------------------------
   La única composición donde la imagen NO manda sobre la forma: cada
   baldosa tiene su proporción fija y la imagen la llena recortando lo que
   sobra. Son las medidas que el panel le pide al cliente para cada
   posición, así que cambiarlas descuadra la pieza.
   2 columnas en mobile, 6 en escritorio. Nunca se convierte en carrusel. */
.hpb--mosaico .hpb-pista {
	grid-template-columns: repeat(2, 1fr);
}

.hpb--mosaico .hpb-celda {
	position: relative;
	overflow: hidden;
	border-radius: var(--hpb-radius);
}

.hpb--mosaico .hps-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

.hpb--mosaico .hps-link,
.hpb--mosaico .hps-picture {
	display: block;
	height: 100%;
}

.hpb--mosaico .hpb-celda--1,
.hpb--mosaico .hpb-celda--2 { grid-column: span 2; aspect-ratio: 760 / 250; }
.hpb--mosaico .hpb-celda--3 { grid-column: span 2; aspect-ratio: 640 / 814; }
.hpb--mosaico .hpb-celda--4,
.hpb--mosaico .hpb-celda--5 { grid-column: span 1; aspect-ratio: 640 / 392; }
.hpb--mosaico .hpb-celda--6 { grid-column: span 2; aspect-ratio: 1024 / 310; }

@media (min-width: 768px) {
	.hpb--mosaico .hpb-pista { grid-template-columns: repeat(6, 1fr); }

	.hpb--mosaico .hpb-celda--1,
	.hpb--mosaico .hpb-celda--2 { grid-column: span 3; }

	/* Ocupa dos filas al costado de las celdas 4 y 5. El alto se lo dan
	   ellas, por eso acá se suelta la proporción. */
	.hpb--mosaico .hpb-celda--3 {
		grid-column: span 2;
		grid-row: span 2;
		aspect-ratio: auto;
		height: 100%;
	}

	.hpb--mosaico .hpb-celda--4,
	.hpb--mosaico .hpb-celda--5 { grid-column: span 2; }
	.hpb--mosaico .hpb-celda--6 { grid-column: span 4; }
}