/* ═══════════════════════════════════════════════════════════
   RNM THEME — main.css
   Factoría Pública · 2026
   Orden: Layout → Top bar → Header → Ticker → Radio player
          → Categorías → Hero → Grillas → Artículos → Sidebar
          → Opinión → Programas → Footer → Utilities → Mobile
═══════════════════════════════════════════════════════════ */

/* ─── LAYOUT ──────────────────────────────────────────── */
.container {
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: 20px;
}

.site-content {
  min-height: 60vh;
}

.section-gap {
  height: 8px;
  background: var(--bg);
}

/* ─── SECTION HEADS ──────────────────────────────────── */
.section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--ink);
}

.section-head h2,
.section-head h3 {
  font-family: var(--font-tight);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}

.section-head .line {
  flex: 1;
  height: 1px;
  background: var(--rule);
}

.section-head a {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-ghost);
  font-family: var(--font-tight);
  white-space: nowrap;
  transition: color .15s;
}

.section-head a:hover { color: var(--red); }


/* ─── TOP BAR ─────────────────────────────────────────── */
.topbar {
  background: var(--red);
}

.topbar-inner {
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 36px;
  gap: 16px;
}

/* Links del menú topbar */
.topbar-links .topbar-menu {
  display: flex;
  gap: 20px;
  align-items: center;
}

.topbar-links .topbar-menu li { list-style: none; }

.topbar-links .topbar-menu a {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,.82);
  font-family: var(--font-tight);
  letter-spacing: .03em;
  transition: color .15s;
}

.topbar-links .topbar-menu a:hover { color: #fff; }


/* ─── HEADER ─────────────────────────────────────────── */
.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  z-index: 200;
  transition: box-shadow .2s;
}

.site-header.is-scrolled {
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
}

.header-inner {
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: 20px;
  display: flex;
  align-items: center;
  gap: 24px;
  height: 64px;
}

/* Logo */
.site-logo { flex-shrink: 0; }

.site-logo a {
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-decoration: none;
}

.logo-name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--red);
  line-height: 1;
  letter-spacing: -.01em;
}

.logo-sub {
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-ghost);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-family: var(--font-tight);
}

/* Nav principal */
.main-nav { flex: 1; overflow: hidden; }

.main-nav__list {
  display: flex;
  gap: 2px;
  list-style: none;
}

.main-nav__list li { position: relative; }

.main-nav__list > li > a {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  padding: 6px 10px;
  border-radius: 4px;
  font-family: var(--font-tight);
  display: block;
  white-space: nowrap;
  transition: color .15s, background .15s;
}

.main-nav__list > li > a:hover,
.main-nav__list > li.current-menu-item > a,
.main-nav__list > li.current-menu-ancestor > a {
  color: var(--red);
  background: var(--red-pale);
}

/* Submenú */
.main-nav__list .sub-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 6px;
  min-width: 200px;
  padding: 6px 0;
  box-shadow: 0 8px 24px rgba(0,0,0,.1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .15s, transform .15s, visibility .15s;
  list-style: none;
  z-index: 100;
}

.main-nav__list li:hover > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.main-nav__list .sub-menu a {
  font-size: 13px;
  padding: 8px 16px;
  display: block;
  color: var(--ink-soft);
  font-family: var(--font-tight);
  transition: color .15s, background .15s;
}

.main-nav__list .sub-menu a:hover {
  color: var(--red);
  background: var(--bg);
}

/* Botón búsqueda */
.header-search {
  width: 34px;
  height: 34px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink-soft);
  transition: border-color .15s, color .15s;
  flex-shrink: 0;
}

.header-search:hover { border-color: var(--ink-mid); color: var(--ink); }

/* Toggle menú móvil */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 34px;
  height: 34px;
  background: none;
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 7px;
  cursor: pointer;
  flex-shrink: 0;
}

.nav-toggle span {
  display: block;
  width: 100%;
  height: 1.5px;
  background: var(--ink-mid);
  border-radius: 2px;
  transition: transform .2s, opacity .2s;
}

.nav-toggle.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Drawer de búsqueda */
.search-drawer {
  background: var(--bg);
  border-top: 1px solid var(--rule);
}

.search-drawer__inner {
  max-width: 1160px;
  margin-inline: auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.search-drawer .search-form { flex: 1; display: flex; gap: 8px; }

.search-drawer .search-field {
  flex: 1;
  padding: 9px 14px;
  font-size: 14px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--white);
  color: var(--ink);
  outline: none;
  font-family: var(--font-body);
  transition: border-color .15s;
}

.search-drawer .search-field:focus { border-color: var(--red); }

.search-drawer .search-submit {
  padding: 9px 20px;
  font-size: 13px;
  font-weight: 600;
  background: var(--red);
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--font-tight);
  transition: background .15s;
}

.search-drawer .search-submit:hover { background: var(--red-dark); }

.search-drawer__close {
  width: 34px;
  height: 34px;
  background: none;
  border: 1px solid var(--rule);
  border-radius: 6px;
  cursor: pointer;
  color: var(--ink-soft);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}


/* ─── TICKER ──────────────────────────────────────────── */
.ticker-bar {
  background: var(--ink);
  overflow: hidden;
}

.ticker-inner {
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: 20px;
  display: flex;
  align-items: center;
  height: 34px;
  gap: 0;
}

.ticker-label {
  background: var(--red);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 10px;
  color: #fff;
  white-space: nowrap;
  font-family: var(--font-tight);
  flex-shrink: 0;
  margin-right: 16px;
}

.ticker-track {
  overflow: hidden;
  flex: 1;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 3%, black 97%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 3%, black 97%, transparent 100%);
}

.ticker-scroll {
  display: flex;
  animation: rnm-ticker 40s linear infinite;
  white-space: nowrap;
}

.ticker-scroll:hover { animation-play-state: paused; }

.ticker-item {
  font-size: 12px;
  color: rgba(255,255,255,.8);
  font-family: var(--font-tight);
  padding-right: 48px;
  text-decoration: none;
  transition: color .15s;
  flex-shrink: 0;
}

.ticker-item:hover { color: #fff; }

.ticker-item + .ticker-item::before {
  content: '·';
  color: var(--red);
  margin-right: 48px;
}

@keyframes rnm-ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}


/* ─── CATEGORY TAGS ───────────────────────────────────── */
.cat {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 2px;
  color: #fff;
  font-family: var(--font-tight);
  margin-bottom: 7px;
  text-decoration: none;
  transition: filter .15s;
}

.cat:hover { filter: brightness(1.1); }

.cat-pol     { background: var(--cat-pol); }
.cat-int     { background: var(--cat-int); }
.cat-eco     { background: var(--cat-eco); }
.cat-cul     { background: var(--cat-cul); }
.cat-dep     { background: var(--cat-dep); }
.cat-opi     { background: var(--cat-opi); }
.cat-pod     { background: var(--ink-mid); }
.cat-default { background: var(--ink-ghost); }


/* ─── HERO SECTION ────────────────────────────────────── */
.hero-section {
  background: var(--white);
  padding-bottom: 0;
}

.hero-section .container {
  padding-top: 24px;
  padding-bottom: 0;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  grid-template-rows: 1fr 1fr;
  background: var(--rule);
  gap: 1px;
  margin-top: 0;
}

/* Nota principal */
.hero-main {
  grid-row: 1 / 3;
  position: relative;
  background: var(--ink);
  min-height: 440px;
  overflow: hidden;
  cursor: pointer;
}

.hero-main__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .4s ease;
}

.hero-main:hover .hero-main__bg {
  transform: scale(1.02);
}

.hero-main__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.92) 0%,
    rgba(0,0,0,.55) 55%,
    rgba(0,0,0,.15) 100%
  );
}

.hero-main__content {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 28px;
  z-index: 2;
}

.hero-main__content h2 {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  margin-bottom: 10px;
  letter-spacing: -.01em;
}

.hero-main__content h2 a {
  color: inherit;
  text-decoration: none;
  transition: opacity .15s;
}

.hero-main__content h2 a:hover { opacity: .88; }

.hero-main__excerpt {
  font-size: 14px;
  color: rgba(255,255,255,.72);
  line-height: 1.55;
  margin-bottom: 12px;
  font-weight: 500;
}

.hero-main__meta {
  font-size: 11px;
  color: rgba(255,255,255,.48);
  font-family: var(--font-tight);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.hero-main__meta .author { color: rgba(255,255,255,.72); font-weight: 500; }
.hero-main__meta .sep    { color: rgba(255,255,255,.25); }

/* Secundarias */
.hero-side {
  background: var(--white);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  cursor: pointer;
  transition: background .15s;
}

.hero-side:hover { background: var(--bg); }

.hero-side + .hero-side { border-top: 1px solid var(--rule); }

.hero-side h3 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  margin-bottom: 7px;
}

.hero-side h3 a { color: inherit; text-decoration: none; }
.hero-side h3 a:hover { color: var(--red); }

.hero-side__excerpt {
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin-bottom: 7px;
}

.hero-side__meta {
  font-size: 11px;
  color: var(--ink-ghost);
  font-family: var(--font-tight);
}


/* ─── SECONDARY GRID (3 columnas) ────────────────────── */
.secondary-section {
  background: var(--white);
  padding: 28px 0;
}

.grid-3-wrap {
  background: var(--rule);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
}

.card {
  background: var(--white);
  cursor: pointer;
  transition: background .15s;
  display: flex;
  flex-direction: column;
}

.card:hover { background: var(--bg); }

.card__img {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--rule);
  flex-shrink: 0;
}

.card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}

.card:hover .card__img img { transform: scale(1.03); }

.card__body {
  padding: 14px 16px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.card__body h3 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  margin-bottom: 8px;
}

.card__body h3 a { color: inherit; text-decoration: none; }
.card__body h3 a:hover { color: var(--red); }

.card__body .excerpt {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.55;
  margin-bottom: 10px;
  flex: 1;
}

.card__meta {
  font-size: 11px;
  color: var(--ink-ghost);
  font-family: var(--font-tight);
}


/* ─── TWO-COLUMN BODY ─────────────────────────────────── */
.body-section { padding: 28px 0 40px; }

.two-col {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 32px;
}

/* Lista de artículos */
.article-list { display: flex; flex-direction: column; }

.article-item {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
}

.article-item:first-child { padding-top: 0; }
.article-item:last-child  { border-bottom: none; }

.article-item__thumb {
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 3px;
  overflow: hidden;
  background: var(--rule);
  flex-shrink: 0;
}

.article-item__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s;
}

.article-item:hover .article-item__thumb img { transform: scale(1.05); }

.article-item__info h4 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  margin-bottom: 5px;
}

.article-item__info h4 a { color: inherit; text-decoration: none; }
.article-item__info h4 a:hover { color: var(--red); }

.article-item__info .excerpt {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin-bottom: 5px;
}

.article-item__info .meta {
  font-size: 11px;
  color: var(--ink-ghost);
  font-family: var(--font-tight);
}


/* ─── SIDEBAR ─────────────────────────────────────────── */
.sidebar { display: flex; flex-direction: column; gap: 28px; }

.widget-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--ink);
}

.widget-head .red-bar {
  width: 4px;
  height: 18px;
  background: var(--red);
  border-radius: 2px;
  flex-shrink: 0;
}

.widget-head h3 {
  font-family: var(--font-tight);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
}

/* Más leídos */
.most-read-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.most-read-item:last-child { border-bottom: none; }

.most-read-item__rank {
  font-size: 22px;
  font-weight: 700;
  color: var(--rule);
  font-family: var(--font-display);
  line-height: 1;
  flex-shrink: 0;
  min-width: 24px;
}

.most-read-item h4 {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.4;
  font-family: var(--font-body);
}

.most-read-item:hover h4 { color: var(--red); }

/* Newsletter */
.newsletter-widget {
  background: var(--red-pale);
  border: 1px solid #f0c8c8;
  border-radius: 6px;
  padding: 20px;
}

.newsletter-widget h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}

.newsletter-widget p {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin-bottom: 14px;
}

.newsletter-widget input[type="email"] {
  width: 100%;
  font-size: 13px;
  padding: 9px 12px;
  border: 1px solid #e0b4b4;
  border-radius: 4px;
  background: #fff;
  color: var(--ink);
  margin-bottom: 8px;
  font-family: var(--font-body);
  outline: none;
  display: block;
  transition: border-color .15s;
}

.newsletter-widget input[type="email"]:focus { border-color: var(--red); }

.newsletter-widget button {
  width: 100%;
  font-size: 12px;
  font-weight: 700;
  padding: 10px 12px;
  border-radius: 4px;
  background: var(--red);
  color: #fff;
  border: none;
  cursor: pointer;
  font-family: var(--font-tight);
  letter-spacing: .05em;
  text-transform: uppercase;
  transition: background .15s;
  display: block;
}

.newsletter-widget button:hover { background: var(--red-dark); }

/* Redes sociales */
.social-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
  transition: background .1s;
}

.social-item:last-child { border-bottom: none; }

.social-icon {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  font-weight: 700;
  font-family: var(--font-tight);
}

.si-x  { background: #000;  color: #fff; }
.si-ig { background: linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045); color: #fff; }
.si-yt { background: #FF0000; color: #fff; }
.si-tg { background: #2AABEE; color: #fff; }
.si-fb { background: #1877F2; color: #fff; }

.social-item__info .name  { font-size: 12px; font-weight: 500; color: var(--ink); font-family: var(--font-tight); }
.social-item__info .count { font-size: 11px; color: var(--ink-ghost); font-family: var(--font-tight); }


/* ─── OPINIÓN ─────────────────────────────────────────── */
.opinion-section {
  background: var(--ink);
  padding: 32px 0;
}

.opinion-section .section-head { border-bottom-color: rgba(255,255,255,.12); }
.opinion-section .section-head h2 { color: #fff; }
.opinion-section .section-head .line { background: rgba(255,255,255,.1); }
.opinion-section .section-head a { color: rgba(255,255,255,.35); }
.opinion-section .section-head a:hover { color: var(--red); }

.opinion-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.opinion-card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 4px;
  padding: 20px;
  cursor: pointer;
  transition: background .15s;
  text-decoration: none;
  display: block;
}

.opinion-card:hover { background: rgba(255,255,255,.09); }

.opinion-card__avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  margin-bottom: 12px;
  overflow: hidden;
}

.opinion-card__avatar img { width: 100%; height: 100%; object-fit: cover; }

.opinion-card__author {
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  font-family: var(--font-tight);
  margin-bottom: 2px;
}

.opinion-card__role {
  font-size: 11px;
  color: rgba(255,255,255,.4);
  font-family: var(--font-tight);
  margin-bottom: 10px;
}

.opinion-card h3 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  line-height: 1.4;
  margin-bottom: 8px;
}

.opinion-card .excerpt {
  font-size: 13px;
  color: rgba(255,255,255,.5);
  line-height: 1.55;
}


/* ─── PROGRAMAS / PODCASTS ────────────────────────────── */
.podcast-section { padding: 28px 0; background: var(--white); }

.program-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.program-card {
  border: 1px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow .15s;
  text-decoration: none;
  display: block;
  color: inherit;
}

.program-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,.1); }

.program-card__cover {
  height: 120px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.program-card__info { padding: 14px 16px; }

.program-card__info h4 {
  font-family: var(--font-tight);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}

.program-card__schedule {
  font-size: 12px;
  color: var(--ink-ghost);
  font-family: var(--font-tight);
  margin-bottom: 10px;
}

.program-card__last {
  font-size: 13px;
  color: var(--ink-soft);
  border-top: 1px solid var(--rule);
  padding-top: 10px;
}

.program-card__last a { color: var(--red); font-weight: 500; }

.program-card__badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 20px;
  font-family: var(--font-tight);
}

.program-card__cover { position: relative; }

.program-cards--archive { grid-template-columns: repeat(3, 1fr); }

/* ─── FICHA DE PROGRAMA ──────────────────────────────────── */
.programa-hero {
  display: flex;
  gap: 20px;
  align-items: center;
  padding: 24px;
  border-radius: 10px;
  margin: 24px 0;
  color: #fff;
}

.programa-hero__cover {
  width: 120px;
  height: 120px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(0,0,0,.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.programa-hero__cover img { width: 100%; height: 100%; object-fit: cover; }
.programa-hero__icon { font-size: 44px; }

.programa-hero__badge {
  display: inline-block;
  background: rgba(255,255,255,.22);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 8px;
  font-family: var(--font-tight);
}

.programa-hero__title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 6px;
}

.programa-hero__meta {
  font-size: 13px;
  opacity: .9;
  margin-bottom: 3px;
  font-family: var(--font-tight);
}

.programa-hero__cta {
  display: inline-block;
  margin-top: 10px;
  background: rgba(255,255,255,.95);
  color: var(--ink);
  font-weight: 600;
  font-size: 13px;
  padding: 8px 16px;
  border-radius: 6px;
  font-family: var(--font-tight);
}

.programa-descripcion { margin-top: 8px; }

.episode-list { display: flex; flex-direction: column; gap: 14px; }

.episode-row {
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 14px 16px;
}

.episode-row__title {
  font-family: var(--font-tight);
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 3px;
}

.episode-row__title a:hover { color: var(--red); }

.episode-row__meta {
  font-size: 12px;
  color: var(--ink-ghost);
  font-family: var(--font-tight);
  margin-bottom: 10px;
}

.episode-row__player audio,
.episode-single__player audio {
  width: 100%;
  display: block;
}

.episode-single__back {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 12px;
  font-family: var(--font-tight);
}

.episode-single__back:hover { color: var(--red); }

.episode-single__meta {
  font-size: 13px;
  color: var(--ink-ghost);
  font-family: var(--font-tight);
  margin-bottom: 16px;
}

.episode-single__player { margin: 16px 0; }

.rnm-episode-embed iframe { width: 100%; border: none; border-radius: 8px; }

@media (max-width: 640px) {
  .programa-hero { flex-direction: column; text-align: center; }
  .program-cards--archive { grid-template-columns: 1fr; }
}


/* ─── FOOTER ──────────────────────────────────────────── */
.site-footer-top {
  background: var(--ink);
  padding: 48px 0 32px;
  border-top: 3px solid var(--red);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
}

.footer-brand .footer-logo {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--red);
  margin-bottom: 10px;
  display: block;
}

.footer-logo__img {
  display: block;
  max-height: 42px;
  width: auto;
}

.footer-brand p {
  font-size: 13px;
  color: rgba(255,255,255,.42);
  line-height: 1.65;
  max-width: 240px;
}

.footer-brand .footer-contact {
  margin-top: 14px;
  font-size: 12px;
  color: rgba(255,255,255,.35);
  line-height: 1.7;
}

.footer-col h4 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  font-family: var(--font-tight);
  margin-bottom: 16px;
}

.footer-col .menu { list-style: none; }

.footer-col .menu li { margin-bottom: 9px; }

.footer-col .menu a,
.footer-col a {
  display: block;
  font-size: 13px;
  color: rgba(255,255,255,.68);
  transition: color .15s;
  text-decoration: none;
}

.footer-col .menu a:hover,
.footer-col a:hover { color: #fff; }

.site-footer-bottom {
  background: #0c0c0c;
  padding: 14px 0;
  text-align: center;
}

.site-footer-bottom p {
  font-size: 11px;
  color: rgba(255,255,255,.28);
  font-family: var(--font-tight);
}


/* ─── UTILITIES ───────────────────────────────────────── */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

.read-more {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--red);
  font-family: var(--font-tight);
  text-decoration: none;
  margin-top: 8px;
  transition: color .15s;
}

.read-more:hover { color: var(--red-dark); }


/* ─── MOBILE ──────────────────────────────────────────── */

@media (max-width: 768px) {
  .topbar-links { display: none; }

  .hero-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .hero-main { grid-row: 1; min-height: 300px; }

  .grid-3-wrap  { grid-template-columns: 1fr; }
  .opinion-grid { grid-template-columns: 1fr; }
  .program-cards { grid-template-columns: 1fr; }

  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 480px) {
  .article-item { grid-template-columns: 80px 1fr; }
  .hero-main__content h2 { font-size: 20px; }
  .hero-main__excerpt { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ticker-scroll { animation: none; }
  .hero-main__bg, .card__img img { transition: none; }
}


/* ═══════════════════════════════════════════════════════════
   ACTUALIZACIONES v1.1
   - Logo grande
   - Topbar: hora/clima + iconos redes sociales
   - Threads
═══════════════════════════════════════════════════════════ */

/* ─── TOPBAR REESTRUCTURADA ──────────────────────────────── */
.topbar-inner {
  justify-content: space-between;
  padding-block: 0;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.topbar-sep {
  width: 1px;
  height: 14px;
  background: rgba(255,255,255,.25);
  flex-shrink: 0;
}

/* Hora y fecha */
.topbar-datetime {
  display: flex;
  align-items: center;
  gap: 8px;
}

.topbar-time {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  font-family: var(--font-tight);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

.topbar-date {
  font-size: 11px;
  color: rgba(255,255,255,.72);
  font-family: var(--font-tight);
}

/* Clima */
.topbar-weather {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-tight);
}

.weather-icon { font-size: 14px; line-height: 1; }

.weather-temp {
  font-size: 12px;
  font-weight: 600;
  color: #fff;
}

.weather-city {
  font-size: 11px;
  color: rgba(255,255,255,.72);
}

/* Iconos de redes en topbar */
.topbar-social {
  display: flex;
  align-items: center;
  gap: 6px;
}

.topbar-social__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: rgba(255,255,255,.78);
  transition: color .15s, transform .15s;
  flex-shrink: 0;
  line-height: 0; /* elimina espacio fantasma bajo el SVG */
}

/* SVG ya viene con width/height="16" desde el PHP — solo forzamos display */
.topbar-social__icon svg {
  display: block;
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0;
}

.topbar-social__icon:hover {
  color: #fff;
  transform: scale(1.15);
}

/* ─── LOGO GRANDE ────────────────────────────────────────── */

/* Cuando usan imagen como logo (the_custom_logo) */
.site-logo .custom-logo-link {
  display: flex;
  align-items: center;
}

.site-logo .custom-logo {
  max-height: 56px;   /* altura máxima — ajustable desde Customizer */
  width: auto;
  height: auto;
  display: block;
}

/* Cuando usan logo de texto */
.logo-text-link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-decoration: none;
}

.logo-name {
  font-family: var(--font-display);
  font-size: 26px;   /* más grande que antes (era 22px) */
  font-weight: 700;
  color: var(--red);
  line-height: 1;
  letter-spacing: -.02em;
}

.logo-sub {
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-ghost);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-family: var(--font-tight);
}

/* Header más alto para acomodar logo grande */
.header-inner { height: 72px; } /* antes 64px */

/* ─── SIDEBAR: THREADS ───────────────────────────────────── */
.si-threads {
  background: #000;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

/* ─── MOBILE UPDATES ─────────────────────────────────────── */
@media (max-width: 768px) {
  .topbar-social   { gap: 8px; }
  .topbar-social__icon { width: 20px; height: 20px; }
  .topbar-social__icon svg { width: 15px !important; height: 15px !important; }
  .logo-name       { font-size: 20px; }
  .header-inner    { height: 60px; }
}

@media (max-width: 480px) {
  .topbar-social   { gap: 6px; } /* mantiene iconos visibles en pantallas muy chicas */
}


/* ═══════════════════════════════════════════════════════════
   SINGLE — Vista de artículo individual
═══════════════════════════════════════════════════════════ */

.single-wrap { padding: 28px 0 48px; }

/* Breadcrumb */
.single-breadcrumb {
  font-size: 12px;
  color: var(--ink-ghost);
  font-family: var(--font-tight);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.single-breadcrumb a { color: var(--ink-soft); transition: color .15s; }
.single-breadcrumb a:hover { color: var(--red); }
.single-breadcrumb .current {
  color: var(--ink-ghost);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 300px;
}

/* Categoría */
.single-cat { margin-bottom: 12px; }

/* Título */
.single-title {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
  letter-spacing: -.02em;
  margin-bottom: 16px;
}

/* Excerpt / bajada */
.single-excerpt {
  font-size: 18px;
  font-weight: 500;
  color: var(--ink-soft);
  line-height: 1.6;
  margin-bottom: 20px;
  border-left: 3px solid var(--red);
  padding-left: 16px;
  font-family: var(--font-body);
}

/* Meta */
.single-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.single-meta__author {
  display: flex;
  align-items: center;
  gap: 10px;
}

.single-meta__avatar {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50%;
  flex-shrink: 0;
}

.single-meta__author-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  font-family: var(--font-tight);
  display: block;
}
.single-meta__author-name a { color: inherit; transition: color .15s; }
.single-meta__author-name a:hover { color: var(--red); }

.single-meta__date {
  font-size: 11px;
  color: var(--ink-ghost);
  font-family: var(--font-tight);
  display: block;
}

.single-meta__updated { color: var(--ink-ghost); }

.single-meta__right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.single-meta__read-time {
  font-size: 11px;
  color: var(--ink-ghost);
  font-family: var(--font-tight);
  white-space: nowrap;
}

/* Botones de compartir */
.single-share {
  display: flex;
  align-items: center;
  gap: 6px;
}

.single-share__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  color: #fff;
  transition: filter .15s, transform .15s;
  text-decoration: none;
  flex-shrink: 0;
}

.single-share__btn:hover { filter: brightness(1.15); transform: scale(1.08); }

.single-share__btn--x    { background: #000; }
.single-share__btn--fb   { background: #1877F2; }
.single-share__btn--wa   { background: #25D366; }
.single-share__btn--tg   { background: #26A5E4; }
.single-share__btn--copy { background: var(--ink-mid); }
.single-share__btn--copy.copied { background: var(--cat-eco); }
.single-share__btn--native { background: var(--red); }

/* Imagen destacada */
.single-featured-img {
  margin: 0 0 28px;
  border-radius: 6px;
  overflow: hidden;
}

.single-featured-img img {
  width: 100%;
  height: auto;
  display: block;
}

.single-featured-img__caption {
  font-size: 12px;
  color: var(--ink-ghost);
  font-family: var(--font-tight);
  padding: 8px 12px;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
  font-style: italic;
}

/* Contenido del artículo */
.single-content {
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink-mid);
  margin-bottom: 32px;
}

.single-content p { margin-bottom: 1.4em; }

.single-content h2 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--ink);
  margin: 1.8em 0 .6em;
  line-height: 1.3;
}

.single-content h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
  margin: 1.5em 0 .5em;
}

.single-content h4 {
  font-family: var(--font-tight);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin: 1.2em 0 .4em;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.single-content a {
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .15s;
}
.single-content a:hover { color: var(--red-dark); }

.single-content blockquote {
  border-left: 4px solid var(--red);
  padding: 12px 20px;
  margin: 1.5em 0;
  background: var(--red-pale);
  border-radius: 0 6px 6px 0;
  font-style: italic;
  font-size: 18px;
  color: var(--ink-mid);
}

.single-content blockquote cite {
  display: block;
  font-size: 13px;
  font-style: normal;
  font-weight: 600;
  color: var(--ink-ghost);
  margin-top: 8px;
  font-family: var(--font-tight);
}

/* Bloques de código (ej: contenido pegado desde Markdown/Substack con ```).
   Sin esto, <pre> usa el comportamiento por defecto del navegador — no
   ajusta el ancho de línea y puede desbordar el contenedor, rompiendo el
   layout en pantallas angostas. */
.single-content pre {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 14px 16px;
  margin: 1.5em 0;
  overflow-x: auto;
  max-width: 100%;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 13px;
  line-height: 1.6;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  color: var(--ink-mid);
}

.single-content code {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  background: var(--bg);
  padding: 2px 5px;
  border-radius: 3px;
  font-size: .9em;
}

.single-content pre code {
  background: none;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
}

.single-content ul,
.single-content ol {
  padding-left: 24px;
  margin-bottom: 1.4em;
}

.single-content li { margin-bottom: .5em; }

.single-content ul li { list-style: disc; }
.single-content ol li { list-style: decimal; }

.single-content img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  margin: 1em 0;
}

.single-content figure { margin: 1.5em 0; }

.single-content figcaption {
  font-size: 12px;
  color: var(--ink-ghost);
  font-family: var(--font-tight);
  text-align: center;
  margin-top: 6px;
  font-style: italic;
}

.single-content iframe,
.single-content video {
  max-width: 100%;
  border-radius: 4px;
}

/* Videos embebidos (YouTube, Vimeo, etc.): fuerza proporción 16:9 real.
   Sin esto, el iframe trae un alto fijo en HTML (ej. 281px) que no se
   ajusta al achicar el ancho en pantallas angostas — el video queda
   deformado/estirado en vez de mantener su proporción original. */
.single-content iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  display: block;
}

.single-content hr {
  border: none;
  border-top: 1px solid var(--rule);
  margin: 2em 0;
}

.single-content .wp-caption { max-width: 100%; }

/* Tags */
.single-tags {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 16px 0;
  border-top: 1px solid var(--rule);
  margin-bottom: 28px;
}

.single-tags__label {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-ghost);
  font-family: var(--font-tight);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.single-tag {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-soft);
  font-family: var(--font-tight);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 3px 10px;
  transition: border-color .15s, color .15s;
  text-decoration: none;
}
.single-tag:hover { border-color: var(--red); color: var(--red); }

/* Bio del autor */
.single-author-box {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 32px;
}

.single-author-box__avatar {
  width: 64px !important;
  height: 64px !important;
  border-radius: 50%;
  flex-shrink: 0;
}

.single-author-box__label {
  font-size: 10px;
  font-weight: 700;
  color: var(--ink-ghost);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-family: var(--font-tight);
  display: block;
  margin-bottom: 4px;
}

.single-author-box__name {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  font-family: var(--font-tight);
  display: block;
  margin-bottom: 6px;
  text-decoration: none;
  transition: color .15s;
}
.single-author-box__name:hover { color: var(--red); }

.single-author-box__bio {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.55;
}

/* Relacionadas */
.single-related { margin-bottom: 32px; }

.single-related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.related-card {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
  transition: box-shadow .15s;
}
.related-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); }

.related-card__img {
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--rule);
}
.related-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.related-card:hover .related-card__img img { transform: scale(1.04); }

.related-card__body { padding: 12px 14px; }

.related-card__body h4 {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
  margin-bottom: 6px;
}
.related-card:hover h4 { color: var(--red); }

.related-card__date {
  font-size: 11px;
  color: var(--ink-ghost);
  font-family: var(--font-tight);
}

/* Mobile */
@media (max-width: 768px) {
  .single-title       { font-size: 26px; }
  .single-excerpt     { font-size: 16px; }
  .single-content     { font-size: 16px; }
  .single-meta        { flex-direction: column; align-items: flex-start; gap: 10px; }
  .single-related__grid { grid-template-columns: 1fr; }
  .single-author-box  { flex-direction: column; }
}

@media (max-width: 480px) {
  .single-title { font-size: 22px; }
  .single-related__grid { grid-template-columns: 1fr 1fr; gap: 10px; }
}


/* ═══════════════════════════════════════════════════════════
   ARCHIVE — Categorías, etiquetas, autor, fecha
═══════════════════════════════════════════════════════════ */

.archive-wrap { padding: 28px 0 48px; }

/* Cabecera */
.archive-header {
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 2px solid var(--ink);
}

.archive-header__type {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--red);
  font-family: var(--font-tight);
  margin-bottom: 6px;
}

.archive-header__title {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
  margin-bottom: 8px;
}

.archive-header__title em {
  font-style: italic;
  color: var(--red);
}

.archive-header__desc {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.55;
  max-width: 640px;
}

/* Bio de autor en archive */
.archive-author-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
}

.archive-author-meta__avatar {
  width: 64px !important;
  height: 64px !important;
  border-radius: 50%;
  flex-shrink: 0;
}

.archive-author-meta__name {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  font-family: var(--font-tight);
  display: block;
  margin-bottom: 4px;
}

.archive-author-meta__url {
  font-size: 12px;
  color: var(--red);
  font-family: var(--font-tight);
}

/* Post destacado en archive */
.archive-featured {
  background: var(--white);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--rule);
  margin-bottom: 4px;
}

.archive-featured__img {
  display: block;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--rule);
}

.archive-featured__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s;
}

.archive-featured:hover .archive-featured__img img { transform: scale(1.02); }

.archive-featured__body { padding: 20px 24px 24px; }

.archive-featured__title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
  margin-bottom: 10px;
}

.archive-featured__title a { color: inherit; text-decoration: none; }
.archive-featured__title a:hover { color: var(--red); }

.archive-featured__excerpt {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin-bottom: 12px;
}

.archive-featured__meta {
  font-size: 12px;
  color: var(--ink-ghost);
  font-family: var(--font-tight);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.archive-featured__meta .sep { color: var(--rule); }

/* Paginación */
.archive-pagination {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}

.archive-pagination .nav-links {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.archive-pagination .page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  font-family: var(--font-tight);
  text-decoration: none;
  transition: all .15s;
}

.archive-pagination .page-numbers:hover { border-color: var(--red); color: var(--red); }
.archive-pagination .page-numbers.current { background: var(--red); border-color: var(--red); color: #fff; }
.archive-pagination .page-numbers.dots { border: none; color: var(--ink-ghost); }

/* Sin resultados */
.archive-empty {
  padding: 40px 0;
  text-align: center;
  color: var(--ink-soft);
  font-size: 15px;
}

/* ═══════════════════════════════════════════════════════════
   PAGE — Páginas estáticas
═══════════════════════════════════════════════════════════ */

.page-wrap { padding: 32px 0 48px; }

.page-wrap--full {
  max-width: 860px;
  margin-inline: auto;
}

.page-featured-img {
  margin-bottom: 24px;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 21/9;
}

.page-featured-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-title {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.25;
  letter-spacing: -.02em;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 2px solid var(--ink);
}

/* ═══════════════════════════════════════════════════════════
   SEARCH — Resultados de búsqueda
═══════════════════════════════════════════════════════════ */

.search-page-form {
  margin-top: 16px;
  max-width: 480px;
}

.search-page-form .search-form {
  display: flex;
  gap: 8px;
}

.search-page-form .search-field {
  flex: 1;
  padding: 10px 14px;
  font-size: 14px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--white);
  color: var(--ink);
  outline: none;
  font-family: var(--font-body);
  transition: border-color .15s;
}

.search-page-form .search-field:focus { border-color: var(--red); }

.search-page-form .search-submit {
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  background: var(--red);
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--font-tight);
  transition: background .15s;
  white-space: nowrap;
}

.search-page-form .search-submit:hover { background: var(--red-dark); }

.article-item__thumb--empty {
  width: 100px;
  aspect-ratio: 4/3;
  background: var(--bg);
  border-radius: 3px;
  border: 1px solid var(--rule);
}

/* Mobile */
@media (max-width: 768px) {
  .archive-header__title { font-size: 24px; }
  .archive-featured__title { font-size: 20px; }
  .page-title { font-size: 26px; }
  .page-featured-img { aspect-ratio: 16/9; }
}


/* ═══════════════════════════════════════════════════════════
   404
═══════════════════════════════════════════════════════════ */

.error-404 { padding: 40px 0; }

.error-404__code {
  font-family: var(--font-display);
  font-size: 96px;
  font-weight: 700;
  color: var(--rule);
  line-height: 1;
  display: block;
  margin-bottom: 8px;
}

.error-404__title {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 10px;
}

.error-404__desc {
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.6;
  max-width: 480px;
}

.error-404__home {
  display: inline-block;
  margin-top: 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--red);
  font-family: var(--font-tight);
  text-decoration: none;
  transition: color .15s;
}

.error-404__home:hover { color: var(--red-dark); }


/* ═══════════════════════════════════════════════════════════
   HERO SLIDER
═══════════════════════════════════════════════════════════ */

.hero-slider-wrap { padding-bottom: 0; position: relative; }

/* Slides */
.hero-slider { position: relative; }

.hero-slide {
  display: none;
}

.hero-slide.is-active {
  display: block;
  animation: rnm-fade-in .5s ease both;
}

@keyframes rnm-fade-in {
  from { opacity: 0; transform: scale(1.01); }
  to   { opacity: 1; transform: scale(1); }
}

/* Controles */
.hero-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0 20px;
}

/* Flechas */
.hero-arrow {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink-soft);
  flex-shrink: 0;
  transition: border-color .15s, color .15s, background .15s;
}

.hero-arrow:hover {
  border-color: var(--red);
  color: var(--red);
  background: var(--red-pale);
}

/* Dots */
.hero-dots {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.hero-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: var(--rule);
  cursor: pointer;
  padding: 0;
  transition: background .2s, transform .2s;
  flex-shrink: 0;
}

.hero-dot.is-active {
  background: var(--red);
  transform: scale(1.3);
}

/* Barra de progreso */
.hero-progress {
  flex: 1;
  height: 2px;
  background: var(--rule);
  border-radius: 2px;
  overflow: hidden;
}

.hero-progress__bar {
  height: 100%;
  width: 0%;
  background: var(--red);
  border-radius: 2px;
}

/* Fecha en section-head */
.hero-date {
  font-size: 11px;
  color: var(--ink-ghost);
  font-family: var(--font-tight);
}

/* Mobile */
@media (max-width: 768px) {
  .hero-arrow { width: 30px; height: 30px; }
  .hero-dot   { width: 6px; height: 6px; }
}


/* ═══════════════════════════════════════════════════════════
   MÓDULOS DE PORTADA
═══════════════════════════════════════════════════════════ */

.portada-module { padding: 28px 0; background: var(--white); }
.portada-module + .portada-module { border-top: 1px solid var(--bg); }

/* Estilo destacado: 1 grande + lista lateral */
.mod-destacado {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 24px;
  align-items: start;
}

.mod-destacado__main { background: var(--white); }

.mod-destacado__img {
  display: block;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 6px;
  margin-bottom: 16px;
  background: var(--rule);
}

.mod-destacado__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .3s;
}

.mod-destacado__main:hover .mod-destacado__img img { transform: scale(1.02); }

.mod-destacado__body h2 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: 8px;
}

.mod-destacado__body h2 a { color: inherit; text-decoration: none; }
.mod-destacado__body h2 a:hover { color: var(--red); }

.mod-destacado__body .excerpt {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.55;
  margin-bottom: 8px;
}

.mod-destacado__body .meta {
  font-size: 11px;
  color: var(--ink-ghost);
  font-family: var(--font-tight);
}

.mod-destacado__side {
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--rule);
  padding-left: 24px;
}

.mod-destacado__side .article-item {
  grid-template-columns: 80px 1fr;
}

/* Mobile módulos */
@media (max-width: 768px) {
  .mod-destacado {
    grid-template-columns: 1fr;
  }
  .mod-destacado__side {
    border-left: none;
    border-top: 1px solid var(--rule);
    padding-left: 0;
    padding-top: 16px;
  }
}


/* ═══════════════════════════════════════════════════════════
   TABLET (iPad y similares) — al final del archivo a propósito:
   varias reglas base (.topbar-left, .single-related__grid,
   .mod-destacado, etc.) están definidas más abajo que donde vivía
   este bloque antes, y con la misma especificidad ganaba la que
   aparece último en el CSS — no la que coincide con la media
   query. Va al final para que siempre gane.
   ═══════════════════════════════════════════════════════════ */
/* ── TABLET (iPad y similares, portrait + landscape) ──────
   Sin este breakpoint, entre 769px y 1024px el sitio mostraba el menú de
   escritorio completo (8 categorías en una fila con overflow:hidden) sin
   espacio para todas — los links se recortaban/desaparecían en vez de
   acomodarse. El toggle de menú móvil recién se activaba en 768px, dejando
   afuera TODO el rango de tablet. */
@media (max-width: 1024px) {
  .topbar-links { display: none; }
  .topbar-left  { display: none; } /* hora/clima: no entra junto al resto en tablet */
  .topbar-sep   { display: none; }

  .nav-toggle { display: flex; }

  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--white);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    padding: 12px 20px;
    max-height: 70vh;
    overflow-y: auto;
  }

  .main-nav.is-open { display: block; }

  .main-nav__list { flex-direction: column; gap: 0; }

  .main-nav__list > li > a {
    padding: 10px 0;
    border-bottom: 1px solid var(--rule);
    border-radius: 0;
  }

  .hero-grid { grid-template-columns: 1fr 280px; }
  .grid-3-wrap { grid-template-columns: repeat(2, 1fr); }
  .two-col { grid-template-columns: 1fr 260px; gap: 24px; }
  .single-related__grid { grid-template-columns: repeat(2, 1fr); }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}

/* ── TABLET VERTICAL (iPad portrait: ~768-834px) ───────────
   Con sidebar al lado, la columna principal queda muy angosta para leer
   noticias con comodidad — se apila el sidebar debajo del contenido. */
@media (max-width: 900px) {
  .two-col { grid-template-columns: 1fr; }
  .sidebar { margin-top: 32px; }

  .mod-destacado { grid-template-columns: 1fr; }
  .mod-destacado__side {
    border-left: none;
    border-top: 1px solid var(--rule);
    padding-left: 0;
    padding-top: 16px;
  }
}