/* =============================================================
 * Atlas Editorial — sistema de diseño para portales de noticias
 * Plantilla: atlas
 * Versión inicial: 2026-05-08
 *
 * Tokens, jerarquía tipográfica y componentes mínimos.
 * Inspirado en The Atlantic / Apple News: serif elegante,
 * mucho aire, una sola tinta de acento, mobile-first.
 * ============================================================= */

html.template-atlas {
  /* Tinta */
  --atlas-paper: #FAFAF7;
  --atlas-paper-soft: #F2F1EC;
  --atlas-rule: #E5E3DC;
  --atlas-ink: #1A1A1A;
  --atlas-ink-soft: #4A4740;
  --atlas-ink-mute: #7A7568;
  --atlas-accent: #B5481D;
  --atlas-accent-soft: rgba(181, 72, 29, 0.08);
  --atlas-link: var(--atlas-ink);
  --atlas-link-hover: var(--atlas-accent);

  /* Tipografía */
  --atlas-font-display: 'Source Serif 4', 'Source Serif Pro', Georgia, 'Times New Roman', serif;
  --atlas-font-text: 'Inter', 'Helvetica Neue', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --atlas-font-mono: ui-monospace, SFMono-Regular, 'JetBrains Mono', Consolas, monospace;

  /* Escala de espaciado (8px base) */
  --atlas-space-1: 4px;
  --atlas-space-2: 8px;
  --atlas-space-3: 12px;
  --atlas-space-4: 16px;
  --atlas-space-5: 24px;
  --atlas-space-6: 32px;
  --atlas-space-7: 40px;
  --atlas-space-8: 48px;
  --atlas-space-9: 64px;
  --atlas-space-10: 80px;
  --atlas-space-11: 96px;
  --atlas-space-12: 128px;

  /* Anchuras de lectura */
  --atlas-reading-width: 680px;
  --atlas-feature-width: 880px;
  --atlas-shell-width: 1240px;

  /* Tipografía base */
  background: var(--atlas-paper);
  color: var(--atlas-ink);
  font-family: var(--atlas-font-text);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

html.template-atlas body {
  background: var(--atlas-paper) !important;
  color: var(--atlas-ink);
  font-family: var(--atlas-font-text);
  margin: 0;
  padding: 0;
}

/* Headings con serif */
html.template-atlas h1,
html.template-atlas h2,
html.template-atlas h3,
html.template-atlas h4,
html.template-atlas h5,
html.template-atlas h6,
html.template-atlas .atlas-font-display {
  font-family: var(--atlas-font-display);
  color: var(--atlas-ink);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
}

html.template-atlas a {
  color: var(--atlas-link);
  text-decoration: none;
  transition: color 0.15s ease;
}
html.template-atlas a:hover,
html.template-atlas a:focus {
  color: var(--atlas-link-hover);
}

html.template-atlas img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ---------- Layout shell ---------- */

.atlas-shell {
  max-width: var(--atlas-shell-width);
  margin: 0 auto;
  padding: 0 var(--atlas-space-4);
}
@media (min-width: 768px) {
  .atlas-shell { padding: 0 var(--atlas-space-6); }
}
@media (min-width: 1200px) {
  .atlas-shell { padding: 0 var(--atlas-space-8); }
}

/* ---------- Top bar ---------- */

.atlas-top {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--atlas-paper);
  border-bottom: 1px solid var(--atlas-rule);
  height: 56px;
  display: flex;
  align-items: center;
  transition: height 0.2s ease;
}
.atlas-top--compact { height: 44px; }
.atlas-top__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--atlas-shell-width);
  margin: 0 auto;
  padding: 0 var(--atlas-space-4);
  gap: var(--atlas-space-4);
}
.atlas-top__brand {
  font-family: var(--atlas-font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--atlas-ink);
}
.atlas-top__brand img {
  max-height: 32px;
  width: auto;
  display: inline-block;
  vertical-align: middle;
}
.atlas-top__nav {
  display: none;
  gap: var(--atlas-space-5);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
@media (min-width: 992px) {
  .atlas-top__nav { display: flex; }
}
.atlas-top__nav a {
  color: var(--atlas-ink-soft);
  padding: var(--atlas-space-2) 0;
}
.atlas-top__nav a:hover { color: var(--atlas-accent); }
.atlas-top__menu-btn {
  background: transparent;
  border: none;
  color: var(--atlas-ink);
  font-size: 22px;
  padding: var(--atlas-space-2);
  cursor: pointer;
  line-height: 1;
}
@media (min-width: 992px) {
  .atlas-top__menu-btn { display: none; }
}

/* ---------- Submenu (categorías scrolleables) ---------- */

.atlas-submenu {
  border-bottom: 1px solid var(--atlas-rule);
  background: var(--atlas-paper);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.atlas-submenu::-webkit-scrollbar { display: none; }
.atlas-submenu__inner {
  display: flex;
  gap: var(--atlas-space-5);
  padding: var(--atlas-space-3) var(--atlas-space-4);
  white-space: nowrap;
  max-width: var(--atlas-shell-width);
  margin: 0 auto;
}
.atlas-submenu a {
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--atlas-ink-soft);
}
.atlas-submenu a:hover,
.atlas-submenu a.is-active { color: var(--atlas-accent); }

/* ---------- Etiquetas / kicker ---------- */

.atlas-kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--atlas-space-2);
  font-family: var(--atlas-font-text);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--atlas-accent);
  margin-bottom: var(--atlas-space-3);
}
.atlas-kicker__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--atlas-accent);
  display: inline-block;
}
.atlas-kicker--mute { color: var(--atlas-ink-mute); }
.atlas-kicker--mute .atlas-kicker__dot { background: var(--atlas-ink-mute); }

/* ---------- Tarjetas ---------- */

.atlas-card {
  display: block;
  padding: var(--atlas-space-6) 0;
  border-top: 1px solid var(--atlas-rule);
}
.atlas-card:first-child { border-top: none; }
.atlas-card__media {
  margin-bottom: var(--atlas-space-4);
  border-radius: 2px;
  overflow: hidden;
  background: var(--atlas-paper-soft);
}
.atlas-card__media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.atlas-card__title {
  font-family: var(--atlas-font-display);
  color: var(--atlas-ink);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 var(--atlas-space-3);
}
.atlas-card__intro {
  color: var(--atlas-ink-soft);
  font-size: 16px;
  line-height: 1.45;
  margin: 0 0 var(--atlas-space-3);
}
.atlas-card__meta {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--atlas-ink-mute);
  display: flex;
  flex-wrap: wrap;
  gap: var(--atlas-space-3);
}

/* Tamaño XL — hero */
.atlas-card--xl .atlas-card__title { font-size: clamp(2rem, 6vw, 3.25rem); }
.atlas-card--xl .atlas-card__intro { font-size: 18px; line-height: 1.5; }
.atlas-card--xl .atlas-card__media img { aspect-ratio: 16 / 9; }

/* Tamaño LG — feature */
.atlas-card--lg .atlas-card__title { font-size: clamp(1.4rem, 3.4vw, 1.75rem); }
.atlas-card--lg .atlas-card__intro { font-size: 15px; }

/* Tamaño MD — lista (foto + texto en línea) */
.atlas-card--md {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: var(--atlas-space-4);
  align-items: start;
}
.atlas-card--md .atlas-card__media {
  margin: 0;
  width: 96px;
  height: 96px;
}
.atlas-card--md .atlas-card__media img {
  aspect-ratio: 1 / 1;
  width: 96px;
  height: 96px;
}
.atlas-card--md .atlas-card__title { font-size: 17px; line-height: 1.2; }
.atlas-card--md .atlas-card__intro { display: none; }

/* Tamaño SM — solo texto */
.atlas-card--sm .atlas-card__media { display: none; }
.atlas-card--sm .atlas-card__title { font-size: 16px; line-height: 1.25; }
.atlas-card--sm .atlas-card__intro { display: none; }

/* ---------- Bloques de portada ---------- */

.atlas-section {
  margin: var(--atlas-space-7) 0;
}
.atlas-section__heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--atlas-space-4);
  margin: 0 0 var(--atlas-space-5);
  padding-bottom: var(--atlas-space-2);
  border-bottom: 2px solid var(--atlas-ink);
}
.atlas-section__title {
  font-family: var(--atlas-font-display);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--atlas-ink);
  margin: 0;
}
.atlas-section__more {
  font-size: 12px;
  font-weight: 500;
  color: var(--atlas-ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Grid de tres columnas para "Principales" */
.atlas-grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--atlas-space-6);
}
@media (min-width: 768px) {
  .atlas-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
  .atlas-grid-3 { grid-template-columns: repeat(3, 1fr); gap: var(--atlas-space-7); }
}
.atlas-grid-3 > .atlas-card {
  border-top: none;
  padding: 0;
}

/* Layout asimétrico hero + sidebar */
.atlas-feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--atlas-space-6);
  margin-top: var(--atlas-space-5);
}
@media (min-width: 992px) {
  .atlas-feature-grid {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--atlas-space-8);
  }
}
.atlas-feature-grid__sidebar > .atlas-card { padding: var(--atlas-space-4) 0; }
.atlas-feature-grid__sidebar > .atlas-card:first-child { padding-top: 0; }

/* ---------- Vista de noticia ---------- */

.atlas-article {
  padding: var(--atlas-space-7) 0 var(--atlas-space-9);
}
.atlas-article__progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: var(--atlas-accent);
  z-index: 60;
  transition: width 0.1s linear;
}
@media (prefers-reduced-motion: reduce) {
  .atlas-article__progress { transition: none; display: none; }
}
.atlas-article__header {
  max-width: 720px;
  margin: 0 auto var(--atlas-space-6);
  text-align: left;
}
@media (min-width: 768px) {
  .atlas-article__header { text-align: center; }
}
.atlas-article__category {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--atlas-accent);
  margin-bottom: var(--atlas-space-4);
}
.atlas-article__title {
  font-family: var(--atlas-font-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
  font-size: clamp(2rem, 6vw, 3.75rem);
  color: var(--atlas-ink);
  margin: 0 0 var(--atlas-space-5);
}
.atlas-article__intro {
  font-family: var(--atlas-font-display);
  font-style: italic;
  font-size: clamp(1.125rem, 2.4vw, 1.375rem);
  line-height: 1.4;
  color: var(--atlas-ink-soft);
  margin: 0 0 var(--atlas-space-6);
}
.atlas-article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--atlas-space-4);
  font-size: 13px;
  color: var(--atlas-ink-mute);
  border-top: 1px solid var(--atlas-rule);
  border-bottom: 1px solid var(--atlas-rule);
  padding: var(--atlas-space-3) 0;
  margin: 0 0 var(--atlas-space-6);
}
@media (min-width: 768px) {
  .atlas-article__meta { justify-content: center; }
}
.atlas-article__meta strong { color: var(--atlas-ink); font-weight: 600; }

.atlas-article__hero {
  max-width: var(--atlas-feature-width);
  margin: 0 auto var(--atlas-space-6);
}
.atlas-article__hero img {
  width: 100%;
  height: auto;
  border-radius: 2px;
}
.atlas-article__caption {
  font-size: 13px;
  color: var(--atlas-ink-mute);
  padding: var(--atlas-space-2) 0 0;
  border-bottom: 1px solid var(--atlas-rule);
  padding-bottom: var(--atlas-space-3);
}

.atlas-article__body {
  max-width: var(--atlas-reading-width);
  margin: 0 auto;
  font-family: var(--atlas-font-text);
  font-size: 17px;
  line-height: 1.75;
  color: var(--atlas-ink);
}
@media (min-width: 768px) {
  .atlas-article__body { font-size: 18px; }
}
.atlas-article__body p {
  margin: 0 0 var(--atlas-space-5);
}
.atlas-article__body h2 {
  font-family: var(--atlas-font-display);
  font-size: clamp(1.4rem, 2.6vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: var(--atlas-space-7) 0 var(--atlas-space-3);
}
.atlas-article__body h3 {
  font-family: var(--atlas-font-display);
  font-size: 1.25rem;
  font-weight: 700;
  margin: var(--atlas-space-6) 0 var(--atlas-space-3);
}
.atlas-article__body img {
  margin: var(--atlas-space-6) auto;
  border-radius: 2px;
}
.atlas-article__body a {
  color: var(--atlas-ink);
  text-decoration: underline;
  text-decoration-color: var(--atlas-accent);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.atlas-article__body a:hover {
  color: var(--atlas-accent);
  text-decoration-thickness: 2px;
}
.atlas-article__body blockquote {
  margin: var(--atlas-space-7) 0;
  padding: 0 var(--atlas-space-4);
  border-left: 3px solid var(--atlas-accent);
  font-family: var(--atlas-font-display);
  font-style: italic;
  font-size: clamp(1.2rem, 2.4vw, 1.5rem);
  line-height: 1.4;
  color: var(--atlas-ink);
}
.atlas-article__body blockquote.pull,
.atlas-article__body blockquote.atlas-pull {
  text-align: center;
  border-left: none;
  border-top: 2px solid var(--atlas-ink);
  border-bottom: 2px solid var(--atlas-ink);
  padding: var(--atlas-space-5) var(--atlas-space-4);
  margin: var(--atlas-space-8) auto;
  max-width: 600px;
}

/* Drop cap opcional */
.atlas-article__body--dropcap > p:first-of-type::first-letter {
  font-family: var(--atlas-font-display);
  font-weight: 700;
  font-size: 4.5em;
  line-height: 0.9;
  float: left;
  padding: 0.05em 0.1em 0 0;
  color: var(--atlas-ink);
}

.atlas-article__actions {
  display: flex;
  gap: var(--atlas-space-3);
  flex-wrap: wrap;
  margin: var(--atlas-space-6) auto;
  max-width: var(--atlas-reading-width);
  padding-top: var(--atlas-space-4);
  border-top: 1px solid var(--atlas-rule);
}
.atlas-article__action {
  display: inline-flex;
  align-items: center;
  gap: var(--atlas-space-2);
  padding: var(--atlas-space-3) var(--atlas-space-4);
  background: transparent;
  border: 1px solid var(--atlas-rule);
  color: var(--atlas-ink);
  font-family: var(--atlas-font-text);
  font-size: 14px;
  font-weight: 500;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  min-height: 44px;
}
.atlas-article__action:hover {
  border-color: var(--atlas-accent);
  color: var(--atlas-accent);
}

/* ---------- Skip link (a11y) ---------- */

.atlas-skip-link {
  position: absolute;
  top: 0;
  left: var(--atlas-space-3);
  transform: translateY(-200%);
  z-index: 100;
  background: var(--atlas-ink);
  color: var(--atlas-paper);
  padding: var(--atlas-space-2) var(--atlas-space-4);
  font-family: var(--atlas-font-text);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 4px 4px;
  transition: transform 0.15s ease;
}
.atlas-skip-link:focus {
  transform: translateY(0);
  outline: 2px solid var(--atlas-accent);
  outline-offset: 2px;
}

/* ---------- Top: shrink-on-scroll ---------- */

.atlas-top {
  transition: height 0.2s ease, box-shadow 0.2s ease;
}
.atlas-top.atlas-top--compact {
  height: 48px;
  box-shadow: 0 1px 12px rgba(26, 26, 26, 0.06);
}
.atlas-top.atlas-top--compact .atlas-top__brand img {
  max-height: 26px;
}
.atlas-top.atlas-top--compact .atlas-top__brand-text {
  font-size: 18px;
}
@media (prefers-reduced-motion: reduce) {
  .atlas-top { transition: none; }
}

/* ---------- Submenu: fades en bordes para hint de scroll ---------- */

.atlas-submenu { position: relative; }
.atlas-submenu__fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 36px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.atlas-submenu__fade--left {
  left: 0;
  background: linear-gradient(to right, var(--atlas-paper) 30%, rgba(250, 250, 247, 0));
}
.atlas-submenu__fade--right {
  right: 0;
  background: linear-gradient(to left, var(--atlas-paper) 30%, rgba(250, 250, 247, 0));
}
.atlas-submenu.atlas-submenu--has-overflow:not(.atlas-submenu--at-start) .atlas-submenu__fade--left { opacity: 1; }
.atlas-submenu.atlas-submenu--has-overflow:not(.atlas-submenu--at-end) .atlas-submenu__fade--right { opacity: 1; }
.atlas-submenu a {
  position: relative;
  padding-bottom: 2px;
}
.atlas-submenu a.is-active {
  color: var(--atlas-accent);
}
.atlas-submenu a.is-active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -10px;
  height: 2px;
  background: var(--atlas-accent);
}
@media (prefers-reduced-motion: reduce) {
  .atlas-submenu__fade { transition: none; }
}

/* Anti-duplicación: cuando el submenu corre en modo fallback (mismos
 * items que el top nav porque el portal no configuró MENU_TIPO=2),
 * lo ocultamos en desktop donde el top nav ya muestra todo. En móvil
 * (<992px) el top nav está oculto bajo el hamburger, así que el
 * submenu sigue siendo el único acceso visible a las categorías. */
@media (min-width: 992px) {
  .atlas-submenu.atlas-submenu--fallback { display: none; }
}

/* ---------- Section heading variants ---------- */

.atlas-section__heading--tight {
  margin-bottom: var(--atlas-space-4);
}

/* ---------- Hero card (sin top-border, padding-top reducido) ---------- */

.atlas-card.atlas-card--hero {
  border-top: none;
  padding-top: var(--atlas-space-6);
}

/* ---------- Card title: hover affordance ---------- */

.atlas-card__title a {
  color: var(--atlas-ink);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.25s ease, color 0.15s ease;
}
.atlas-card__title a:hover,
.atlas-card__title a:focus {
  color: var(--atlas-accent);
  background-size: 100% 1px;
}
@media (prefers-reduced-motion: reduce) {
  .atlas-card__title a { transition: none; }
}

/* ---------- Top: nav móvil expandible (panel inferior) ---------- */

.atlas-top__mobile-nav {
  display: none;
  flex-direction: column;
  border-top: 1px solid var(--atlas-rule);
  background: var(--atlas-paper);
  padding: var(--atlas-space-3) var(--atlas-space-4);
  gap: var(--atlas-space-2);
}
.atlas-top__mobile-nav a {
  font-family: var(--atlas-font-text);
  font-size: 15px;
  font-weight: 500;
  color: var(--atlas-ink);
  padding: var(--atlas-space-3) 0;
  border-bottom: 1px solid var(--atlas-rule);
  text-decoration: none;
}
.atlas-top__mobile-nav a:last-child { border-bottom: none; }
.atlas-top__mobile-nav a:hover,
.atlas-top__mobile-nav a:focus { color: var(--atlas-accent); }

body.atlas-menu-open .atlas-top__mobile-nav { display: flex; }

@media (min-width: 992px) {
  .atlas-top__mobile-nav { display: none !important; }
  body.atlas-menu-open .atlas-top__mobile-nav { display: none !important; }
}

.atlas-top__brand-text {
  font-family: var(--atlas-font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--atlas-ink);
}

/* ---------- Footer (brand + nav + legal) ---------- */

.atlas-footer {
  border-top: 1px solid var(--atlas-rule);
  margin-top: var(--atlas-space-9);
  background: var(--atlas-paper);
  font-family: var(--atlas-font-text);
  color: var(--atlas-ink-soft);
}
.atlas-footer__inner {
  max-width: var(--atlas-shell-width);
  margin: 0 auto;
  padding: var(--atlas-space-7) var(--atlas-space-4) var(--atlas-space-5);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--atlas-space-6);
}
@media (min-width: 768px) {
  .atlas-footer__inner {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    padding: var(--atlas-space-8) var(--atlas-space-6) var(--atlas-space-6);
    gap: var(--atlas-space-8);
    align-items: start;
  }
}
@media (min-width: 1200px) {
  .atlas-footer__inner {
    padding: var(--atlas-space-8) var(--atlas-space-8) var(--atlas-space-6);
  }
}

.atlas-footer__brand { min-width: 0; }
.atlas-footer__brand-name {
  font-family: var(--atlas-font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 1.85rem);
  letter-spacing: -0.02em;
  color: var(--atlas-ink);
  text-decoration: none;
  display: inline-block;
  margin-bottom: var(--atlas-space-3);
}
.atlas-footer__brand-name:hover,
.atlas-footer__brand-name:focus { color: var(--atlas-accent); }
.atlas-footer__desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--atlas-ink-mute);
  margin: 0;
  max-width: 50ch;
}

.atlas-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--atlas-space-5);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  align-self: start;
}
@media (min-width: 768px) {
  .atlas-footer__nav { justify-content: flex-end; }
}
.atlas-footer__nav a {
  color: var(--atlas-ink-soft);
  text-decoration: none;
}
.atlas-footer__nav a:hover,
.atlas-footer__nav a:focus { color: var(--atlas-accent); }

.atlas-footer__legal {
  grid-column: 1 / -1;
  border-top: 1px solid var(--atlas-rule);
  padding-top: var(--atlas-space-5);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--atlas-space-3);
  font-size: 12px;
  color: var(--atlas-ink-mute);
}
.atlas-footer__legal p { margin: 0; }
.atlas-footer__legal a {
  color: var(--atlas-ink-soft);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.atlas-footer__legal a:hover,
.atlas-footer__legal a:focus { color: var(--atlas-accent); }

/* ---------- Acceso/Saturación de imágenes ---------- */

html.template-atlas .saturate {
  filter: none;
  -webkit-filter: none;
}

/* ---------- Compatibilidad: heredados de blue ---------- */

html.template-atlas main.container-lg,
html.template-atlas #content.container-lg {
  background: var(--atlas-paper);
}

/* Responsive helpers para fallbacks de blue dentro de atlas */
html.template-atlas #news_content .news_title {
  font-family: var(--atlas-font-display);
  color: var(--atlas-ink);
}

/* =============================================================
 * Sprint α.atlas-2 — Listas y secciones nativas
 * ============================================================= */

/* ---------- Bloque "Principales" ---------- */
.atlas-principales {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--atlas-space-6);
}
@media (min-width: 992px) {
  .atlas-principales {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: var(--atlas-space-8);
    align-items: start;
  }
}
.atlas-principales__hero > .atlas-card {
  border-top: none;
  padding-top: 0;
}
.atlas-principales__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.atlas-principales__item {
  border-top: 1px solid var(--atlas-rule);
  padding: var(--atlas-space-4) 0;
}
.atlas-principales__item:first-child { border-top: none; padding-top: 0; }
.atlas-principales__item > .atlas-card {
  border-top: none;
  padding: 0;
}

/* ---------- Bloque "Opinión" — autor circular ---------- */
.atlas-opinion-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--atlas-space-6);
}
@media (min-width: 768px) {
  .atlas-opinion-grid { grid-template-columns: repeat(3, 1fr); gap: var(--atlas-space-7); }
}
.atlas-opinion-card {
  display: flex;
  flex-direction: column;
  gap: var(--atlas-space-3);
  padding-top: var(--atlas-space-4);
  border-top: 1px solid var(--atlas-rule);
}
.atlas-opinion-card__avatar {
  display: block;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--atlas-paper-soft);
  flex-shrink: 0;
}
.atlas-opinion-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.15);
  transition: filter 0.2s ease;
}
.atlas-opinion-card:hover .atlas-opinion-card__avatar img { filter: none; }
.atlas-opinion-card__body { min-width: 0; }
.atlas-opinion-card__title {
  font-family: var(--atlas-font-display);
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0 0 var(--atlas-space-2);
  font-style: italic;
  font-weight: 700;
}
.atlas-opinion-card__intro {
  font-size: 14px;
  line-height: 1.5;
  color: var(--atlas-ink-soft);
  margin: 0 0 var(--atlas-space-3);
}
.atlas-opinion-card__byline {
  font-family: var(--atlas-font-text);
  font-size: 13px;
  color: var(--atlas-ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.atlas-opinion-card__byline strong { color: var(--atlas-ink); font-weight: 600; }

/* ---------- Bloque "Últimas noticias" — lista por sección ---------- */
.atlas-section-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--atlas-space-2);
}
@media (min-width: 768px) {
  .atlas-section-list { grid-template-columns: repeat(2, 1fr); gap: var(--atlas-space-5); }
}
.atlas-section-list__item { margin: 0; }
.atlas-section-list__item .atlas-card {
  border-top: 1px solid var(--atlas-rule);
  padding: var(--atlas-space-4) 0;
}

/* ---------- Archivo de categoría ---------- */
.atlas-archive { padding: var(--atlas-space-7) 0 var(--atlas-space-9); }
.atlas-archive__header {
  text-align: left;
  border-bottom: 2px solid var(--atlas-ink);
  padding-bottom: var(--atlas-space-5);
  margin-bottom: var(--atlas-space-7);
}
@media (min-width: 768px) { .atlas-archive__header { text-align: center; } }
.atlas-archive__title {
  font-family: var(--atlas-font-display);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: var(--atlas-space-2) 0 var(--atlas-space-3);
  color: var(--atlas-ink);
}
.atlas-archive__meta {
  font-size: 13px;
  color: var(--atlas-ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0;
}
.atlas-archive__hero { margin: 0 0 var(--atlas-space-7); }
.atlas-archive__hero > .atlas-card { border-top: none; padding-top: 0; }
.atlas-archive__list { margin-top: var(--atlas-space-5); }
.atlas-archive__empty {
  text-align: center;
  padding: var(--atlas-space-8) 0;
  color: var(--atlas-ink-mute);
  font-size: 16px;
}

/* ---------- "Continúa leyendo" (next read) — fin de noticia ---------- */

.atlas-next-read {
  max-width: var(--atlas-feature-width); /* 880px — alineado con la imagen hero */
  margin: var(--atlas-space-9) auto var(--atlas-space-7);
  padding-top: var(--atlas-space-7);
  border-top: 2px solid var(--atlas-ink);
  font-family: var(--atlas-font-text);
}
.atlas-next-read__kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--atlas-space-3);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--atlas-accent);
  margin-bottom: var(--atlas-space-5);
}
.atlas-next-read__kicker-line {
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--atlas-accent);
}
.atlas-next-read__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--atlas-space-5);
  align-items: start;
}
@media (min-width: 768px) {
  .atlas-next-read__layout {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: var(--atlas-space-7);
  }
}
.atlas-next-read__body { min-width: 0; }
.atlas-next-read__title {
  font-family: var(--atlas-font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-size: clamp(1.5rem, 3.6vw, 2.25rem);
  margin: 0 0 var(--atlas-space-4);
  color: var(--atlas-ink);
}
.atlas-next-read__title a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.25s ease, color 0.15s ease;
}
.atlas-next-read__title a:hover,
.atlas-next-read__title a:focus {
  color: var(--atlas-accent);
  background-size: 100% 1px;
}
.atlas-next-read__excerpt {
  font-family: var(--atlas-font-text);
  font-size: clamp(15px, 1.8vw, 17px);
  line-height: 1.6;
  color: var(--atlas-ink-soft);
  margin: 0 0 var(--atlas-space-4);
  /* Truncate a 3 líneas en desktop, 4 en mobile */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 768px) {
  .atlas-next-read__excerpt { -webkit-line-clamp: 3; }
}
.atlas-next-read__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--atlas-space-3);
  font-size: 12px;
  color: var(--atlas-ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 var(--atlas-space-5);
}
.atlas-next-read__meta strong {
  color: var(--atlas-ink);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}
/* Specificity boost: el selector global `html.template-atlas a` (0,0,1,1)
 * pisaba al `.atlas-next-read__cta` (0,0,1,0). Calificarlo con
 * `html.template-atlas` lo iguala (0,0,1,2) y gana por ser posterior. */
html.template-atlas .atlas-next-read__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--atlas-space-2);
  padding: var(--atlas-space-3) var(--atlas-space-5);
  background: var(--atlas-ink);
  color: var(--atlas-paper);
  font-family: var(--atlas-font-text);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  border-radius: 999px;
  border: 1px solid var(--atlas-ink);
  min-height: 44px;
  line-height: 1;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
html.template-atlas .atlas-next-read__cta:hover,
html.template-atlas .atlas-next-read__cta:focus {
  background: var(--atlas-accent);
  color: var(--atlas-paper);
  border-color: var(--atlas-accent);
  transform: translateX(2px);
}
.atlas-next-read__cta i {
  font-size: 18px;
  transition: transform 0.15s ease;
}
.atlas-next-read__cta:hover i { transform: translateX(2px); }

.atlas-next-read__media {
  display: block;
  border-radius: 2px;
  overflow: hidden;
  background: var(--atlas-paper-soft);
  filter: grayscale(0.05);
  transition: filter 0.2s ease;
}
.atlas-next-read__media:hover { filter: none; }
.atlas-next-read__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
@media (min-width: 768px) {
  .atlas-next-read__media img { aspect-ratio: 1 / 1; }
}

@media (prefers-reduced-motion: reduce) {
  .atlas-next-read__cta,
  .atlas-next-read__cta:hover,
  .atlas-next-read__cta i,
  .atlas-next-read__title a {
    transition: none;
    transform: none;
  }
}

/* ---------- Compatibilidad: contenido legacy y complementos ---------- */

/* NOT_CONTENIDO ocasionalmente trae HTML con clases Bootstrap (.row, .col-*),
 * estilos inline (font-size, color), tablas viejas o iframes sin width.
 * Estos resets mantienen la disciplina editorial de la columna de lectura
 * sin reescribir el contenido del editor. */
.atlas-article__body :where(img, video, iframe, audio) {
  max-width: 100%;
  height: auto;
  display: block;
  margin: var(--atlas-space-5) auto;
  border-radius: 2px;
}
.atlas-article__body iframe,
.atlas-article__body video {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.atlas-article__body audio {
  width: 100%;
  aspect-ratio: auto;
}
.atlas-article__body table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--atlas-space-5) 0;
  font-size: 15px;
}
.atlas-article__body table th,
.atlas-article__body table td {
  padding: var(--atlas-space-2) var(--atlas-space-3);
  border-bottom: 1px solid var(--atlas-rule);
  text-align: left;
  vertical-align: top;
}
.atlas-article__body ul,
.atlas-article__body ol {
  padding-left: var(--atlas-space-5);
  margin: 0 0 var(--atlas-space-5);
}
.atlas-article__body li { margin-bottom: var(--atlas-space-2); }
.atlas-article__body figure {
  margin: var(--atlas-space-6) 0;
}
.atlas-article__body figcaption {
  font-size: 13px;
  color: var(--atlas-ink-mute);
  padding: var(--atlas-space-2) 0 0;
  text-align: center;
}

/* Complementos editoriales (inc_complements.php) — usan clases Bootstrap.
 * Las dejamos funcionar pero suavizamos su aspecto para que no rompan
 * la calma editorial. */
.atlas-article__body .row {
  --bs-gutter-x: var(--atlas-space-4);
  margin-left: 0;
  margin-right: 0;
}
.atlas-article__body [class*="col-"] {
  padding-left: 0;
  padding-right: 0;
}
.atlas-article__body h4,
.atlas-article__body h5 {
  font-family: var(--atlas-font-display);
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: var(--atlas-space-5) 0 var(--atlas-space-3);
  color: var(--atlas-ink);
}
.atlas-article__body h4 { font-size: clamp(1.2rem, 2.4vw, 1.5rem); }
.atlas-article__body h5 { font-size: clamp(1.05rem, 2vw, 1.2rem); }
.atlas-article__body h5.ts-5,
.atlas-article__body h5.fw-normal {
  /* h5 que en realidad es párrafo (patrón legacy de complementos) */
  font-family: var(--atlas-font-text);
  font-size: inherit;
  font-weight: 400;
  letter-spacing: 0;
  margin: 0 0 var(--atlas-space-5);
  color: var(--atlas-ink);
  line-height: 1.7;
}
.atlas-article__body .img-fluid,
.atlas-article__body .rounded,
.atlas-article__body .w-100 {
  border-radius: 2px;
  width: 100%;
  height: auto;
}

/* ---------- Paginación ---------- */
.atlas-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--atlas-space-4);
  margin: var(--atlas-space-8) auto 0;
  padding: var(--atlas-space-5) 0 0;
  border-top: 1px solid var(--atlas-rule);
  font-family: var(--atlas-font-text);
  font-size: 14px;
  flex-wrap: wrap;
}
.atlas-pagination__link {
  color: var(--atlas-ink);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  padding: var(--atlas-space-2) var(--atlas-space-3);
  border-radius: 999px;
  text-decoration: none;
  transition: color 0.15s, background 0.15s;
}
.atlas-pagination__link:hover { color: var(--atlas-accent); background: var(--atlas-accent-soft); }
.atlas-pagination__link.is-disabled { color: var(--atlas-ink-mute); pointer-events: none; opacity: 0.5; }
.atlas-pagination__status {
  color: var(--atlas-ink-mute);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* =============================================================
 * DEFENSIVE OVERRIDES — sprint α.atlas-2 polish (2026-05-08)
 *
 * El selector global `html.template-atlas a { color: var(--atlas-link) }`
 * tiene specificity (0,0,1,1) y se aplica a *cualquier* <a>. Cualquier
 * componente atlas con background coloreado (negro, accent) que pinta
 * texto claro encima necesita ser explícito sobre su color de texto
 * para no perder el override.
 *
 * Reglas: cuando agregues un componente .atlas-XXX que sea un <a> o
 * <button> con background no transparente, califícalo con
 * `html.template-atlas` o agrégalo a este bloque.
 * ============================================================= */

html.template-atlas .atlas-next-read__cta,
html.template-atlas .atlas-next-read__cta:link,
html.template-atlas .atlas-next-read__cta:visited {
  color: var(--atlas-paper);
}
html.template-atlas .atlas-next-read__cta:hover,
html.template-atlas .atlas-next-read__cta:focus {
  color: var(--atlas-paper);
}

/* Search submit button (F1) */
html.template-atlas .atlas-search__btn {
  color: var(--atlas-ink-soft);
}
html.template-atlas .atlas-search__btn:hover,
html.template-atlas .atlas-search__btn:focus {
  color: var(--atlas-accent);
}

/* Skip link */
html.template-atlas .atlas-skip-link,
html.template-atlas .atlas-skip-link:link,
html.template-atlas .atlas-skip-link:visited,
html.template-atlas .atlas-skip-link:focus {
  color: var(--atlas-paper);
}

/* =============================================================
 * Sprint α.atlas-3 polish (2026-05-08)
 * Buscador, ads, stats bar, share actions, related grid.
 * ============================================================= */

/* ---------- Búsqueda ---------- */

.atlas-search {
  display: none;
  align-items: center;
  gap: var(--atlas-space-2);
  flex: 1;
  max-width: 320px;
  margin: 0 var(--atlas-space-4);
  border-bottom: 1px solid var(--atlas-rule);
  padding: 0 var(--atlas-space-2);
  transition: border-color 0.15s ease, border-bottom-width 0.15s ease;
}
.atlas-search:focus-within {
  border-bottom-color: var(--atlas-accent);
}
@media (min-width: 992px) {
  .atlas-search--desktop { display: flex; }
}
.atlas-search__input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--atlas-font-text);
  font-size: 14px;
  color: var(--atlas-ink);
  padding: var(--atlas-space-2) 0;
  line-height: 1.3;
}
.atlas-search__input::placeholder {
  color: var(--atlas-ink-mute);
  font-style: italic;
}
.atlas-search__btn,
.atlas-search__close {
  background: transparent;
  border: none;
  color: var(--atlas-ink-soft);
  font-size: 16px;
  padding: var(--atlas-space-2);
  cursor: pointer;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
}
.atlas-search__btn:hover,
.atlas-search__btn:focus,
.atlas-search__close:hover,
.atlas-search__close:focus { color: var(--atlas-accent); }

/* Botón lupa móvil — visible solo <992px */
.atlas-top__icon-btn {
  background: transparent;
  border: none;
  color: var(--atlas-ink);
  font-size: 22px;
  padding: var(--atlas-space-2);
  cursor: pointer;
  line-height: 1;
}
.atlas-top__search-btn { display: inline-flex; }
@media (min-width: 992px) {
  .atlas-top__search-btn { display: none; }
}

/* Overlay de búsqueda móvil */
.atlas-search-overlay {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--atlas-paper);
  border-bottom: 1px solid var(--atlas-rule);
  padding: var(--atlas-space-3) var(--atlas-space-4);
  z-index: 49;
  box-shadow: 0 6px 12px rgba(26, 26, 26, 0.06);
}
.atlas-search-overlay[hidden] { display: none; }
.atlas-search--mobile {
  display: flex;
  max-width: none;
  margin: 0;
  border-bottom-width: 2px;
}
@media (min-width: 992px) {
  .atlas-search-overlay { display: none !important; }
}

/* ---------- Ad slots ---------- */

.atlas-ad {
  display: block;
  max-width: var(--atlas-feature-width);
  margin: var(--atlas-space-7) auto;
  padding: var(--atlas-space-3) var(--atlas-space-4);
  text-align: center;
  background: var(--atlas-paper-soft);
  border: 1px solid var(--atlas-rule);
  border-radius: 2px;
}
.atlas-ad__label {
  display: block;
  font-family: var(--atlas-font-text);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--atlas-ink-mute);
  margin-bottom: var(--atlas-space-3);
}
.atlas-ad img,
.atlas-ad iframe,
.atlas-ad video {
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  display: block;
}
.atlas-ad--inline {
  margin-top: var(--atlas-space-6);
  margin-bottom: var(--atlas-space-6);
}
/* Si el ad slot devuelve vacío, ocultamos todo el contenedor.
 * Nota: el include de ad.php puede emitir whitespace; este selector
 * asume que el contenedor solo tendrá texto del label si está vacío. */
.atlas-ad:has(:empty:only-child + :empty) { display: none; }

/* ---------- Stats bar (artículo) ---------- */

.atlas-article__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--atlas-space-4);
  justify-content: flex-start;
  margin: 0 0 var(--atlas-space-5);
  padding: var(--atlas-space-3) 0;
  border-bottom: 1px solid var(--atlas-rule);
  font-family: var(--atlas-font-text);
  font-size: 13px;
  color: var(--atlas-ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
@media (min-width: 768px) {
  .atlas-article__stats { justify-content: center; }
}
.atlas-article__stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.atlas-article__stat strong {
  color: var(--atlas-ink);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0;
}
.atlas-article__stat i {
  font-size: 14px;
  color: var(--atlas-ink-soft);
}

/* ---------- Share actions extras ---------- */

.atlas-article__action--share[hidden] { display: none; }
.atlas-article__action--copy {
  /* mismo estilo que .atlas-article__action — ya cubierto */
}
.atlas-article__action span {
  display: inline-block;
}
@media (max-width: 480px) {
  /* En móvil, los botones de share muestran solo ícono — el span con
   * el label se oculta para que la fila quepa sin overflow. */
  .atlas-article__actions .atlas-article__action span {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
  }
  .atlas-article__action {
    padding: var(--atlas-space-3);
    min-width: 44px;
    justify-content: center;
  }
}

/* ---------- Related grid (Más sobre el tema) ---------- */

.atlas-related { margin-top: var(--atlas-space-7); }
.atlas-related__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--atlas-space-5);
}
@media (min-width: 768px) {
  .atlas-related__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
  .atlas-related__grid { grid-template-columns: repeat(3, 1fr); gap: var(--atlas-space-6); }
}
.atlas-related__grid > .atlas-card {
  border-top: none;
  padding-top: 0;
}