/* ============================================================
   CABECERA COMPACTA DE POSTS DE NOTICIAS — un solo archivo
   para todos los posts. Cambios aquí = se aplican a las 7 noticias.
   ============================================================ */

/* Cabecera: ocupa poco alto para que titular + imagen + primeras
   líneas del texto entren en la primera pantalla */
.post-header{padding:20px 0 14px}

.post-header .category{font-size:11px;margin-bottom:8px;color:var(--gold)}

/* Titular: a ancho de columna, compacto, sin partir palabras */
.post-header h1{
  font-size:clamp(21px,3.1vw,28px);
  line-height:1.18;
  letter-spacing:-.4px;
  margin-bottom:8px;
  max-width:100%;
  overflow-wrap:break-word;
  word-break:normal;
  hyphens:none;
}

/* Fecha en dorado (se mantiene el estilo de la marca) */
.post-header .meta{font-size:13px;color:var(--gold);font-weight:600}

/* Imagen destacada: más contenida, sin dominar la pantalla */
.post-hero{margin-bottom:24px}
.post-hero img{max-height:300px;object-fit:cover;width:100%;border-radius:var(--radius-xl);display:block}

/* Primera línea del texto más cercana a la cabecera */
.post-body{padding:0 0 56px}
.post-body > p:first-of-type{font-size:17px;color:var(--gray-800)}

/* En pantallas muy pequeñas (móvil): todo más compacto aún */
@media(max-width:640px){
  .post-header{padding:16px 0 12px}
  .post-header h1{font-size:21px;line-height:1.2}
  .post-hero img{max-height:200px}
}

/* ============================================================
   BANNER LATERAL FINO en posts individuales (columna estrecha)
   ============================================================ */
.post-layout{display:grid;grid-template-columns:1fr 200px;gap:24px;align-items:start;max-width:1040px;width:100%}
.post-main{min-width:0}
.post-main .post-header,.post-main .post-hero,.post-main .post-body,.post-main .post-footer{max-width:780px;margin-left:auto;margin-right:auto}
.news-sidebar{position:sticky;top:88px}
.side-aula{background:var(--naval);color:var(--white);border-radius:var(--radius-md);padding:12px 12px;text-align:center;border:1px solid rgba(200,168,78,.4)}
.side-aula .sa-tag{font-family:var(--font-mono);font-size:9px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;color:var(--gold);margin-bottom:6px}
.side-aula .sa-mark{width:32px;height:32px;margin:0 auto 8px;display:flex;align-items:center;justify-content:center}
.side-aula .sa-mark img{width:32px;height:32px;display:block}
.side-aula h3{color:var(--white);font-size:14px;font-weight:700;margin-bottom:4px}
.side-aula p{color:rgba(255,253,248,.8);font-size:11px;line-height:1.5;margin-bottom:10px}
.side-aula .btn{width:100%;justify-content:center;padding:6px 10px;font-size:12px}
.side-aula .sa-mini{font-size:9px;color:rgba(255,253,248,.5);margin-top:8px;line-height:1.4}
@media(max-width:1020px){
  .post-layout{grid-template-columns:1fr}
  .news-sidebar{position:static;display:flex;justify-content:center}
  .side-aula{max-width:360px;width:100%}
}

/* ============================================================
   CTA FINAL DE LOS POSTS — fino y con logo del producto
   ============================================================ */
.post-cta{padding:14px 18px !important;margin:24px 0 !important;gap:14px !important;align-items:center !important;justify-content:space-between !important;flex-wrap:nowrap !important}
.post-cta > div{display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0}
.post-cta h3{font-size:15px !important;margin:0 !important;display:flex;align-items:center;gap:8px;line-height:1.3}
.post-cta .pc-logo{width:24px;height:24px;flex:none;display:block}
.post-cta p{font-size:13px !important;margin:0 !important;line-height:1.5}
.post-cta .btn{white-space:nowrap;flex:none}