/* =========================================================
   NOTICIAS — Hoja de estilos de la sección
   Residencia del Sur

   Todas las clases llevan el prefijo .nt- para que no
   choquen con el CSS del sitio en producción.
   Cargar DESPUÉS de la hoja de estilos general del sitio.
   ========================================================= */

:root {
  --nt-azul:      #244e93;
  --nt-azul-pie:  #0053A0;
  --nt-naranja:   #D9741F;
  --nt-texto:     #2A3B47;
  --nt-texto-sec: #4A6377;
  --nt-mute:      #7A8A97;
  --nt-gris:      #F4F7F9;
  --nt-borde:     #E1E8ED;
  --nt-linea:     #E6ECF1;
  --nt-enlace:    #1F6FB2;
}

/* ---------- base ---------- */
.nt-page { color: var(--nt-texto); font-size: 18px; line-height: 1.6; }
.nt-page *, .nt-page *::before, .nt-page *::after { box-sizing: border-box; }
.nt-wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 22px; }
.nt-page img { max-width: 100%; display: block; }

.nt-rule { width: 64px; height: 4px; background: var(--nt-naranja); margin: 18px 0 0; }

/* ---------- encabezado de sección ---------- */
.nt-head { padding: 48px 0 6px; }
.nt-head h1 { font-size: 40px; line-height: 1.16; color: var(--nt-azul); font-weight: 700; margin: 0; }
.nt-head p { font-size: 18.5px; line-height: 1.6; color: var(--nt-texto-sec); margin: 10px 0 0; }

/* ---------- 1. noticia principal ---------- */
.nt-lead { padding: 36px 0 44px; }
.nt-lead::after { content: ""; display: table; clear: both; }
.nt-lead__ph { float: left; width: 54%; }
/* caja de proporción 16:9 — el relleno porcentual se resuelve contra el
   ancho del contenedor, así funciona también en navegadores viejos */
.nt-lead__ph > a { display: block; position: relative; padding-top: 56.25%; overflow: hidden; border-radius: 4px; }
.nt-lead__ph img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.nt-lead__tx { float: right; width: 42%; padding-top: 4px; }
.nt-lead h2 { font-size: 30px; line-height: 1.25; color: var(--nt-azul); font-weight: 700; margin: 8px 0 0; }
.nt-lead h2 a { color: inherit; text-decoration: none; }
.nt-lead h2 a:hover { text-decoration: underline; }
.nt-lead__sum { font-size: 17.5px; line-height: 1.68; color: var(--nt-texto-sec); margin: 14px 0 0; }

.nt-badge {
  display: inline-block; background: var(--nt-naranja); color: #FFF;
  font-size: 11.5px; font-weight: 700; letter-spacing: 1px;
  padding: 6px 12px; border-radius: 3px; text-transform: uppercase;
}
.nt-date { font-size: 14.5px; color: var(--nt-mute); margin: 14px 0 0; }

.nt-btn {
  display: inline-block; background: var(--nt-azul); color: #FFF !important;
  font-size: 16px; font-weight: 700; line-height: 1.2;
  padding: 14px 28px; border-radius: 28px; margin-top: 22px;
  min-height: 48px; text-decoration: none !important;
  transition: background .15s ease-in-out;
}
.nt-btn:hover, .nt-btn:focus { background: #08334D; color: #FFF !important; }

/* ---------- 2. secundarias ---------- */
.nt-secs { background: var(--nt-gris); padding: 44px 0; }
.nt-cards::after { content: ""; display: table; clear: both; }
.nt-card {
  float: left; width: 48.2%; margin-right: 3.6%;
  background: #FFF; border: 1px solid var(--nt-borde); border-radius: 4px; overflow: hidden;
}
.nt-card:last-child { margin-right: 0; }
.nt-card__ph > a { display: block; position: relative; padding-top: 56.25%; overflow: hidden; }
.nt-card__ph img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.nt-card__in { padding: 20px 24px 24px; }
.nt-card h3 { font-size: 21px; line-height: 1.32; color: var(--nt-azul); font-weight: 700; margin: 6px 0 0; }
.nt-card h3 a { color: inherit; text-decoration: none; }
.nt-card h3 a:hover { text-decoration: underline; }
.nt-card p { font-size: 16px; line-height: 1.6; color: var(--nt-texto-sec); margin: 10px 0 0; }
.nt-more { display: inline-block; font-size: 15.5px; font-weight: 700; color: var(--nt-enlace); margin-top: 14px; }
.nt-resumen {min-height:75px;}

/* cuando sólo hay una secundaria, ocupa el ancho completo */
.nt-cards--una .nt-card { width: 100%; margin-right: 0; }

/* ---------- 3. números anteriores ---------- */
.nt-arch { padding: 48px 0 18px; }
.nt-arch h2 { font-size: 25px; line-height: 1.3; color: var(--nt-azul); font-weight: 700; margin: 0; }
.nt-arch .nt-rule { margin-bottom: 6px; }

.nt-row { border-bottom: 1px solid var(--nt-linea); padding: 18px 0; position: relative; }
.nt-row::after { content: ""; display: table; clear: both; }
.nt-row:hover { background: #FAFCFD; }
.nt-row__ph { float: left; width: 104px; }
.nt-row__ph { height: 72px; overflow: hidden; border-radius: 3px; }
.nt-row__ph img { width: 104px; height: 72px; object-fit: cover; }
.nt-row__tx { float: left; width: calc(100% - 264px); padding-left: 22px; }
.nt-row__d { font-size: 13.5px; color: var(--nt-mute); margin: 0; }
.nt-row h3 { font-size: 18.5px; line-height: 1.36; color: var(--nt-azul); font-weight: 700; margin: 3px 0 0; }
.nt-row h3 a { color: inherit; text-decoration: none; }
.nt-row__lk { float: right; width: 138px; text-align: right; font-size: 15px; font-weight: 700; color: var(--nt-enlace); padding-top: 24px; }

/* toda la fila es clicable */
.nt-row h3 a::after { content: ""; position: absolute; inset: 0; }

/* ---------- paginación ---------- */
.nt-pager { text-align: center; padding: 28px 0 0; }
.nt-pager a, .nt-pager span, .nt-pager b {
  display: inline-block; min-width: 48px; height: 48px; line-height: 46px;
  border: 1px solid #DCE4EA; border-radius: 3px; margin: 0 3px;
  font-size: 15.5px; color: var(--nt-texto-sec); text-decoration: none;
}
.nt-pager a:hover { border-color: var(--nt-azul); color: var(--nt-azul); }
.nt-pager b { background: var(--nt-azul); border-color: var(--nt-azul); color: #FFF; }
.nt-pager span { color: #C4CED6; }

/* ---------- suscripción ---------- */
.nt-sub { background: var(--nt-azul); margin-top: 48px; padding: 42px 0; }
.nt-sub::after { content: ""; display: table; clear: both; }
.nt-sub__tx { float: left; width: 54%; }
.nt-sub h2 { font-size: 26px; line-height: 1.3; color: #FFF; font-weight: 700; margin: 0; }
.nt-sub p { font-size: 16.5px; line-height: 1.6; color: #C3DCED; margin: 10px 0 0; }
.nt-sub__fm { float: right; width: 40%; padding-top: 6px; }
.nt-sub input[type="email"] {
  width: 100%; border: 0; border-radius: 4px; height: 50px;
  padding: 0 16px; font-size: 17px; font-family: inherit; color: var(--nt-texto);
}
.nt-sub input[type="email"]:focus { outline: 3px solid #A8D4EE; }
.nt-sub__bt {
  display: block; width: 100%; background: var(--nt-naranja); color: #FFF;
  font-size: 16.5px; font-weight: 700; font-family: inherit;
  height: 50px; border: 0; border-radius: 28px; margin-top: 12px; cursor: pointer;
}
.nt-sub__bt:hover { background: #BF6215; }
.nt-sub__ok, .nt-sub__err { font-size: 15px; margin-top: 10px; }
.nt-sub__ok { color: #BDF0D2; }
.nt-sub__err { color: #FFD2CD; }
.nt-sub__fine { font-size: 13.5px; line-height: 1.5; color: #9FC2DA; margin-top: 10px; }
.nt-sub__fine a { color: #C3DCED; text-decoration: underline; }

/* trampa antirrobots */
.nt-trap { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ---------- vacío ---------- */
.nt-vacio { padding: 60px 0; text-align: center; color: var(--nt-texto-sec); font-size: 18px; }

/* ---------- responsivo ---------- */
@media (max-width: 900px) {
  .nt-lead__ph, .nt-lead__tx, .nt-card, .nt-sub__tx, .nt-sub__fm { float: none; width: 100%; }
  .nt-lead__tx { margin-top: 22px; }
  .nt-card { margin: 0 0 20px; }
  .nt-cards .nt-card:last-child { margin-bottom: 0; }
  .nt-sub__fm { margin-top: 22px; }
  .nt-head h1 { font-size: 32px; }
  .nt-lead h2 { font-size: 25px; }
  .nt-btn { display: block; text-align: center; }

  .nt-row__ph { width: 84px; }
  .nt-row__ph img { width: 84px; height: 58px; }
  .nt-row__tx { width: calc(100% - 84px); padding-left: 16px; }
  .nt-row__lk { display: none; }   /* la fila completa ya es clicable */

  .nt-resumen {min-height: 0px;}
}