/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 17/04/2026, 02:45:11 PM
    Author     : kpesantez
*/
/* ===== CONTENEDOR PRINCIPAL PRO ===== */
#carousel_anuncios {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
    padding: 6px;
    box-shadow: 
        0 20px 50px rgba(0,0,0,0.4),
        inset 0 0 20px rgba(255,255,255,0.05);
}

/* ===== EFECTO BORDE ILUMINADO ANIMADO ===== */
#carousel_anuncios::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 20px;
    background: linear-gradient(120deg, #68a883, transparent, #68a883);
    opacity: 0;
    transition: 0.5s;
}

#carousel_anuncios:hover::before {
    opacity: 1;
    filter: blur(6px);
}

/* ===== EFECTO BRILLO QUE SE MUEVE ===== */
#carousel_anuncios::after {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,0.25),
        transparent
        );
    transform: skewX(-25deg);
}

/* ANIMACIÓN DEL BRILLO */
#carousel_anuncios:hover::after {
    animation: brilloMove 1.2s ease;
}

@keyframes brilloMove {
    0% { left: -75%; }
    100% { left: 130%; }
}

/* ===== ITEMS ===== */
#carousel_anuncios .carousel-item {
    border-radius: 14px;
    overflow: hidden;
}

/* ===== IMAGENES MÁS PRO ===== */
#carousel_anuncios img {
    width: 100%;
    height: auto;
    border-radius: 14px;
    transition: transform 0.6s ease, filter 0.6s ease;
}

/* EFECTO ZOOM + CONTRASTE */
#carousel_anuncios .carousel-item:hover img {
    transform: scale(1.05);
    filter: contrast(1.1) brightness(1.05);
}

/* ===== OVERLAY OSCURO SUAVE ===== */
#carousel_anuncios .carousel-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.4),
        rgba(0,0,0,0.1),
        transparent
        );
    opacity: 0.6;
    transition: 0.4s;
}

#carousel_anuncios .carousel-item:hover::after {
    opacity: 0.3;
}

/* ===== CONTROLES MÁS PREMIUM ===== */
.carousel-control-prev-icon,
.carousel-control-next-icon {   
    border-radius: 50%;
    padding: 18px;
    backdrop-filter: blur(6px);
    transition: 0.3s;
}

#carousel_anuncios:hover .carousel-control-prev-icon,
#carousel_anuncios:hover .carousel-control-next-icon {
    transform: scale(1.15);
    background-color: #68a883;
}

/* ===== SOMBRA INTERNA PARA PROFUNDIDAD ===== */
#carousel_anuncios {
    box-shadow: 
        0 25px 60px rgba(0,0,0,0.5),
        inset 0 0 40px rgba(0,0,0,0.3);
}
/* ===== CONTENEDOR PRINCIPAL ===== */
#carousel_anuncios {
    border-radius: 20px;
    overflow: hidden; /* CLAVE */
    position: relative;
}

/* ===== INNER (Bootstrap lo necesita también) ===== */
#carousel_anuncios .carousel-inner {
    border-radius: 20px;
    overflow: hidden;
}

/* ===== ITEMS ===== */
#carousel_anuncios .carousel-item {
    border-radius: 20px;
    overflow: hidden;
}

/* ===== IMÁGENES ===== */
#carousel_anuncios img {
    border-radius: 20px;
    display: block;
}

/* ===== FIX EXTRA (evita que algo sobresalga) ===== */
#carousel_anuncios * {
    box-sizing: border-box;
}

/* ===== MODAL CONTENEDOR ===== */
#exampleModal .modal-content {
    border-radius: 20px;
    overflow: hidden; /* CLAVE para que todo respete el borde */
    border: none;
}

/* ===== HEADER ===== */
#exampleModal .modal-header {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

/* ===== BODY ===== */
#exampleModal .modal-body {
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

/* ===== ANIMACIÓN BASE ===== */
#exampleModal .modal-dialog {
    transform: scale(0.85) translateY(40px);
    opacity: 0;
    transition: all 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ===== CUANDO SE ABRE ===== */
#exampleModal.show .modal-dialog {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* ===== SUAVIZAR FONDO (BACKDROP) ===== */
.modal-backdrop.show {
    opacity: 0.6;
    backdrop-filter: blur(4px);
}

/* ===== EFECTO EXTRA: PEQUEÑO "REBOTE" ===== */
#exampleModal.show .modal-dialog {
    animation: modalPop 0.35s ease;
}

@keyframes modalPop {
    0% {
        transform: scale(0.85) translateY(40px);
    }
    60% {
        transform: scale(1.03) translateY(-5px);
    }
    100% {
        transform: scale(1) translateY(0);
    }
}