/* Popup destacado del inicio */
.hl-popup { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; padding: 16px; background: rgba(20, 36, 58, .62); opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s; }
.hl-popup.is-open { opacity: 1; visibility: visible; }
.hl-card { position: relative; width: min(100%, 500px); max-height: calc(100dvh - 32px); overflow: auto; border-radius: 18px; background: var(--cream, #fcf7f2); color: var(--ink, #243a55); box-shadow: 0 24px 60px rgba(0, 0, 0, .35); transform: translateY(18px) scale(.97); transition: transform .35s ease; font-family: "Poppins", system-ui, sans-serif; }
.hl-popup.is-open .hl-card { transform: none; }
.hl-img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 46%; background: var(--panel-deep, #345c8c); }
.hl-body { padding: 18px 22px 22px; }
.hl-tag { display: inline-block; margin: 0 0 8px; padding: 3px 10px; border-radius: 99px; background: var(--yellow, #efc870); color: var(--accent-ink, #885d1e); font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.hl-card h2 { margin: 0 0 8px; font-size: 21px; line-height: 1.2; font-weight: 800; color: var(--blue, #284f7c); }
.hl-card p { margin: 0 0 16px; font-size: 14px; line-height: 1.5; }
.hl-actions { display: grid; gap: 8px; }
.hl-btn { display: block; padding: 12px 16px; border-radius: 99px; background: var(--blue, #284f7c); color: #fff; font-weight: 700; font-size: 14px; text-align: center; text-decoration: none; transition: background .2s; }
.hl-btn:hover, .hl-btn:focus-visible { background: var(--panel-deep, #345c8c); }
.hl-link { text-align: center; font-size: 13px; font-weight: 600; color: var(--blue, #284f7c); text-decoration: underline; }
.hl-close { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: #243a55; font-size: 20px; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.hl-close:hover { background: #fff; }
.hl-sub { font-weight: 600; color: var(--panel-deep, #345c8c); }
.hl-box { margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; background: var(--mist, #dceef3); }
.hl-card h3 { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink, #885d1e); }
.hl-box ul { margin: 0; padding: 0; list-style: none; font-size: 13.5px; line-height: 1.45; }
.hl-box li { padding: 3px 0; }
.hl-card p.hl-small { font-size: 13px; margin-bottom: 12px; }
.hl-card p.hl-deadline { font-weight: 700; font-size: 14px; color: var(--blue, #284f7c); }
@media (min-width: 860px) {
  .hl-card { width: min(100%, 920px); display: grid; grid-template-columns: 400px 1fr; overflow: hidden; }
  .hl-img { height: 100%; aspect-ratio: auto; object-position: 50% 50%; }
  .hl-body { padding: 24px 28px 24px; overflow: auto; max-height: calc(100dvh - 32px); align-self: center; }
}
@media (max-width: 480px) { .hl-card h2 { font-size: 19px; } .hl-body { padding: 16px 18px 20px; } }
@media (prefers-reduced-motion: reduce) { .hl-popup, .hl-card { transition: none; } }
/* En pantallas chicas el botón queda siempre a la vista al final del popup */
@media (max-width: 859px) {
  .hl-actions { position: sticky; bottom: 0; margin: 0 -18px -20px; padding: 10px 18px 14px; background: var(--cream, #fcf7f2); box-shadow: 0 -8px 12px -8px rgba(0, 0, 0, .18); }
  .hl-card p.hl-deadline { margin-bottom: 4px; }
}