/* Estilos generales */
body {
    font-family: Monserrat, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* --- CONTENEDOR PRINCIPAL DEL SLIDER --- */
.contenedor_slider {
    max-width: 1000px;
    height: 700px;
    margin: 50px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 10px;
    perspective: 1000px; /* Para el efecto 3D */
    overflow: hidden; /* Recorta el contenido que se sale */
    position: relative; /* Base para posicionar las flechas absolutamente */
}

/* Oculta los radio buttons (fundamental para el truco CSS) */
input[type=radio] {
    display: none;
}

/* --- ESTILOS DE LAS FLECHAS DE NAVEGACIÓN --- */
.flecha {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5); /* Fondo semitransparente negro */
    color: white; /* Color de la flecha */
    width: 40px; /* Ancho para el círculo */
    height: 40px; /* Alto para el círculo */
    border-radius: 50%; /* Hace el fondo redondo */
    font-size: 1.5em; /* Tamaño del icono de la flecha */
    display: flex; /* Para centrar el icono de la flecha */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10; /* Asegura que estén por encima de las tarjetas */
    transition: background-color 0.3s ease, opacity 0.3s ease;
    opacity: 0; /* Por defecto, ocultas en pantallas grandes */
    pointer-events: none; /* Por defecto, no son clicables en pantallas grandes */
    user-select: none; /* Evita que el texto de la flecha se seleccione */
    line-height: 1; /* Ayuda a centrar verticalmente el glifo */
}

.flecha:hover {
    background-color: rgba(0, 0, 0, 0.7);
}

.flecha_izquierda {
    left: 10px;
}

.flecha_derecha {
    right: 10px;
}

/* --- CONTENEDOR INTERNO DEL EFECTO 3D (DONDE SE MUEVEN LAS TARJETAS) --- */
.cont_slider {
    width: 100%;
    max-width: 800px; /* Ancho máximo para el contenedor de las tarjetas */
    height: 100%;
    max-height: 600px;
    transform-style: preserve-3d; /* Permite el efecto 3D en los hijos */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* --- CONTENEDOR DE LAS TARJETAS INDIVIDUALES --- */
.tarjetas {
    position: relative;
    width: 100%;
    height: 100%;
}

/* --- ESTILOS BASE DE CADA TARJETA --- */
.tarjeta {
    position: absolute;
    width: 60%; /* Ancho base de cada tarjeta */
    height: 100%;
    left: 0;
    right: 0;
    margin: auto;
    cursor: pointer; /* Indica que la tarjeta es clicable */
    /* Transiciones suaves para los efectos de transformación, opacidad y z-index */
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1),
                opacity 0.6s ease,
                z-index 0s 0.3s; /* z-index cambia después de un breve retardo */
    border-radius: 10px;
    overflow: hidden; /* Para que el contenido de la tarjeta no se desborde */
    box-shadow: 0 10px 20px rgba(0,0,0,0.5); /* Sombra para efecto de profundidad */
    visibility: hidden; /* Por defecto, las ocultamos y las mostramos con :checked */
    pointer-events: none; /* Por defecto, no clicables para evitar interacciones accidentales */
}

/* --- IMAGEN DENTRO DE LA TARJETA --- */
.tarjeta img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    object-fit: cover; /* La imagen cubre todo el espacio sin distorsionarse */
}

/* --- CONTENIDO TEXTUAL DE LA TARJETA --- */
.tarjeta-cont {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 15px 20px;
    /* Degradado para el fondo del contenido */
    background: linear-gradient(to top, rgba(0,0,0,0.8) 60%, rgba(0, 0, 0, 0) 100%);
    color: white;
    text-align: left;
    box-sizing: border-box;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
}

.tarjeta-cont h3 {
    margin-bottom: 5px;
    font-size: 1.2em;
    color: #FFCD00 !important; /* Color amarillo */
}

.tarjeta-cont p {
    font-size: 0.9em;
    opacity: 0.8;
    color: white !important;
    margin-bottom: 10px;
}

.card-button {
    display: inline-block;
    background-color: #FFCD00;
    color: #454545 !important;
    padding: 8px 15px;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.card-button:hover {
       background-color: #454545;
    color: white !important;
}

/* --- REGLAS CLAVE PARA EL EFECTO 3D CON 6 ELEMENTOS --- */
/* Las flechas y las tarjetas se controlan mediante los inputs de radio */

/* Tarjeta Central Activa */
#item-1:checked ~ .cont_slider .tarjetas #selector-1,
#item-2:checked ~ .cont_slider .tarjetas #selector-2,
#item-3:checked ~ .cont_slider .tarjetas #selector-3,
#item-4:checked ~ .cont_slider .tarjetas #selector-4,
#item-5:checked ~ .cont_slider .tarjetas #selector-5,
#item-6:checked ~ .cont_slider .tarjetas #selector-6 {
    transform: translateX(0) scale(1) translateZ(0);
    opacity: 1;
    z-index: 5; /* Máximo z-index para la tarjeta activa */
    visibility: visible;
    pointer-events: auto; /* Completamente interactiva */
}

/* Tarjeta a la Derecha Inmediata */
#item-1:checked ~ .cont_slider .tarjetas #selector-2,
#item-2:checked ~ .cont_slider .tarjetas #selector-3,
#item-3:checked ~ .cont_slider .tarjetas #selector-4,
#item-4:checked ~ .cont_slider .tarjetas #selector-5,
#item-5:checked ~ .cont_slider .tarjetas #selector-6,
#item-6:checked ~ .cont_slider .tarjetas #selector-1 {
    transform: translateX(50%) scale(0.8) translateZ(-100px);
    opacity: 0.8;
    z-index: 4; /* Alto z-index para ser clicable */
    visibility: visible;
    pointer-events: auto; /* Clicable en toda su área visible */
}

/* Tarjeta a la Izquierda Inmediata */
#item-1:checked ~ .cont_slider .tarjetas #selector-6,
#item-2:checked ~ .cont_slider .tarjetas #selector-1,
#item-3:checked ~ .cont_slider .tarjetas #selector-2,
#item-4:checked ~ .cont_slider .tarjetas #selector-3,
#item-5:checked ~ .cont_slider .tarjetas #selector-4,
#item-6:checked ~ .cont_slider .tarjetas #selector-5 {
    transform: translateX(-50%) scale(0.8) translateZ(-100px);
    opacity: 0.8;
    z-index: 4; /* Alto z-index para ser clicable */
    visibility: visible;
    pointer-events: auto; /* Clicable en toda su área visible */
}

/* Tarjeta a la Segunda Derecha */
#item-1:checked ~ .cont_slider .tarjetas #selector-3,
#item-2:checked ~ .cont_slider .tarjetas #selector-4,
#item-3:checked ~ .cont_slider .tarjetas #selector-5,
#item-4:checked ~ .cont_slider .tarjetas #selector-6,
#item-5:checked ~ .cont_slider .tarjetas #selector-1,
#item-6:checked ~ .cont_slider .tarjetas #selector-2 {
    transform: translateX(100%) scale(0.6) translateZ(-200px);
    opacity: 0.6;
    z-index: 3; /* Un z-index menor, puede ser parcialmente cubierto */
    visibility: visible;
    pointer-events: auto; /* Hacemos clicable */
}

/* Tarjeta a la Segunda Izquierda */
#item-1:checked ~ .cont_slider .tarjetas #selector-5,
#item-2:checked ~ .cont_slider .tarjetas #selector-6,
#item-3:checked ~ .cont_slider .tarjetas #selector-1,
#item-4:checked ~ .cont_slider .tarjetas #selector-2,
#item-5:checked ~ .cont_slider .tarjetas #selector-3,
#item-6:checked ~ .cont_slider .tarjetas #selector-4 {
    transform: translateX(-100%) scale(0.6) translateZ(-200px);
    opacity: 0.6;
    z-index: 3; /* Un z-index menor, puede ser parcialmente cubierto */
    visibility: visible;
    pointer-events: auto; /* Hacemos clicable */
}

/* Tarjeta a la Tercera Derecha / Más Lejana Derecha (y su contraparte a la izquierda) */
#item-1:checked ~ .cont_slider .tarjetas #selector-4,
#item-2:checked ~ .cont_slider .tarjetas #selector-5,
#item-3:checked ~ .cont_slider .tarjetas #selector-6,
#item-4:checked ~ .cont_slider .tarjetas #selector-1,
#item-5:checked ~ .cont_slider .tarjetas #selector-2,
#item-6:checked ~ .cont_slider .tarjetas #selector-3 {
    transform: translateX(150%) scale(0.4) translateZ(-300px);
    opacity: 0.4;
    z-index: 2; /* El z-index más bajo */
    visibility: visible;
    pointer-events: auto; /* Siguen siendo clicables */
}

/* --- MEDIA QUERIES PARA RESPONSIVIDAD Y VISIBILIDAD DE FLECHAS --- */

@media (max-width: 900px) {
    .contenedor_slider {
        height: 460px;
        padding: 20px 10px;
        perspective: 800px;
    }
    .tarjeta {
        width: 65%;
    }
    .tarjeta-cont h3 { font-size: 1.05em; }
    .tarjeta-cont p { font-size: 0.75em; margin-bottom: 7px; }
    .card-button { padding: 6px 13px; font-size: 0.85em; }

    /* --- Mostrar flechas en pantallas medianas --- */
    /* Las flechas se hacen visibles y clicables */
    #item-1:checked ~ .flecha-1,
    #item-2:checked ~ .flecha-2,
    #item-3:checked ~ .flecha-3,
    #item-4:checked ~ .flecha-4,
    #item-5:checked ~ .flecha-5,
    #item-6:checked ~ .flecha-6 {
        opacity: 1;
        pointer-events: auto;
    }

    /* Ajuste para pantallas medianas: mayor reducción de ancho y separación */
    /* Tarjeta Derecha/Izquierda Inmediata */
    #item-1:checked ~ .cont_slider .tarjetas #selector-2,
    #item-2:checked ~ .cont_slider .tarjetas #selector-3,
    #item-3:checked ~ .cont_slider .tarjetas #selector-4,
    #item-4:checked ~ .cont_slider .tarjetas #selector-5,
    #item-5:checked ~ .cont_slider .tarjetas #selector-6,
    #item-6:checked ~ .cont_slider .tarjetas #selector-1 { /* Derecha */
        transform: translateX(48%) scale(0.55) translateZ(-90px);
        opacity: 0.7;
        z-index: 4;
        visibility: visible;
        pointer-events: auto;
    }
    #item-1:checked ~ .cont_slider .tarjetas #selector-6,
    #item-2:checked ~ .cont_slider .tarjetas #selector-1,
    #item-3:checked ~ .cont_slider .tarjetas #selector-2,
    #item-4:checked ~ .cont_slider .tarjetas #selector-3,
    #item-5:checked ~ .cont_slider .tarjetas #selector-4,
    #item-6:checked ~ .cont_slider .tarjetas #selector-5 { /* Izquierda */
        transform: translateX(-48%) scale(0.55) translateZ(-90px);
        opacity: 0.7;
        z-index: 4;
        visibility: visible;
        pointer-events: auto;
    }

    /* Tarjeta Segunda Derecha/Izquierda */
    #item-1:checked ~ .cont_slider .tarjetas #selector-3,
    #item-2:checked ~ .cont_slider .tarjetas #selector-4,
    #item-3:checked ~ .cont_slider .tarjetas #selector-5,
    #item-4:checked ~ .cont_slider .tarjetas #selector-6,
    #item-5:checked ~ .cont_slider .tarjetas #selector-1,
    #item-6:checked ~ .cont_slider .tarjetas #selector-2 { /* Derecha */
        transform: translateX(95%) scale(0.3) translateZ(-180px);
        opacity: 0.4;
        z-index: 3;
        visibility: visible;
        pointer-events: auto;
    }
    #item-1:checked ~ .cont_slider .tarjetas #selector-5,
    #item-2:checked ~ .cont_slider .tarjetas #selector-6,
    #item-3:checked ~ .cont_slider .tarjetas #selector-1,
    #item-4:checked ~ .cont_slider .tarjetas #selector-2,
    #item-5:checked ~ .cont_slider .tarjetas #selector-3,
    #item-6:checked ~ .cont_slider .tarjetas #selector-4 { /* Izquierda */
        transform: translateX(-95%) scale(0.3) translateZ(-180px);
        opacity: 0.4;
        z-index: 3;
        visibility: visible;
        pointer-events: auto;
    }

    /* Tarjeta Tercera Derecha / Más Lejana Derecha (ocultar en esta resolución) */
    #item-1:checked ~ .cont_slider .tarjetas #selector-4,
    #item-2:checked ~ .cont_slider .tarjetas #selector-5,
    #item-3:checked ~ .cont_slider .tarjetas #selector-6,
    #item-4:checked ~ .cont_slider .tarjetas #selector-1,
    #item-5:checked ~ .cont_slider .tarjetas #selector-2,
    #item-6:checked ~ .cont_slider .tarjetas #selector-3 {
        visibility: hidden;
        pointer-events: none;
        opacity: 0;
    }
}

@media (max-width: 600px) {
    .contenedor_slider {
        height: 320px;
        perspective: 600px;
        margin: 25px auto;
        padding: 10px 5px;
    }
    .tarjeta {
        width: 75%;
    }
    .tarjeta-cont {
        padding: 8px 12px;
    }
    .tarjeta-cont h3 {
        font-size: 0.95em;
    }
    .tarjeta-cont p {
        font-size: 0.7em;
        margin-bottom: 4px;
    }
    .card-button {
        padding: 5px 10px;
        font-size: 0.75em;
    }

    /* Ajustar tamaño y posición de flechas para pantallas aún más pequeñas */
    .flecha {
        font-size: 1.2em; /* Reducir tamaño de flecha */
        width: 30px; /* Ajuste para que el círculo se vea bien */
        height: 30px;
    }
    .flecha_izquierda { left: 5px; }
    .flecha_derecha { right: 5px; }

    /* En móviles, mayor reducción y más ocultamiento */
    /* Tarjeta Derecha/Izquierda Inmediata (las únicas visibles además de la central) */
    #item-1:checked ~ .cont_slider .tarjetas #selector-2,
    #item-2:checked ~ .cont_slider .tarjetas #selector-3,
    #item-3:checked ~ .cont_slider .tarjetas #selector-4,
    #item-4:checked ~ .cont_slider .tarjetas #selector-5,
    #item-5:checked ~ .cont_slider .tarjetas #selector-6,
    #item-6:checked ~ .cont_slider .tarjetas #selector-1 { /* Derecha */
        transform: translateX(40%) scale(0.45) translateZ(-70px);
        opacity: 0.6;
        z-index: 4;
        visibility: visible;
        pointer-events: auto;
    }
    #item-1:checked ~ .cont_slider .tarjetas #selector-6,
    #item-2:checked ~ .cont_slider .tarjetas #selector-1,
    #item-3:checked ~ .cont_slider .tarjetas #selector-2,
    #item-4:checked ~ .cont_slider .tarjetas #selector-3,
    #item-5:checked ~ .cont_slider .tarjetas #selector-4,
    #item-6:checked ~ .cont_slider .tarjetas #selector-5 { /* Izquierda */
        transform: translateX(-40%) scale(0.45) translateZ(-70px);
        opacity: 0.6;
        z-index: 4;
        visibility: visible;
        pointer-events: auto;
    }

    /* Todas las demás tarjetas (segunda y tercera posición a la derecha/izquierda) se ocultan */
    #item-1:checked ~ .cont_slider .tarjetas #selector-3, #item-2:checked ~ .cont_slider .tarjetas #selector-4, #item-3:checked ~ .cont_slider .tarjetas #selector-5, #item-4:checked ~ .cont_slider .tarjetas #selector-6, #item-5:checked ~ .cont_slider .tarjetas #selector-1, #item-6:checked ~ .cont_slider .tarjetas #selector-2,
    #item-1:checked ~ .cont_slider .tarjetas #selector-5, #item-2:checked ~ .cont_slider .tarjetas #selector-6, #item-3:checked ~ .cont_slider .tarjetas #selector-1, #item-4:checked ~ .cont_slider .tarjetas #selector-2, #item-5:checked ~ .cont_slider .tarjetas #selector-3, #item-6:checked ~ .cont_slider .tarjetas #selector-4,
    #item-1:checked ~ .cont_slider .tarjetas #selector-4, #item-2:checked ~ .cont_slider .tarjetas #selector-5, #item-3:checked ~ .cont_slider .tarjetas #selector-6, #item-4:checked ~ .cont_slider .tarjetas #selector-1, #item-5:checked ~ .cont_slider .tarjetas #selector-2, #item-6:checked ~ .cont_slider .tarjetas #selector-3 {
        visibility: hidden;
        pointer-events: none;
        opacity: 0;
    }
}

@media (max-width: 480px) {
    .contenedor_slider {
        height: 280px;
        perspective: 500px;
        margin: 15px auto;
        padding: 5px;
    }
    .tarjeta {
        width: 90%; /* Un poco más de ancho para pantallas muy pequeñas */
    }
    .tarjeta-cont {
        padding: 6px 10px;
    }
    .tarjeta-cont h3 {
        font-size: 0.8em; /* Reducir aún más el texto del título */
    }
    .tarjeta-cont p {
        font-size: 0.6em; /* Reducir aún más el texto de la descripción */
        margin-bottom: 2px;
    }
    .card-button {
        padding: 3px 6px; /* Reducir el botón */
        font-size: 0.6em;
    }

    /* Puedes optar por ocultar las flechas completamente aquí si prefieres que no estorben en pantallas muy pequeñas */
    /* .flecha { opacity: 0 !important; pointer-events: none !important; } */

    /* Tarjeta Derecha/Izquierda Inmediata (únicas visibles a los lados de la central) */
    #item-1:checked ~ .cont_slider .tarjetas #selector-2,
    #item-2:checked ~ .cont_slider .tarjetas #selector-3,
    #item-3:checked ~ .cont_slider .tarjetas #selector-4,
    #item-4:checked ~ .cont_slider .tarjetas #selector-5,
    #item-5:checked ~ .cont_slider .tarjetas #selector-6,
    #item-6:checked ~ .cont_slider .tarjetas #selector-1 { /* Derecha */
        transform: translateX(35%) scale(0.5) translateZ(-70px); /* Ajuste de separación y escala */
        opacity: 0.7;
        z-index: 4;
        visibility: visible;
        pointer-events: auto;
    }
    #item-1:checked ~ .cont_slider .tarjetas #selector-6,
    #item-2:checked ~ .cont_slider .tarjetas #selector-1,
    #item-3:checked ~ .cont_slider .tarjetas #selector-2,
    #item-4:checked ~ .cont_slider .tarjetas #selector-3,
    #item-5:checked ~ .cont_slider .tarjetas #selector-4,
    #item-6:checked ~ .cont_slider .tarjetas #selector-5 { /* Izquierda */
        transform: translateX(-35%) scale(0.5) translateZ(-70px);
        opacity: 0.7;
        z-index: 4;
        visibility: visible;
        pointer-events: auto;
    }

    /* Todas las demás tarjetas (segunda y tercera posición a la derecha/izquierda) se ocultan */
    #item-1:checked ~ .cont_slider .tarjetas #selector-3, #item-2:checked ~ .cont_slider .tarjetas #selector-4, #item-3:checked ~ .cont_slider .tarjetas #selector-5, #item-4:checked ~ .cont_slider .tarjetas #selector-6, #item-5:checked ~ .cont_slider .tarjetas #selector-1, #item-6:checked ~ .cont_slider .tarjetas #selector-2,
    #item-1:checked ~ .cont_slider .tarjetas #selector-5, #item-2:checked ~ .cont_slider .tarjetas #selector-6, #item-3:checked ~ .cont_slider .tarjetas #selector-1, #item-4:checked ~ .cont_slider .tarjetas #selector-2, #item-5:checked ~ .cont_slider .tarjetas #selector-3, #item-6:checked ~ .cont_slider .tarjetas #selector-4,
    #item-1:checked ~ .cont_slider .tarjetas #selector-4, #item-2:checked ~ .cont_slider .tarjetas #selector-5, #item-3:checked ~ .cont_slider .tarjetas #selector-6, #item-4:checked ~ .cont_slider .tarjetas #selector-1, #item-5:checked ~ .cont_slider .tarjetas #selector-2, #item-6:checked ~ .cont_slider .tarjetas #selector-3 {
        visibility: hidden;
        pointer-events: none;
        opacity: 0;
    }
}