/**
 * Módulo Bloques de Noticias - Efectos visuales Radiocanal
 *
 * Overrides visuales RC sobre el módulo base del framework.
 * Contexto: .bloque-noticias (definido en css/framework/bloques-noticias.css)
 *
 * @version 1.0.0
 * @date 2026-04-20
 */

/* ============================================
   CONTENEDOR CON FONDO — EFECTOS RC
   ============================================ */

.bloque-noticias--con-fondo {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10), 0 1px 8px rgba(0, 0, 0, 0.06);
}

.bloque-noticias--con-fondo::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.07) 0%, transparent 55%);
    pointer-events: none;
}

.bloque-noticias--con-fondo > .container {
    position: relative;
    z-index: 1;
}

/* ============================================
   HEADER DEL BLOQUE — EFECTOS RC
   ============================================ */

.bloque-noticias .bloque-header {
    padding-bottom: 1.75rem;
    position: relative;
}

.bloque-noticias .bloque-header h2 {
    letter-spacing: 0.1em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.bloque-noticias .bloque-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 2px;
    background: var(--bloque-titulo);
    opacity: 0.4;
    border-radius: 2px;
}

/* ============================================
   TÍTULO EXTERIOR (titulo_exterior: true en JSON)
   El título se renderiza fuera del <section> coloreado.
   Default (false): título dentro, comportamiento base sin cambios.
   ============================================ */

.bloque-noticias-wrapper {
    margin-top: 1.5rem;
    margin-bottom: 2rem;
}

.bloque-noticias-wrapper .bloque-noticias {
    margin-bottom: 0;
    margin-top: 0;
}

.bloque-noticias-wrapper .bloque-noticias--con-fondo {
    padding-top: 2.5rem;
}

.bloque-titulo-externo {
    padding-bottom: 0.5rem;
}

.bloque-titulo-externo h2 {
    font-family: var(--bloque-font);
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--rc-negro);
    letter-spacing: 0.02em;
    margin: 30px 0px 10px 0px;
    padding-left: 0.9rem;
    border-left: 4px solid var(--bloque-titulo);
}

@media (max-width: 575px) {
    .bloque-titulo-externo h2 {
        font-size: 1.85rem;
    }
}

/* ============================================
   TEMPLATE GRID-1FILAS-3 — mayor separación inferior
   El wrapper recibe clase modificadora desde PHP.
   ============================================ */

.bloque-noticias-wrapper--grid-1filas-3 {
    padding-bottom: 1.5rem;
}

/* ============================================================
   PROPUESTAS DE TÍTULO INTERIOR — Solo bloque Nacionales
   Requiere: titulo_exterior: false + clase_extra en JSON BD
   
   Uso: "clase_extra": "bloque-propuesta-a"  (o -b, -c)
   
   IMPORTANTE: color_titulo en el JSON debe ser un tono
   oscuro de la misma familia del color_fondo del bloque.
   Ej: fondo azul claro → titulo dark navy (#0d2b45)
   ============================================================ */

/* --- Reset compartido para las 3 propuestas --- */

.bloque-noticias--con-fondo.bloque-propuesta-a .bloque-header,
.bloque-noticias--con-fondo.bloque-propuesta-b .bloque-header,
.bloque-noticias--con-fondo.bloque-propuesta-c .bloque-header {
    text-align: left;
}

.bloque-noticias--con-fondo.bloque-propuesta-a .bloque-header::after,
.bloque-noticias--con-fondo.bloque-propuesta-b .bloque-header::after,
.bloque-noticias--con-fondo.bloque-propuesta-c .bloque-header::after {
    display: none;
}

.bloque-noticias--con-fondo.bloque-propuesta-a .bloque-header h2,
.bloque-noticias--con-fondo.bloque-propuesta-b .bloque-header h2,
.bloque-noticias--con-fondo.bloque-propuesta-c .bloque-header h2 {
    background: none;
    border: none;
    border-radius: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    text-shadow: none;
    display: block;
    padding: 0 0 0 0.75rem;
    color: var(--bloque-titulo);
    text-transform: uppercase;
}

/* ---
   PROPUESTA A — "Editorial limpio"
   Heading bold integrado con hairline inferior.
   Presencia por peso y tamaño, separación por línea.
--- */

.bloque-noticias--con-fondo.bloque-propuesta-a .bloque-header {
    padding-bottom: 1.25rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.bloque-noticias--con-fondo.bloque-propuesta-a .bloque-header h2 {
    font-family: 'Oswald', 'Roboto Condensed', sans-serif;
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: 0.06em;
}

/* ---
   PROPUESTA B — "Kicker label"
   Etiqueta compacta uppercase con subrayado accent directo en el texto.
   Estilo editorial de revista / design system sección-head.
--- */

.bloque-noticias--con-fondo.bloque-propuesta-b .bloque-header {
    padding-bottom: 0;
    margin-bottom: 2.4rem;
}

.bloque-noticias--con-fondo.bloque-propuesta-b .bloque-header h2 {
    font-family: 'Roboto Condensed', 'Roboto', sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    display: inline-block;
    padding: 0 0 0.6rem 0.75rem;
    border-bottom: 3px solid var(--bloque-titulo);
    opacity: 0.82;
}

/* ---
   PROPUESTA C — "Display grand, peso ligero"
   Título grande en weight light. Alta presencia visual,
   sutileza por transparencia. Sin separadores.
--- */

.bloque-noticias--con-fondo.bloque-propuesta-c .bloque-header {
    padding-bottom: 0;
    margin-bottom: 1.6rem;
}

.bloque-noticias--con-fondo.bloque-propuesta-c .bloque-header h2 {
    font-family: 'Oswald', 'Roboto Condensed', sans-serif;
    font-size: 3.2rem;
    font-weight: 300;
    letter-spacing: 0.18em;
    opacity: 0.72;
    line-height: 1;
}

/* --- Responsive propuestas --- */

@media (max-width: 767px) {
    .bloque-noticias--con-fondo.bloque-propuesta-a .bloque-header h2 { font-size: 1.7rem; }
    .bloque-noticias--con-fondo.bloque-propuesta-b .bloque-header h2 { font-size: 1.5rem; }
    .bloque-noticias--con-fondo.bloque-propuesta-c .bloque-header h2 { font-size: 2.4rem; }
}

/* ============================================================
   MODIFICADOR FONDO OSCURO
   Para bloques con color_fondo de alta opacidad o tonos oscuros.
   El separador rgba(0,0,0,0.12) es invisible sobre fondo oscuro —
   se reemplaza por un blanco suave. Ídem text-shadow.

   Uso en JSON: "clase_extra": "bloque-propuesta-a bloque-fondo-oscuro"
   ============================================================ */

.bloque-noticias--con-fondo.bloque-fondo-oscuro.bloque-propuesta-a .bloque-header {
    border-bottom-color: rgba(255, 255, 255, 0.18);
}

.bloque-noticias--con-fondo.bloque-fondo-oscuro.bloque-propuesta-a .bloque-header h2 {
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
}