/* 
  Estilos Específicos para Home 
  La mayoría del layout utiliza Tailwind CSS desde base.html 
*/

/* Tipografía Principal */
.font-outfit {
    font-family: 'Outfit', sans-serif;
}

/* Animaciones de Scroll (Reveal) */
.reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }

/* Fondos SVG Sutiles y Texturas */
.bg-topo {
    background-color: #0F172A;
    background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='topo' width='100' height='100' patternUnits='userSpaceOnUse'%3E%3Cpath d='M0 50 Q 25 25, 50 50 T 100 50' fill='none' stroke='rgba(255,255,255,0.02)' stroke-width='1'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url("#topo#topo")'/%3E%3C/svg%3E");
}

.bg-grid {
    background-size: 40px 40px;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
}

/* Carrusel de Imágenes 3D Hero */
.perspective-1000 {
    perspective: 1000px;
}

.carousel-container {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 2.5rem;
    overflow: hidden;
    box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.carousel-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: scale(1.05);
    transition: opacity 1.2s ease-in-out, transform 4s linear;
}

.carousel-slide.active {
    opacity: 1;
    transform: scale(1);
    z-index: 5;
}

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

.carousel-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(15, 23, 42, 0.95) 0%, rgba(15, 23, 42, 0.4) 40%, transparent 100%);
}

/* Tarjetas de Módulos (Servicios / Noticias) Glassmorphism + Glow */
.module-card {
    position: relative;
    background: rgba(30, 41, 59, 0.4);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1.25rem;
    padding: 2rem;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.module-card:hover {
    transform: translateY(-8px) scale(1.01);
    background: rgba(30, 41, 59, 0.7);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* Efecto de linterna al pasar el mouse (Mouse Tracking Glow) */
.module-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 100%;
    background: radial-gradient(600px circle at var(--mouse-x) var(--mouse-y), rgba(255, 255, 255, 0.08), transparent 40%);
    opacity: 0;
    transition: opacity 0.4s;
    z-index: -1;
}
.module-card:hover::before {
    opacity: 1;
}

/* Tarjeta específica de Noticias */
.noticia-card {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    padding: 0; /* Override module-card base if needed */
}

.noticia-img-wrap {
    position: relative;
    width: 100%;
    height: 260px;
    overflow: hidden;
    border-radius: 1.25rem 1.25rem 0 0;
}

.noticia-img-wrap.has-video {
    height: 320px;
    border-radius: 1.25rem;
    margin: 0.5rem 0.5rem 0 0.5rem;
    width: calc(100% - 1rem);
}

.noticia-img-wrap img,
.noticia-img-wrap video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.noticia-card:hover .noticia-img-wrap img,
.noticia-card:hover .noticia-img-wrap video {
    transform: scale(1.05);
}

/* Noticias pendientes / no activas */
.noticia-card.pendiente {
    opacity: 0.55;
    filter: grayscale(0.6) blur(0.4px);
    border-style: dashed;
    border-color: rgba(100, 116, 139, 0.4);
    box-shadow: none !important;
}

.noticia-card.pendiente .noticia-img-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(1.5px);
    pointer-events: none;
    z-index: 5;
}

.noticia-card.pendiente:hover {
    opacity: 0.75;
    filter: grayscale(0.3);
}

.noticia-admin-actions {
    position: absolute;
    top: 1rem; right: 1rem;
    display: flex; gap: 0.5rem;
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 10;
}
.noticia-card:hover .noticia-admin-actions {
    opacity: 1;
}

/* Custom Scrollbar for Drawer/Modal */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.1);
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.1);
    border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.2);
}