:root {
  --slider-height: 340px; /* altura de las slides */
	--slider-padding: 40px;
	--slider-border-left-width: 50px;
	--slider-border-left-blanco: 10px;
	--slider-cartel-height: 260px;
	--slider-cartel-padding: 0 10px;
}

#wb5-slider {
  width: 100%;
	margin: 0px auto 40px auto;
  position: relative;
  height: var(--slider-height);
}

.wb5-slides {
	display: flex;
	transition: none;
	position: relative; /* Necesario para que las .slide absolutely positioned se posicionen respecto a este */
	overflow: hidden;
	height: var(--slider-height);
}

.wb5-slide {
  width: 100%;
  flex-shrink: 0;
  padding: 0;
  background-color: #fff;
  text-align: center;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms ease-in-out, visibility 300ms ease-in-out;
}

.wb5-slide > * {
  height: 100%;
}

.wb5-slide.active {
  opacity: 1;
  visibility: visible;
  position: relative;
  z-index: 1;
}


/* ----------------------------------------
  Botones de navegación
---------------------------------------- */
.wb5-slider-nav-buttons {
	position: absolute;
	top: 50%;
	width: 100%;
	display: flex;
	justify-content: space-between;
	transform: translateY(-50%);
	opacity: 0;
	transition: opacity 0.3s ease;
	z-index: 10;

	pointer-events: auto;
}

.wb5-slider-nav-buttons button {
  background: rgba(0, 0, 0, 0.3);
  border: none;
  color: white;
  width: 44px;
  height: 44px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
  margin: 5px;
}

.wb5-slider-nav-left svg {
  transform: translateX(-2px);
}

.wb5-slider-nav-right svg {
  transform: translateX(1px);
}






#wb5-slider:hover .wb5-slider-nav-buttons {
	opacity: 1;
}



/* ----------------------------------------
  Controles de reproducción 
 ---------------------------------------- */
.wb5-slider-play-controls {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	margin-top: 15px;
	}
	
.autoplay-symbol {
	font-size: 17px;
	color: #bbb;
	cursor: pointer;
	user-select: none;
	transition: color 0.3s ease, transform 0.2s ease;
	line-height: 0;
	padding-right:10px;
}

.autoplay-symbol:hover {
	color: #333;
	transform: scale(1.0);
}

/* ----------------------------------------
   Puntos indicadores
---------------------------------------- */
.wb5-slider-dot {
	width: 12px;
	height: 12px;
	border: 2px solid #999;
	border-radius: 50%;
	background-color: transparent;
	cursor: pointer;
	transition: background-color 0.3s ease, transform 0.2s ease;
}

.wb5-slider-dot.active {
	background-color: #666;
}

.wb5-slider-dot:hover {
	background-color: #ffcc00;
	transform: scale(1.2);
}



/* ----------------------------------------
Temas para las slides
---------------------------------------- */

/* Bordes izquierdos */

.br-y { border-left: solid var(--slider-border-left-width) var(--color-rediris-amarillo); }
.br-g { border-left: solid var(--slider-border-left-width) var(--color-rediris-verde); }
.br-wg { border-left: solid var(--slider-border-left-width) var(--color-rediris-gris); }

/* Fondos */

.bg-g {
	background: #008495;
}
.bg-g.br-y,
.bg-g.br-g,
.bg-g.br-wg {
	background: linear-gradient(to right, #ffffff 0 var(--slider-border-left-blanco), #008495 var(--slider-border-left-blanco) 100%);
}

.bg-y {
	background: var(--color-rediris-amarillo);
}
.bg-y.br-y,
.bg-y.br-g,
.bg-y.br-wg {
	background: linear-gradient(to right, #ffffff 0 var(--slider-border-left-blanco), var(--color-rediris-amarillo) var(--slider-border-left-blanco) 100%);
}

.bg-wg {
	background: var(--color-rediris-gris);
}
.bg-wg.br-y,
.bg-wg.br-g,
.bg-wg.br-wg {
	background: linear-gradient(to right, #ffffff 0 var(--slider-border-left-blanco), var(--color-rediris-gris) var(--slider-border-left-blanco) 100%);
}


.bg-degradado {
	background: linear-gradient(165deg, #008495 40%, #79b1b9 60%, #008495 80%);
}
.bg-degradado.br-y ,
.bg-degradado.br-g ,
.bg-degradado.br-wg {
  background: 
		linear-gradient(90deg, #ffffff 0 var(--slider-border-left-blanco), transparent var(--slider-border-left-blanco) ), 
		linear-gradient(165deg, #008495 40%, #79b1b9 60%, #008495 80%);
}
.bg-logopuentes::before {
	content: "";
	position: absolute;
	bottom: 0;
	right: 0;
	background-image: url('/assets/wbb5/mm/bg-logopuentes.svg');
	background-repeat: no-repeat;
	background-size: 300px 300px;
	width: 225px;
	height: 200px;
	z-index: 0;
}

/* Tema a1-texto-cartel */

.wb5-slide-theme-a1-texto-cartel {
	padding: var(--slider-padding);
  display: flex;
  justify-content: space-between;
  align-items: center; 
  position: relative;  /* necesario para posicionar el botón */
  height: var(--slider-height);
}

.wb5-slide-theme-a1-texto-cartel.br-y,
.wb5-slide-theme-a1-texto-cartel.br-g,
.wb5-slide-theme-a1-texto-cartel.br-wg {
  padding-left: calc( var(--slider-padding) + var(--slider-border-left-blanco) ); 
}

.a1-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* texto arriba, botón abajo */
  flex: 1;
  height: 100%; /* para que el botón se alinee abajo */
  margin-right: 20px; 
}
.a1-right {
}

.a1-texto {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.w71 {
	width: 71%;
}

.a1-title {
	font-weight: bold;
	line-height: 1.3em;
  color: white;
  font-size: clamp(1.2em, 2.5vw, 2.1em) !important;
  text-align: left;
  margin: 0 0 10px 0;
	z-index: 1;
}

.a1-description {
	color: white;
	text-align: left;
	margin: 10px 0 10px 0;
  font-size: clamp(1.0em, 1.8vw, 1.9em) !important;
}

.a1-cartel {
	position: relative;
  height: 100%;
  max-height: var(--slider-cartel-height);
  height: auto;
	object-fit: contain;
	padding: var(--slider-cartel-padding);
	transition: max-width 0.3s ease;
	z-index: 20;
}

#wbb5-content-body a.nohover:hover,
#wbb5-content-body a.nohover:focus {
  background-color: transparent !important;
}

.a1-boton {
	align-self: flex-start;
	z-index:20;
}

#wb5-slider > * .a1-boton .wb5-slide-boton {
	display: inline-block;
	text-decoration: none !important;
	padding: 12px 20px !important;
	border-radius: 6px !important;
	font-weight: bold !important;
	font-size: clamp(1em, 2.2vw, 1.1em) !important;
	transition: background-color 0.3s ease, color 0.3s ease !important;
	color: #006272 !important;
	background-color: #fdfdfd !important;
}

#wb5-slider > * .a1-boton .wb5-slide-boton:hover {
	background-color: #ffd700 !important;
	color: #666 !important;
	text-decoration: none !important;
	transform: scale(1.02);
}

/* ----------------------------------------
  Responsive
---------------------------------------- */

/* max-width: 1200px */

@media (max-width: 1200px) {
  :root {
		--slider-border-left-width: 40px;
	}
}


/* max-width: 1000px */

@media (max-width: 1000px) {
  :root {
		--slider-cartel-height: 220px;
	}
}

/* max-width: 749px */

@media (max-width: 749px) {
  :root {
    --slider-height: 275px;
		--slider-padding: 30px;
		--slider-border-left-width: 30px;
		--slider-cartel-height: 180px;
		--slider-cartel-padding: 0px;
  }

	.bg-logopuentes::before {
 		background-size: 250px 250px;
 		width: 190px;
 		height: 160px;
 	}

	#wb5-slider > * .a1-boton .wb5-slide-boton {
  	padding: 10px 12px !important;
  	font-size: clamp(0.9em, 2.2vw, 1.1em) !important;
	}

	.a1-description {
		margin: 0px 0 4px 0;
	}
}

/* max-width: 600px */
	
@media (max-width: 600px) {

  :root {
    --slider-height: 225px;
  	--slider-padding: 20px;
		--slider-border-left-width: 10px;
		--slider-border-left-blanco: 5px;
		--slider-cartel-height: 130px;
  }

	.a1-description {
  	font-size: clamp(0.9em, 1.8vw, 1.9em) !important;
	}

	.bg-logopuentes::before {
 		background-size: 210px 210px;
 		width: 160px;
 		height: 125px;
 	}

	.w71 {
		width:100%;
	}
	
	#wb5-slider > * .a1-boton .wb5-slide-boton {
  	padding: 8px 10px !important;
  	font-size: clamp(0.9em, 2.2vw, 1.1em) !important;
	}

	/* Botones laterales de navegación algo más pequeños */

  .wb5-slider-nav-buttons button {
    width: 36px;
    height: 36px;
  }

  .wb5-slider-nav-buttons button svg {
    width: 30px;
    height: 30px;
  }

  .wb5-slider-nav-left svg {
    transform: translateX(-1px);
  }

  .wb5-slider-nav-right svg {
    transform: translateX(1px);
  }


}

/* max-width: 500px */

@media (max-width: 500px) {
  :root {
    --slider-height: 260px;
		--slider-cartel-height: 100px;
  }
}

/* max-width: 375px */

@media (max-width: 375px) {
  :root {
		--slider-cartel-height: 0px;
  }
}