/* assets/css/comuna.css */

/* ==========================================================================
   SECCIÓN COMUNA QUE AVANZA - DISEÑO ÉPICO Y ULTRA-MODERNO (CORREGIDO)
   ========================================================================== */

/* Contenedor de la Tarjeta Base */
.card-comuna {
    position: relative;
    background: #ffffff;
    border: none !important;
    border-radius: 24px !important;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03) !important;
    z-index: 1;
}

/* EL TRUCO MAESTRO: z-index: 10 obliga al neón a estar POR ENCIMA de la imagen */
.card-comuna::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 24px;
    padding: 3px; /* Grosor aumentado para que impacte más */
    background: linear-gradient(135deg, #662445, #b23b71, #ff6baf, #662445);
    background-size: 300% 300%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0;
    z-index: 10; /* Al frente de todo */
    transition: opacity 0.4s ease;
}

/* Contenedor de la Imagen con Proporción de Aspecto Cinemática */
.img-container-comuna {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-top-left-radius: 23px;
    border-top-right-radius: 23px;
    z-index: 2; /* Por debajo del neón */
}

/* Ajuste de la imagen */
.img-comuna {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(8%) contrast(102%);
    transition: transform 0.8s cubic-bezier(0.15, 0.85, 0.3, 1), filter 0.5s ease;
}

/* Capa de degradado oscuro sobre la imagen */
.img-container-comuna::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; width: 100%; height: 40%;
    background: linear-gradient(to top, rgba(102, 36, 69, 0.15), transparent);
}

/* Contenedor de Textos */
.card-body {
    position: relative;
    z-index: 3; /* Asegura que los textos sigan siendo clickeables */
}

/* Título con Tipografía Fuerte */
.titulo-comuna {
    color: #1a1a1a;
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: -0.02em;
    transition: color 0.4s ease;
}

/* Cuerpo de texto con límite estricto de líneas */
.texto-comuna {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #5c5c5c;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ==========================================================================
   BOTÓN "SEGUIR LEYENDO" - EFECTO CYBER-GLOW MORADO
   ========================================================================== */
.btn-seguir {
    position: relative;
    background-color: #662445;
    color: #ffffff !important;
    border: none;
    font-size: 0.9rem;
    padding: 10px 26px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(102, 36, 69, 0.2);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 4;
}

/* Destello de luz interno */
.btn-seguir::before {
    content: '';
    position: absolute;
    top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
}

.btn-seguir i {
    transition: transform 0.3s ease;
    display: inline-block;
}

/* ==========================================================================
   DISPARADORES HOVER
   ========================================================================== */

.card-comuna:hover {
    transform: translateY(-12px);
    /* Sombra exterior cargada al morado que expande el brillo de la tarjeta */
    box-shadow: 0 30px 60px rgba(102, 36, 69, 0.15), 0 0 20px rgba(178, 59, 113, 0.2) !important;
}

/* Se enciende el contorno de neón morado sobre la imagen y el texto a la vez */
.card-comuna:hover::before {
    opacity: 1;
    animation: auroraGlow 5s linear infinite;
}

/* Zoom suave en la imagen */
.card-comuna:hover .img-comuna {
    transform: scale(1.06) rotate(0.5deg);
    filter: grayscale(0%) contrast(105%);
}

/* El título cambia a morado */
.card-comuna:hover .titulo-comuna {
    color: #662445;
}

/* Reacción del Botón */
.card-comuna:hover .btn-seguir {
    background-color: #822e58;
    box-shadow: 0 8px 25px rgba(102, 36, 69, 0.4);
    transform: scale(1.03);
}

.card-comuna:hover .btn-seguir::before {
    left: 100%;
    transition: left 0.7s ease-in-out;
}

.card-comuna:hover .btn-seguir i {
    transform: translateX(6px);
}

/* Animación del gradiente */
@keyframes auroraGlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Clases dinámicas para el comportamiento de la foto */
.img-comuna.cover-center {
    object-fit: cover;
    object-position: center;
}

.img-comuna.cover-top {
    object-fit: cover;
    object-position: top;
}

.img-comuna.cover-bottom {
    object-fit: cover;
    object-position: bottom;
}

.img-comuna.contain-fit {
    object-fit: contain;
    object-position: center;
    background-color: #f3f4f6; /* Fondo gris neutro suave para rellenar los lados si la foto no es 16:9 */
}