/* ===== CARRUSEL ===== */
.carousel {
	position: relative;
	display: block;
	margin: 0 auto;
	width: 90%; /*max-width: 1000px;*/ /* aspect-ratio: 16 / 9;*/;
	overflow: hidden;
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
/* Ocultar radios */
.carousel > input[type=radio] {
	display: none;
}
/* Contenedor interno */
.carousel-inner {
	display: flex; /* width: 400%; /* 4 imágenes */ /* height: 100%;*/;
	animation: autoSlide 5s infinite;
}
.carousel-item {
	flex: 1 0 100%;
	height: 100%;
}
.carousel-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Auto-desplazamiento con CSS */
@keyframes autoSlide {
  0%   { transform: translateX(0%); }
  20%  { transform: translateX(0%); }
  25%  { transform: translateX(-100%); }
  45%  { transform: translateX(-100%); }
  50%  { transform: translateX(-200%); }
  70%  { transform: translateX(-200%); }
  75%  { transform: translateX(-300%); }
  95%  { transform: translateX(-300%); }
  100% { transform: translateX(0%); }
}
/* Pausar animación al pasar el ratón (opcional) */
.carousel:hover .carousel-inner {
	animation-play-state: paused;
}
/* ===== Flechas ===== */
.carousel-nav {
	pointer-events: none;
}
.carousel-nav label {
	pointer-events: auto;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	font-size: 2.5rem;
	color: #fff;
	padding: 0.2em 0.4em;
	cursor: pointer;
	background: rgba(0,0,0,0.35);
	border-radius: 50%;
	transition: background 0.2s, transform 0.2s;
}
/* Orden: para cada slide hay 2 labels (prev, next) en el mismo orden que los radios */
.carousel-nav label:nth-child(1),
.carousel-nav label:nth-child(2) {
  /* visibles cuando está activo slide-1 */
}
.carousel-nav label:nth-child(3),
.carousel-nav label:nth-child(4) {
  /* visibles cuando está activo slide-2 */
}
.carousel-nav label:nth-child(5),
.carousel-nav label:nth-child(6) {
  /* visibles cuando está activo slide-3 */
}
.carousel-nav label:nth-child(7),
.carousel-nav label:nth-child(8) {
  /* visibles cuando está activo slide-4 */
}
/* Posiciones izquierda/derecha */
.carousel-nav .prev {
	left: 10px;
}
.carousel-nav .next {
	right: 10px;
}
.carousel-nav label:hover {
	background: rgba(0,0,0,0.6);
	transform: translateY(-50%) scale(1.05);
}
/* Mostrar solo las flechas correspondientes a cada slide */
#slide-1:checked ~ .carousel-nav label:nth-child(1),
#slide-1:checked ~ .carousel-nav label:nth-child(2) {
  display: block;
}
#slide-2:checked ~ .carousel-nav label:nth-child(3),
#slide-2:checked ~ .carousel-nav label:nth-child(4) {
  display: block;
}
#slide-3:checked ~ .carousel-nav label:nth-child(5),
#slide-3:checked ~ .carousel-nav label:nth-child(6) {
  display: block;
}
#slide-4:checked ~ .carousel-nav label:nth-child(7),
#slide-4:checked ~ .carousel-nav label:nth-child(8) {
  display: block;
}
/* Ocultar por defecto */
.carousel-nav label {
	display: none;
}
/* ===== Indicadores inferiores ===== */
.carousel-dots {
	position: absolute;
	bottom: 12px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 8px;
}
.carousel-dots label {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: 2px solid #fff;
	cursor: pointer;
	background: transparent;
	transition: background 0.2s, transform 0.2s;
}
/* Estado activo de los puntos */
#slide-1:checked ~ .carousel-dots label:nth-child(1),
#slide-2:checked ~ .carousel-dots label:nth-child(2),
#slide-3:checked ~ .carousel-dots label:nth-child(3),
#slide-4:checked ~ .carousel-dots label:nth-child(4) {
  background: #fff;
  transform: scale(1.1);
}
/* Al hacer clic en un radio, anulamos la animación automática para tener control manual */
#slide-1:checked ~ .carousel-inner {
  animation: none;
  transform: translateX(0%);
}
#slide-2:checked ~ .carousel-inner {
  animation: none;
  transform: translateX(-100%);
}
#slide-3:checked ~ .carousel-inner {
  animation: none;
  transform: translateX(-200%);
}
#slide-4:checked ~ .carousel-inner {
  animation: none;
  transform: translateX(-300%);
}
/* ===== Responsivo ===== */
@media (max-width: 600px) {
.carousel-nav label {
	font-size: 2rem;
}
}