/* Estilos para el contenedor principal */
.containerslidercarros {
    width: 100%;
    background-image: url('img/fondoslider3d.jpg'); /* Agregamos el fondo */
    background-size: cover; /* Ajustamos el tamaño del fondo */
    background-position: center; /* Centramos el fondo */
    background-repeat: no-repeat; /* Evitamos que se repita el fondo */
    display: flex;
    flex-direction: column; /* Organiza los elementos verticalmente */
    justify-content: center; /* Centra verticalmente */
    align-items: center; /* Centra horizontalmente */
    padding: 20px 0; /* Espacio interno arriba y abajo */
}

/* Estilos para el título */
.titulo-slider {
 
    font-size: 3rem; /* Tamaño grande */
    color: #fff; /* Color blanco */
    text-align: center; /* Centramos el texto */
    margin-bottom: 20px; /* Espacio entre el título y el slider */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Sombra para mejorar la legibilidad */
}

/* Estilos para el contenedor del slider */
.contenedorslidercarros {
    width: 100%;
    max-width: 1600px; /* Contenedor más ancho para más espacio */
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden; /* Para que las tarjetas no se salgan del contenedor */
}

/* Resto del CSS (sin cambios) */
input[type="radio"] {
    display: none;
}

.cards {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.card {
    width: 352px;
    overflow: hidden;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: absolute;
    transition: transform .4s ease, opacity .4s ease;
}

.card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Efecto 3D y más separación */
#item-1:checked ~ .cards #song-1,
#item-2:checked ~ .cards #song-2,
#item-3:checked ~ .cards #song-3,
#item-4:checked ~ .cards #song-4,
#item-5:checked ~ .cards #song-5 {
    transform: translateX(0) scale(1); /* Tarjeta central */
    opacity: 1; /* Completamente visible */
    z-index: 2; /* La tarjeta central está al frente */
}

#item-1:checked ~ .cards #song-2,
#item-2:checked ~ .cards #song-3,
#item-3:checked ~ .cards #song-4,
#item-4:checked ~ .cards #song-5,
#item-5:checked ~ .cards #song-1 {
    transform: translateX(120%) scale(0.8); /* Tarjetas a la derecha */
    opacity: 0.5; /* Opacidad reducida para las tarjetas laterales */
    z-index: 1; /* Las tarjetas laterales están por detrás */
}

#item-1:checked ~ .cards #song-5,
#item-2:checked ~ .cards #song-1,
#item-3:checked ~ .cards #song-2,
#item-4:checked ~ .cards #song-3,
#item-5:checked ~ .cards #song-4 {
    transform: translateX(-120%) scale(0.8); /* Tarjetas a la izquierda */
    opacity: 0.5; /* Opacidad reducida para las tarjetas laterales */
    z-index: 1; /* Las tarjetas laterales están por detrás */
}

/* Ocultar las tarjetas traseras */
#item-1:checked ~ .cards #song-3,
#item-1:checked ~ .cards #song-4,
#item-2:checked ~ .cards #song-4,
#item-2:checked ~ .cards #song-5,
#item-3:checked ~ .cards #song-5,
#item-3:checked ~ .cards #song-1,
#item-4:checked ~ .cards #song-1,
#item-4:checked ~ .cards #song-2,
#item-5:checked ~ .cards #song-2,
#item-5:checked ~ .cards #song-3 {
    opacity: 0; /* Ocultamos las tarjetas traseras */
    z-index: 0; /* Les damos un z-index más bajo */
}

/* Estilos para el nombre del modelo */
.nombre-modelo {
    position: absolute;
    bottom: 20px; /* Posición en la parte inferior de la tarjeta */
    left: 50%;
    transform: translateX(-50%); /* Centrado horizontal */
    font-family: 'DM Sans', sans-serif;
    font-size: 1.5rem;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.7); /* Fondo semi-transparente */
    padding: 10px 20px;
    border-radius: 5px;
    opacity: 0; /* Inicialmente oculto */
    transition: opacity 0.3s ease; /* Transición suave */
    pointer-events: none; /* Evita que el texto interfiera con el hover */
}

/* Mostrar el nombre del modelo al hacer hover en la tarjeta central */
#item-1:checked ~ .cards #song-1:hover .nombre-modelo,
#item-2:checked ~ .cards #song-2:hover .nombre-modelo,
#item-3:checked ~ .cards #song-3:hover .nombre-modelo,
#item-4:checked ~ .cards #song-4:hover .nombre-modelo,
#item-5:checked ~ .cards #song-5:hover .nombre-modelo {
    opacity: 1; /* Mostrar el texto */
}

/* Estilos para el contenedor principal del slider de marcas */
.containerslidermarcas {
    width: 100%;
    background-color: #fff; /* Fondo blanco */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
    margin-top: 40px; /* Espacio entre los sliders */
}
.containerslidermarcas h1{
    color: black;
}
/* Estilos para el título */
.titulo-slider {
    font-family: 'DM Sans', sans-serif;
    font-size: 3rem;
    color: white; /* Texto oscuro para contrastar con el fondo blanco */
    text-align: center;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); /* Sombra suave */
}

/* Estilos para el contenedor del slider de marcas */
.contenedorslidermarcas {
    width: 100%;
    max-width: 1600px;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}

/* Estilos para las tarjetas de marcas */
.cards-marcas {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.card-marca {
    width: 352px;
    overflow: hidden;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: absolute;
    transition: transform .4s ease, opacity .4s ease;
  
   
    background-color: #fff; /* Fondo blanco para las tarjetas */
}

.card-marca img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Efecto 3D y más separación */
#marca-1:checked ~ .cards-marcas #brand-1,
#marca-2:checked ~ .cards-marcas #brand-2,
#marca-3:checked ~ .cards-marcas #brand-3,
#marca-4:checked ~ .cards-marcas #brand-4,
#marca-5:checked ~ .cards-marcas #brand-5 {
    transform: translateX(0) scale(1); /* Tarjeta central */
    opacity: 1;
    z-index: 2;
}

#marca-1:checked ~ .cards-marcas #brand-2,
#marca-2:checked ~ .cards-marcas #brand-3,
#marca-3:checked ~ .cards-marcas #brand-4,
#marca-4:checked ~ .cards-marcas #brand-5,
#marca-5:checked ~ .cards-marcas #brand-1 {
    transform: translateX(120%) scale(0.8); /* Tarjetas a la derecha */
    opacity: 0.5;
    z-index: 1;
}

#marca-1:checked ~ .cards-marcas #brand-5,
#marca-2:checked ~ .cards-marcas #brand-1,
#marca-3:checked ~ .cards-marcas #brand-2,
#marca-4:checked ~ .cards-marcas #brand-3,
#marca-5:checked ~ .cards-marcas #brand-4 {
    transform: translateX(-120%) scale(0.8); /* Tarjetas a la izquierda */
    opacity: 0.5;
    z-index: 1;
}

/* Ocultar las tarjetas traseras */
#marca-1:checked ~ .cards-marcas #brand-3,
#marca-1:checked ~ .cards-marcas #brand-4,
#marca-2:checked ~ .cards-marcas #brand-4,
#marca-2:checked ~ .cards-marcas #brand-5,
#marca-3:checked ~ .cards-marcas #brand-5,
#marca-3:checked ~ .cards-marcas #brand-1,
#marca-4:checked ~ .cards-marcas #brand-1,
#marca-4:checked ~ .cards-marcas #brand-2,
#marca-5:checked ~ .cards-marcas #brand-2,
#marca-5:checked ~ .cards-marcas #brand-3 {
    opacity: 0;
    z-index: 0;
}

/* Estilos para el nombre de la marca */
.nombre-marca {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'DM Sans', sans-serif;
    font-size: 1.5rem;
    color: #333; /* Texto oscuro para contrastar con el fondo blanco */
    background-color: rgba(255, 255, 255, 0.9); /* Fondo semi-transparente */
    padding: 10px 20px;
    border-radius: 5px;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

/* Mostrar el nombre de la marca al hacer hover en la tarjeta central */
#marca-1:checked ~ .cards-marcas #brand-1:hover .nombre-marca,
#marca-2:checked ~ .cards-marcas #brand-2:hover .nombre-marca,
#marca-3:checked ~ .cards-marcas #brand-3:hover .nombre-marca,
#marca-4:checked ~ .cards-marcas #brand-4:hover .nombre-marca,
#marca-5:checked ~ .cards-marcas #brand-5:hover .nombre-marca {
    opacity: 1;
}