/* ---------------------------------------------------------------
   Carrusel de fotos
   Lo usan la plantilla Programas de intercambio y el bloque
   «Carrusel de imágenes» de las páginas interiores (inc/carrusel.php).
   --------------------------------------------------------------- */

.lm-carrusel-fotos{position:relative}
.lm-carrusel-fotos__ventana{border-radius:10px;overflow:hidden}
.lm-carrusel-fotos__pista{
	list-style:none;margin:0;padding:0;
	display:flex;
	transition:transform .55s cubic-bezier(.4,0,.2,1);
	will-change:transform;
}
.lm-carrusel-fotos__foto{flex:0 0 100%;min-width:0}
.lm-carrusel-fotos__img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}

/* Flechas a los lados, sobre la foto. */
.lm-carrusel-fotos__flecha{
	position:absolute;top:50%;transform:translateY(-50%);
	width:56px;height:56px;padding:0;border:0;border-radius:0;cursor:pointer;
	background:none;color:#fff;
	display:flex;align-items:center;justify-content:center;
	opacity:0;transition:opacity .2s ease,transform .2s ease;
	filter:drop-shadow(0 2px 6px rgba(0,0,0,.45));
}
.lm-carrusel-fotos__flecha svg{width:46px;height:46px;stroke-width:1.75}
.lm-carrusel-fotos__flecha:hover{background:none}
.lm-carrusel-fotos__flecha--prev{left:4px}
.lm-carrusel-fotos__flecha--next{right:4px}
.lm-carrusel-fotos__flecha--prev:hover{transform:translate(-3px,-50%)}
.lm-carrusel-fotos__flecha--next:hover{transform:translate(3px,-50%)}
.lm-carrusel-fotos__flecha:focus-visible{outline:3px solid var(--lm-dorado);outline-offset:2px}
.lm-carrusel-fotos:hover .lm-carrusel-fotos__flecha,
.lm-carrusel-fotos:focus-within .lm-carrusel-fotos__flecha{opacity:1}

.lm-carrusel-fotos__puntos{
	position:absolute;left:0;right:0;bottom:14px;
	display:flex;justify-content:center;gap:8px;
}
.lm-carrusel-fotos__punto{
	width:12px;height:12px;border-radius:50%;padding:0;cursor:pointer;
	background:none;border:1px solid #fff;transition:background .2s ease,border-color .2s ease;
}
.lm-carrusel-fotos__punto.es-activo{background:#ff9232;border-color:#ff9232}

/* --------------------------------- variante de páginas interiores */

/* Dentro de .lm-entrada las listas llevan sangría y margen: aquí no. */
.lm-carrusel-fotos .lm-carrusel-fotos__pista{margin:0;padding:0;list-style:none}
.lm-carrusel-fotos .lm-carrusel-fotos__foto{margin:0;padding:0;font-size:0;line-height:0}

.lm-carrusel-pagina{margin:56px 0 8px}
.lm-entrada > .lm-carrusel-pagina:first-child{margin-top:0}
/* Título con los guiones dorados, como los de la portada (home.css solo carga allí). */
.lm-carrusel-pagina__titulo{
	font-family:var(--lm-display);font-size:36px;font-weight:500;line-height:1.2;
	text-align:center;color:var(--lm-titulo);margin:0 0 32px;
}
.lm-carrusel-pagina__titulo::before,
.lm-carrusel-pagina__titulo::after{content:"—";color:var(--lm-dorado);margin:0 14px;font-weight:400}
.lm-carrusel-fotos__punto:focus-visible{outline:3px solid var(--lm-dorado);outline-offset:2px}

/*
 * En las páginas se ven 3 fotos a la vez en escritorio, 2 en tablet y 1 en móvil,
 * como el carrusel de noticias de la portada. La pista avanza de a una foto:
 * carrusel-fotos.js mide el paso real (ancho + separación).
 */
.lm-carrusel-fotos--pagina{padding:0 56px}
.lm-carrusel-fotos--pagina .lm-carrusel-fotos__ventana{border-radius:0}
.lm-carrusel-fotos--pagina .lm-carrusel-fotos__pista{gap:var(--lm-gutter)}
.lm-carrusel-fotos--pagina .lm-carrusel-fotos__foto{
	flex:0 0 calc((100% - var(--lm-gutter) * 2) / 3);
	border-radius:10px;overflow:hidden;
}

/* Flechas redondas azules fuera de las fotos, siempre visibles. */
.lm-carrusel-fotos--pagina .lm-carrusel-fotos__flecha{
	top:calc(50% - 17px);
	width:40px;height:40px;border-radius:50%;
	background:var(--lm-azul);color:#fff;filter:none;opacity:1;
	transition:background .2s ease;
}
.lm-carrusel-fotos--pagina .lm-carrusel-fotos__flecha svg{width:22px;height:22px;stroke-width:2.25}
.lm-carrusel-fotos--pagina .lm-carrusel-fotos__flecha--prev{left:0}
.lm-carrusel-fotos--pagina .lm-carrusel-fotos__flecha--next{right:0}
.lm-carrusel-fotos--pagina .lm-carrusel-fotos__flecha:hover{background:var(--lm-azul-claro);transform:translateY(-50%)}
.lm-carrusel-fotos--pagina .lm-carrusel-fotos__flecha[disabled]{opacity:.3;cursor:default;background:var(--lm-azul)}

/* Puntos debajo de las fotos (uno por posición), azules con el activo dorado. */
.lm-carrusel-fotos--pagina .lm-carrusel-fotos__puntos{position:static;margin-top:22px}
.lm-carrusel-fotos--pagina .lm-carrusel-fotos__punto{border-color:var(--lm-azul)}
.lm-carrusel-fotos--pagina .lm-carrusel-fotos__punto.es-activo{background:var(--lm-dorado);border-color:var(--lm-dorado)}
.lm-carrusel-fotos__punto[hidden],
.lm-carrusel-fotos__flecha[hidden]{display:none}

@media (max-width:980px){
	.lm-carrusel-fotos--pagina .lm-carrusel-fotos__foto{flex-basis:calc((100% - var(--lm-gutter)) / 2)}
}
@media (max-width:600px){
	.lm-carrusel-fotos--pagina{padding:0}
	.lm-carrusel-fotos--pagina .lm-carrusel-fotos__foto{flex-basis:100%}
	.lm-carrusel-fotos--pagina .lm-carrusel-fotos__flecha{display:none}
}

@media (hover:none){
	.lm-carrusel-fotos__flecha{opacity:1}
}
@media (prefers-reduced-motion:reduce){
	.lm-carrusel-fotos__pista{transition:none}
}
@media (max-width:600px){
	.lm-carrusel-pagina{margin-top:40px}
	.lm-carrusel-pagina__titulo{font-size:26px}
	.lm-carrusel-pagina__titulo::before,
	.lm-carrusel-pagina__titulo::after{display:none}
	.lm-carrusel-fotos__flecha{width:42px;height:42px}
	.lm-carrusel-fotos__flecha svg{width:34px;height:34px}
	.lm-carrusel-fotos__flecha--prev{left:0}
	.lm-carrusel-fotos__flecha--next{right:0}
	.lm-carrusel-fotos__puntos{bottom:10px}
}