/* ============================================================
   CHILENOTICIAS.CL - EFFECTS ENGINE "BROADCAST PRO" (v12.0)
   Estilo: Agencia de Noticias / Limpieza Absoluta / Alto Impacto
   ============================================================ */

/* 1. ATMÓSFERA Y BASE */
body {
    background-color: #F3F4F6;
    transition: background-color 0.5s ease;
}

html.dark body {
    background-color: #080808;
}

/* Ruido Táctico: Lo mantenemos pero al 1.5% de opacidad para que no "ensucie" */
body::before {
    content: "";
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    z-index: 9999;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: 0.015;
    mix-blend-mode: overlay;
}

/* 2. HERO SECTION (TV STYLE) */
.hero-title {
    font-size: clamp(2rem, 6vw, 4.5rem) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.04em !important;
    font-weight: 900;
    text-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.hero-overlay {
    background: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0) 100%);
}

/* 3. TARJETAS DE NOTICIAS (MODERN CARDS) */
.news-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0,0,0,0.05);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

html.dark .news-card {
    background: #121212;
    border-color: rgba(255,255,255,0.05);
}

.news-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    border-color: #CE0000;
}

/* 4. BLOQUE DE CLAVES (INTEL-CARD PRO) - ALINEACIÓN PERFECTA */
.intel-card-pro {
    margin: 3rem 0;
    padding: 2rem;
    border-radius: 12px;
    background-color: #f8f9fa; 
    border-left: 6px solid #CE0000;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}

html.dark .intel-card-pro {
    background-color: rgba(255, 255, 255, 0.03);
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

.intel-card-pro h4 {
    color: #CE0000;
    font-family: 'Inter', sans-serif !important;
    font-size: 11px !important;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.intel-card-pro ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: grid;
    gap: 1.2rem;
}

.intel-card-pro li {
    display: grid !important;
    grid-template-columns: 160px 1fr; /* Columna fija para el concepto */
    gap: 20px;
    align-items: start;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    padding-bottom: 1rem;
}

html.dark .intel-card-pro li { border-bottom-color: rgba(255,255,255,0.05); }
.intel-card-pro li:last-child { border: none; }

.intel-card-pro li strong {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.85rem;
    text-transform: uppercase;
    color: #1a1a1a;
    line-height: 1.3;
}

html.dark .intel-card-pro li strong { color: #ffffff; }

.intel-card-pro li span {
    font-family: 'Merriweather', serif;
    font-size: 0.95rem;
    color: #4b5563;
    line-height: 1.6;
}

html.dark .intel-card-pro li span { color: #cbd5e1; }

/* 5. VIDEO BROADCAST CONTAINER (FIX ERROR 153) */
.video-broadcast-container {
    filter: drop-shadow(0 25px 25px rgba(0, 0, 0, 0.15));
    margin: 3rem 0;
}

.video-broadcast-container iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 0 0 16px 16px;
}

/* 6. TIPOGRAFÍA EDITORIAL Y NEGRITAS */
.prose strong, .prose b {
    font-weight: 800;
    color: #000000;
}

html.dark .prose strong, html.dark .prose b {
    color: #ffffff !important;
}

/* Citas (Blockquotes) */
.prose blockquote {
    border-left: 4px solid #CE0000 !important;
    background-color: rgba(206, 0, 0, 0.03);
    padding: 1.5rem 2rem !important;
    font-style: italic;
    font-size: 1.25rem;
    border-radius: 0 12px 12px 0;
}

/* 7. MODO ZEN (LECTURA TOTAL) */
body.zen-mode header, 
body.zen-mode footer, 
body.zen-mode aside, 
body.zen-mode #reading-progress { 
    display: none !important; 
}

body.zen-mode main {
    background-color: #fdfbf7 !important;
    padding-top: 60px !important;
}

html.dark body.zen-mode main { background-color: #0a0a0a !important; }

body.zen-mode .container {
    max-width: 740px !important;
}

/* 8. UTILIDADES */
.animate-reveal {
    animation: reveal 0.8s cubic-bezier(0.2, 0, 0, 1) forwards;
}

@keyframes reveal {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.custom-scrollbar::-webkit-scrollbar { width: 6px; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #CE0000; border-radius: 10px; }

/* Responsive móvil */
@media (max-width: 768px) {
    .intel-card-pro li {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

/* MEJORA ESTRUCTURAL MODO ZEN */
body.zen-mode .prose {
    margin-top: 2rem !important;
    max-width: 760px !important; /* Ancho óptimo lectura */
}

body.zen-mode h1 {
    font-family: 'Inter', sans-serif !important;
    font-weight: 900 !important;
    font-size: clamp(2.5rem, 5vw, 4rem) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.04em !important;
    margin-bottom: 3rem !important;
    color: #1a1a1a;
}

html.dark body.zen-mode h1 {
    color: #ffffff;
}

/* Evitar saltos de línea feos en el dashboard móvil */
@media (max-width: 1024px) {
    .border-y {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Animación del Ticker de Noticias */
@keyframes ticker {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

.animate-ticker {
    animation: ticker 30s linear infinite;
}

/* Efecto de Set de TV: Ligero viñeteado y mejora de contraste */
body {
    background-image: radial-gradient(circle at center, #f8f9fa 0%, #e9ecef 100%);
}

html.dark body {
    background-color: #050505;
    background-image: radial-gradient(circle at center, #0a0a0a 0%, #000000 100%);
}

/* Lower Thirds (Zócalos) */
.news-card {
    border-left: 8px solid #CE0000; /* Línea de noticiero lateral */
    background: white;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

html.dark .news-card {
    background: #111;
    border-left-color: #CE0000;
}

/* Ruido Táctico: Solo en escritorio para salvar GPU móvil */
@media (min-width: 768px) {
    body::before {
        content: "";
        position: fixed;
        top: 0; left: 0; width: 100%; height: 100%;
        pointer-events: none;
        z-index: 9999;
        /* Optimización: Base64 más ligero */
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
        opacity: 0.02; /* Muy sutil */
        mix-blend-mode: overlay;
    }
}

@keyframes heroPulse {
    0%, 100% { background-color: #18181b; }
    50% { background-color: #09090b; }
}
.lg\:col-span-9 {
    animation: heroPulse 2s infinite ease-in-out;
}

@keyframes reveal {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-reveal {
    animation: reveal 0.6s ease-out forwards;
}