/* =====================================================
   NOTICIAS - CORPAMAG (diseño alternativo "noticias" del blog de categoría)
   Archivo: templates/wt_trendi_free/css/noticias.css
   Lo carga html/com_content/category/noticias.php
   Azul #00425E · Verde #84BB2F · Fondo claro #F5F9FC · Borde #D8E3EB
   ===================================================== */

.noticias{max-width:1200px;margin:0 auto;padding:10px 0 40px;font-family:Arial,Helvetica,sans-serif;color:#111111}
.noticias *{box-sizing:border-box}

/* ---------- Encabezado ---------- */
.noticias-encabezado{background:#00425E;border-radius:28px;padding:40px 30px;margin-bottom:26px;
box-shadow:0 8px 25px rgba(0,66,94,.15);text-align:center}
.noticias-encabezado h1{margin:0;color:#FFFFFF;font-size:36px;line-height:1.2;font-weight:400}
.noticias-encabezado h1 strong{font-weight:bold}
.noticias-encabezado p{margin:14px auto 0;max-width:900px;color:#FFFFFF;font-size:17px;line-height:1.7}

.noticias-intro{background:#F5F9FC;border:1px solid #D8E3EB;border-left:5px solid #84BB2F;border-radius:16px;padding:20px 24px;margin-bottom:22px}
.noticias-intro p{margin:0 0 8px;font-size:16px;line-height:1.7}
.noticias-intro p:last-child{margin-bottom:0}

/* ---------- Cuadrícula ---------- */
.noticias-rejilla{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}

/* ---------- Tarjeta ---------- */
.noticia{display:flex;flex-direction:column;background:#FFFFFF;border:1px solid #D8E3EB;border-bottom:5px solid #84BB2F;border-radius:16px;
overflow:hidden;box-shadow:0 4px 14px rgba(0,66,94,.07);transition:transform .2s,box-shadow .2s}
.noticia:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,66,94,.14)}

.noticia-foto{position:relative;display:block;aspect-ratio:16/10;background:#E8F1F7;overflow:hidden;text-decoration:none !important}
.noticia-foto img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s}
.noticia:hover .noticia-foto img{transform:scale(1.04)}
.noticia-sin-foto{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:#00425E;font-weight:bold;letter-spacing:2px}

.noticia-fecha{position:absolute;left:14px;top:14px;min-width:54px;padding:6px 8px;text-align:center;background:#84BB2F;color:#FFFFFF;
border-radius:10px;font-size:12px;font-weight:bold;line-height:1.1;box-shadow:0 3px 8px rgba(0,0,0,.18)}
.noticia-fecha strong{display:block;font-size:22px}

.noticia-cuerpo{display:flex;flex-direction:column;flex:1;padding:18px 20px 20px}
.noticia-fecha-texto{color:#667781;font-size:13px}
.noticia-titulo{margin:6px 0 10px;font-size:18px;line-height:1.35;font-weight:bold}
.noticia-titulo a{color:#00425E;text-decoration:none}
.noticia-titulo a:hover{color:#84BB2F}
.noticia-resumen{margin:0 0 16px;color:#333F48;font-size:15px;line-height:1.6}
.noticia-boton{align-self:flex-start;margin-top:auto;display:inline-block;background:#00425E;color:#FFFFFF !important;text-decoration:none !important;
padding:10px 18px;border-radius:8px;font-weight:bold;font-size:14px;transition:background .2s}
.noticia-boton:hover{background:#84BB2F}

/* ---------- Más noticias y vacío ---------- */
.noticias-mas{margin-top:30px;background:#F5F9FC;border:1px solid #D8E3EB;border-left:5px solid #84BB2F;border-radius:16px;padding:18px 24px}
.noticias-mas h2{margin:0 0 10px;color:#00425E;font-size:18px}
.noticias-mas a{color:#00425E;font-weight:bold}
.noticias-vacio{padding:26px;text-align:center;background:#F5F9FC;border:1px solid #D8E3EB;border-radius:16px;color:#667781}

/* ---------- Paginación (funciona con la de UIkit y con la de Bootstrap) ---------- */
.noticias-paginacion{margin-top:32px;text-align:center}
.noticias-paginacion ul{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:0;padding:0;list-style:none}
.noticias-paginacion li{margin:0}
.noticias-paginacion li > a,
.noticias-paginacion li > span{display:inline-block;min-width:40px;padding:9px 12px;border:1px solid #D8E3EB;border-radius:8px;background:#FFFFFF;
color:#00425E !important;font-weight:bold;font-size:14px;text-decoration:none !important;line-height:1.2}
.noticias-paginacion li > a:hover{background:#F5F9FC;border-color:#00425E}
.noticias-paginacion li.uk-active > span,
.noticias-paginacion li.active > span,
.noticias-paginacion li.active > a{background:#00425E;border-color:#00425E;color:#FFFFFF !important}
.noticias-paginas{margin:12px 0 0;color:#667781;font-size:14px}

/* ---------- Pantallas medianas y celular ---------- */
@media(max-width:991px){
  .noticias-rejilla{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
  .noticias-encabezado{padding:30px 20px;border-radius:22px}
  .noticias-encabezado h1{font-size:28px}
  .noticias-encabezado p{font-size:15px}
  .noticias-rejilla{grid-template-columns:1fr;gap:16px}
  .noticia-boton{align-self:stretch;text-align:center}
}