/* Carrusel de tatuadores — estilo del Figma: banda blanca sobre la foto con la esquina de
   abajo a la derecha redondeada, línea a la derecha de cada tarjeta y puntos a la derecha. */

.artistas-carrusel { position: relative; background: none; }
/* nada pinta fondo detrás de las fotos: lo único opaco es la banda del nombre */
.artista-card, .artistas-track { background: none; }

.artistas-track {
	display: flex;
	gap: 14px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.artistas-track::-webkit-scrollbar { display: none; }

/* cuántas se ven a la vez lo decide --pb-vis (atributo del shortcode) */
.artista-card {
	position: relative;
	flex: 0 0 calc((100% - (var(--pb-vis, 4) - 1) * 14px) / var(--pb-vis, 4));
	scroll-snap-align: start;
	display: block;
	text-decoration: none;
}

.artista-card img {
	width: 100%;
	height: 520px;   /* verticales, no cuadradas */
	object-fit: cover;
	object-position: center 25%;
	display: block;
}

/* banda blanca con el nombre y, si la hay, la descripción.
   Va superpuesta sobre la foto y despegada del fondo, para que quede un trozo de foto
   por debajo: arriba recta y con la esquina de abajo a la derecha redondeada. */
.artista-datos {
	position: absolute;
	left: 0;
	/* misma separación abajo que a la derecha, para que la barra no vaya a topar con
	   el borde de la foto. Va en una variable porque los dos valores tienen que ir
	   siempre juntos: cambiar solo uno descuadra la tarjeta. */
	right: var(--pb-datos-sep, 8px);
	bottom: var(--pb-datos-sep, 8px);
	background: #ffffff;
	padding: 1.05em 1.3em;
	border-radius: 0 0 38px 0;
	transition: background .2s ease;
}
.artista-nombre {
	display: block;
	color: #222422;
	font-family: orbitron, "Orbitron", sans-serif;
	font-weight: 700;
	font-size: .95rem;
	letter-spacing: .04em;
	line-height: 1.2;
}
.artista-desc {
	display: block;
	margin-top: .35em;
	color: #5b5b5b;
	font-size: .82rem;
	line-height: 1.35;
}
.artista-card:hover .artista-datos { background: #4085F4; }
.artista-card:hover .artista-nombre { color: #ffffff; }
.artista-card:hover .artista-desc   { color: rgba(255, 255, 255, .85); }

/* los puntos, alineados a la derecha */
.artistas-puntos {
	display: flex;
	justify-content: flex-end;
	gap: 9px;
	margin-top: 1.6em;
}
.artistas-puntos[hidden] { display: none; }
.artistas-punto {
	width: 10px; height: 10px;
	padding: 0; border: 0; border-radius: 50%;
	background: rgba(255, 255, 255, .3);
	cursor: pointer;
	transition: background .2s ease;
}
.artistas-punto.is-activa { background: #4085F4; }
.artistas-punto:hover     { background: rgba(255, 255, 255, .6); }

@media (max-width: 1100px) { .artistas-carrusel { --pb-vis: 2; } }
@media (max-width: 680px)  {
	.artistas-carrusel { --pb-vis: 1; }
	.artista-card { flex-basis: 82%; }
	.artista-card img { height: 420px; }
}

/* ---------------------------------------------------------------------------
   Modo galería: [pb_carrusel_artistas modo="galeria"]
   Las mismas tarjetas, pero en rejilla fija en vez de tira que se desplaza. Se usa
   donde se ve el equipo entero de golpe (la página de Artistas), no como reclamo.
   --------------------------------------------------------------------------- */

.artistas-galeria {
	display: grid;
	grid-template-columns: repeat(var(--pb-vis, 4), minmax(0, 1fr));
	gap: 14px;
	background: none;
}

/* la tarjeta es la misma, pero aquí la coloca la rejilla y no el flex del slider */
.artistas-galeria .artista-card {
	flex: none;
	scroll-snap-align: none;
}

@media (max-width: 1100px) {
	.artistas-galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
	.artistas-galeria { grid-template-columns: 1fr; }
}


/* ---------------------------------------------------------------------------
   Flechas a los lados
   Los puntos quedan abajo del todo y con cuatro tarjetas a la vista no se ve que
   aquello pasa: las flechas lo dejan claro. Se ocultan cuando no hay a dónde ir.
   --------------------------------------------------------------------------- */

.artistas-flecha {
	position: absolute;
	top: calc(50% - 2.4em);        /* centrada en la foto, descontando la banda del nombre */
	transform: translateY(-50%);
	z-index: 2;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 50%;
	background: rgba(0, 0, 0, .45);
	cursor: pointer;
	transition: background .2s ease, border-color .2s ease, opacity .2s ease, transform .2s ease;
}
.artistas-flecha::before {
	content: "";
	position: absolute;
	top: 50%; left: 50%;
	width: 10px; height: 10px;
	border-top: 2px solid #ffffff;
	border-right: 2px solid #ffffff;
}
.artistas-prev { left: -10px; }
.artistas-next { right: -10px; }
.artistas-next::before { transform: translate(-60%, -50%) rotate(45deg); }
.artistas-prev::before { transform: translate(-40%, -50%) rotate(-135deg); }

.artistas-flecha:hover        { background: rgba(0, 0, 0, .75); border-color: #ffffff; }

/* El tema levanta un pelín TODOS los botones al pasar el ratón, con
   `button:hover { transform: translateY(-1px) }`. Aquí el transform es lo que centra
   la flecha sobre la foto, así que esa regla se lo comía y la flecha pegaba un salto
   hacia abajo de media altura. Se redefine conservando el centrado y sumándole la
   elevación de 1px, que así sí se aprecia como el resto de botones del sitio. */
.artistas-flecha:hover,
.artistas-flecha:focus,
.artistas-flecha:active { transform: translateY(calc(-50% - 1px)); }
.artistas-flecha:focus-visible { outline: 2px solid #4085F4; outline-offset: 2px; }

/* al principio y al final no hay a dónde seguir */
.artistas-flecha[disabled] { opacity: 0; pointer-events: none; }

@media (max-width: 680px) {
	.artistas-flecha { width: 38px; height: 38px; }
	.artistas-prev { left: 2px; }
	.artistas-next { right: 2px; }
}