/* Noticias Grid para Elementor · aislado bajo .nhg
   Nota: los valores por defecto usan poca especificidad para que los controles de Elementor siempre ganen. */
.nhg{
  --nhg-teal:#00b5cc;
  --nhg-teal-dark:#008fa3;
  --nhg-teal-soft:#e6f8fb;
  --nhg-navy:#0b2a4a;
  --nhg-navy-deep:#061a30;
  --nhg-yellow:#f5b800;
  --nhg-line:#e3eaf0;
  --nhg-muted:#5d7188;
  --nhg-cols:3;
  --nhg-pspan:2;  /* columnas que ocupa la Principal */
  --nhg-drs:2;    /* filas que ocupa la Destacada */
  --nhg-prs:2;    /* filas que ocupa la Principal */
  box-sizing:border-box;
  width:100%;
  font-family:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--nhg-navy);
}
.nhg *,.nhg *::before,.nhg *::after{box-sizing:border-box}
.nhg a{text-decoration:none;box-shadow:none}
.nhg h3,.nhg p{margin:0;padding:0}
.nhg button{font:inherit}

.nhg .nhg-grid{
  display:grid;
  grid-template-columns:repeat(var(--nhg-cols),minmax(0,1fr));
  grid-auto-rows:300px;
  grid-auto-flow:row dense; /* rellena huecos para que no queden espacios vacíos */
  gap:20px;
}

/* Tamaños */
.nhg .nhg-card--destacada{grid-row:span var(--nhg-drs)}
.nhg .nhg-card--principal{grid-column:span var(--nhg-pspan);grid-row:span var(--nhg-prs)}

/* ───────── Tarjeta ───────── */
.nhg .nhg-card{
  position:relative;
  display:flex;flex-direction:column;
  min-width:0;min-height:0;
  border-radius:20px;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--nhg-line);
  box-shadow:0 2px 12px rgba(11,42,74,.06);
  isolation:isolate;
  transform:translateZ(0);
  transition:transform .3s ease,box-shadow .3s ease;
}
.nhg .nhg-card:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(11,42,74,.14)}

.nhg .nhg-media{
  position:relative;
  flex:1 1 auto;
  min-height:110px;
  overflow:hidden;
  background:linear-gradient(135deg,var(--nhg-teal-dark),var(--nhg-navy));
}
.nhg .nhg-media img{
  position:absolute;inset:0;
  width:100%;height:100%;max-width:none;
  object-fit:cover;display:block;
  backface-visibility:hidden;
}
.nhg--zoom .nhg-media img{transition:transform .6s ease}
.nhg--zoom .nhg-card:hover .nhg-media img{transform:scale(1.05)}

.nhg .nhg-body{
  z-index:1;               /* los hijos de flex aceptan z-index sin position */
  flex:none;
  display:flex;flex-direction:column;
  padding:16px 18px 14px;
}
.nhg-card--destacada .nhg-body{padding:18px 22px 16px}
.nhg-card--principal .nhg-body{padding:22px 26px 20px}

/* ───────── Categoría ───────── */
.nhg-cat{
  display:inline-flex;align-self:flex-start;align-items:center;
  padding:6px 12px;border-radius:6px;
  background:var(--nhg-yellow);color:var(--nhg-navy);
  font-size:12.5px;font-weight:700;line-height:1;letter-spacing:.03em;
}
/* Diseño 1: sobre la imagen, abajo a la izquierda */
.nhg--d1 .nhg-media .nhg-cat{position:absolute;left:14px;bottom:14px;z-index:2;text-transform:uppercase}
/* Diseño 2: texto simple sobre el título */
.nhg--d2 .nhg-cat{padding:0;border-radius:0;background:none;color:var(--nhg-teal-dark);font-size:13px;margin-bottom:8px;letter-spacing:.01em}
/* Diseño 3: chip sobre el título */
.nhg--d3 .nhg-cat{margin-bottom:12px}

/* ───────── Título ───────── */
.nhg-title{
  font-family:'Sora',system-ui,sans-serif;
  font-size:17px;line-height:1.32;font-weight:600;letter-spacing:-.01em;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
}
.nhg-title a{color:var(--nhg-navy);transition:color .2s}
.nhg .nhg-title a::after{content:"";position:absolute;inset:0;z-index:2} /* toda la tarjeta es clicable */
.nhg .nhg-card:hover .nhg-title a{color:var(--nhg-teal-dark)}
.nhg .nhg-card--destacada .nhg-title{font-size:20px;-webkit-line-clamp:4}
.nhg .nhg-card--principal .nhg-title{font-size:clamp(24px,2.6vw,34px);line-height:1.18;letter-spacing:-.02em;font-weight:700;-webkit-line-clamp:5}

.nhg-excerpt{
  margin-top:10px;
  font-size:14.5px;line-height:1.5;color:var(--nhg-muted);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
}

/* ───────── Pie: fecha + compartir ───────── */
.nhg .nhg-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}
.nhg-date{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;line-height:1.2;color:var(--nhg-muted)}
.nhg-date svg{width:16px;height:16px;flex:none}

.nhg .nhg-share{position:relative;z-index:3;margin-left:auto}
.nhg-share-btn{
  width:34px;height:34px;padding:0;border:0;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  background:var(--nhg-teal-soft);color:var(--nhg-teal-dark);
  transition:background .2s,color .2s;
}
.nhg-share-btn:hover{background:var(--nhg-teal);color:#fff}
.nhg-share-btn svg{width:17px;height:17px}
.nhg .nhg-share-btn:focus-visible,.nhg .nhg-share-pop a:focus-visible,.nhg .nhg-share-pop button:focus-visible,.nhg .nhg-title a:focus-visible{outline:3px solid var(--nhg-yellow);outline-offset:3px}

.nhg .nhg-share-pop{
  position:absolute;right:0;bottom:calc(100% + 8px);z-index:6;
  display:grid;grid-template-columns:1fr 1fr;gap:4px;
  width:196px;padding:6px;
  background:#fff;border:1px solid var(--nhg-line);border-radius:14px;
  box-shadow:0 12px 30px rgba(11,42,74,.2);
}
.nhg .nhg-share-pop[hidden]{display:none}
.nhg .nhg-share-pop a,.nhg .nhg-share-pop button{
  padding:8px 6px;border:0;border-radius:9px;
  background:#f3f7fa;color:var(--nhg-navy);
  font-size:12.5px;font-weight:600;line-height:1.2;text-align:center;cursor:pointer;
  transition:background .2s,color .2s;
}
.nhg .nhg-share-pop a:hover,.nhg .nhg-share-pop button:hover{background:var(--nhg-teal);color:#fff}

/* ───────── Diseño 3: texto sobre la imagen ───────── */
.nhg--d3 .nhg-card{justify-content:flex-end;background:var(--nhg-navy-deep);border-color:transparent}
.nhg--d3 .nhg-media{position:absolute;inset:0;min-height:0;z-index:0}
.nhg--d3 .nhg-media::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(6,26,48,.94) 0%,rgba(6,26,48,.5) 45%,rgba(6,26,48,0) 78%);
}
.nhg--d3 .nhg-title a{color:#fff}
.nhg--d3 .nhg-card:hover .nhg-title a{color:var(--nhg-yellow)}
.nhg--d3 .nhg-excerpt{color:rgba(255,255,255,.85)}
.nhg--d3 .nhg-date{color:rgba(255,255,255,.82)}
.nhg--d3 .nhg-share-btn{background:rgba(255,255,255,.18);color:#fff}
.nhg--d3 .nhg-share-btn:hover{background:var(--nhg-yellow);color:var(--nhg-navy)}

/* ───────── Responsive (valores de respaldo; Elementor los sobrescribe) ───────── */
@media (max-width:1024px){
  .nhg{--nhg-cols:2;--nhg-pspan:2;--nhg-drs:2;--nhg-prs:2}
  .nhg .nhg-grid{grid-auto-rows:280px;gap:16px}
}
@media (max-width:767px){
  .nhg{--nhg-cols:1;--nhg-pspan:1;--nhg-drs:1;--nhg-prs:2}
  .nhg .nhg-grid{grid-auto-rows:260px;gap:14px}
}
@media (prefers-reduced-motion:reduce){
  .nhg .nhg-card,.nhg--zoom .nhg-media img{transition:none}
  .nhg .nhg-card:hover{transform:none}
}