/* =========================================================
   Public newsletter archive and issue pages
   Compatible con fuentesv2 y molde_horoscopo.php
   ========================================================= */

.newsletter-public-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(1rem, 2vw, 1.35rem);
  margin-bottom: 1rem;
  border: 1px solid color-mix(in srgb, var(--primary, var(--brand, #1a4877)) 22%, var(--line, var(--border, #d9e2ec)));
  border-radius: var(--radius, 18px);
  background:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--primary, var(--brand, #1a4877)) 14%, transparent), transparent 16rem),
    radial-gradient(circle at 92% 6%, color-mix(in srgb, var(--accent, #e95454) 16%, transparent), transparent 15rem),
    linear-gradient(180deg, color-mix(in srgb, var(--card, var(--surface, #fff)) 96%, white), var(--card, var(--surface, #fff)));
}

.newsletter-public-hero h1,
.newsletter-public-hero h2 {
  margin-top: 0;
}

.newsletter-public-hero .lead,
.newsletter-public-hero p.lead {
  font-size: 1.08rem;
  color: var(--muted, #667085);
}

.newsletter-public-content {
  overflow-x: auto;
}

.newsletter-public-content table {
  max-width: 100%;
}

.newsletter-public-content img {
  max-width: 100%;
  height: auto;
}

.newsletter-public-list {
  display: grid;
  gap: .8rem;
}

.newsletter-public-card {
  display: grid;
  gap: .25rem;
  padding: .95rem 1rem;
  border-radius: 18px;
  border: 1px solid var(--line, var(--border, #d9e2ec));
  background:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--primary, var(--brand, #1a4877)) 9%, transparent), transparent 12rem),
    color-mix(in srgb, var(--bg-soft, var(--surface-soft, #f7f9fc)) 86%, transparent);
  text-decoration: none;
  color: var(--text, #1f2937);
  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.newsletter-public-card:hover {
  color: var(--text, #1f2937);
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--primary, var(--brand, #1a4877)) 35%, var(--line, var(--border, #d9e2ec)));
  box-shadow: 0 14px 34px rgba(24, 18, 37, .10);
  text-decoration: none;
}

.newsletter-public-card strong {
  color: var(--primary, var(--brand, #1a4877));
  font-size: .92rem;
}

.newsletter-public-card span {
  font-weight: 800;
  line-height: 1.3;
}

.newsletter-public-card small {
  color: var(--muted, #667085);
}