/* ============================================================
   BUSCADORDECOCHES.NET — CSS SECCIÓN DE NOTICIAS
   Archivo: /css/news.css
   Cubre: portada de noticias + artículo interior
============================================================ */

/* ── TIPOGRAFÍA EDITORIAL (Lora para el cuerpo del artículo) ── */
.article-body {
  font-family: 'Lora', Georgia, serif;
  font-size: 1.0625rem;
  line-height: 1.85;
  color: #1a1a2e;
}

.article-body p      { margin-bottom: 1.3em; }
.article-body h2     { font-family: 'Inter', sans-serif; font-size: 1.25rem; font-weight: 800; color: var(--black); margin: 2em 0 .8em; line-height: 1.25; }
.article-body h3     { font-family: 'Inter', sans-serif; font-size: 1.05rem; font-weight: 700; color: var(--black); margin: 1.6em 0 .6em; }
.article-body ul     { padding-left: 1.4em; margin-bottom: 1.3em; }
.article-body ol     { padding-left: 1.4em; margin-bottom: 1.3em; }
.article-body li     { margin-bottom: .5em; }
.article-body strong { font-weight: 700; color: var(--black); }
.article-body em     { font-style: italic; }
.article-body a      { color: var(--red); text-decoration: underline; }
.article-body a:hover{ opacity: .8; }
.article-body blockquote {
  border-left: 4px solid var(--red);
  padding: 12px 0 12px 20px;
  margin: 1.5em 0;
  background: var(--g50);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-style: italic;
  color: var(--g600);
}
.article-body img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  margin: 1.5em 0;
}
.article-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5em 0;
  font-family: 'Inter', sans-serif;
  font-size: .875rem;
}
.article-body th, .article-body td {
  padding: 8px 12px;
  border: 1px solid var(--g200);
  text-align: left;
}
.article-body thead th {
  background: var(--g50);
  font-weight: 700;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .3px;
}


/* ── CATEGORY NAV ── */
.cat-nav {
  background: var(--white);
  border-bottom: 1px solid var(--g200);
}

.cat-nav-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-lg);
  display: flex;
  gap: 0;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.cat-nav-inner::-webkit-scrollbar { display: none; }

.cat-nav-link {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 12px 14px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--g600);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: color .15s, border-color .15s;
}

.cat-nav-link:hover { color: var(--black); }

.cat-nav-link--active {
  color: var(--red);
  border-bottom-color: var(--red);
}

.cat-count {
  font-size: .65rem;
  background: var(--g100);
  color: var(--g500);
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  font-weight: 700;
}

.cat-nav-link--active .cat-count {
  background: rgba(245,130,31,.1);
  color: var(--red);
}


/* ── PORTADA: LAYOUT ── */
.news-main { padding: 20px 0 48px; background: var(--g50); }

.news-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 24px;
  align-items: start;
}

/* Section header */
.news-section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.news-section-title {
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--black);
  margin-bottom: 3px;
}

.news-section-sub {
  font-size: .8rem;
  color: var(--g500);
}

/* Search */
.news-search-form {
  display: flex;
  gap: 6px;
}

.news-search-input {
  height: 36px;
  width: 200px;
  border: 1.5px solid var(--g200);
  border-radius: var(--radius-pill);
  padding: 0 12px;
  font-size: .8rem;
  color: var(--black);
  background: var(--white);
  outline: none;
}

.news-search-input:focus { border-color: var(--red); }

.news-search-btn {
  width: 36px;
  height: 36px;
  background: var(--red);
  border: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--white);
  cursor: pointer;
  transition: background .15s;
}

.news-search-btn:hover { background: var(--red-dark); }


/* ── HERO ARTÍCULO ── */
.hero-article {
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 20px;
  box-shadow: var(--shadow-md);
  text-decoration: none;
  position: relative;
}

.hero-article__img {
  position: relative;
  height: 380px;
  background: linear-gradient(135deg, #1a1a2e, #2a2a50);
  overflow: hidden;
}

/* Fondos por categoría (portada) */
.hero-article__img--electricos  { background: linear-gradient(135deg, #0a1a0a, #0a3a20); }
.hero-article__img--novedades   { background: linear-gradient(135deg, #1a1a2e, #2a1a3e); }
.hero-article__img--comparativas{ background: linear-gradient(135deg, #1a0a0a, #3a1010); }
.hero-article__img--consejos    { background: linear-gradient(135deg, #1a1500, #3a2d00); }
.hero-article__img--motos       { background: linear-gradient(135deg, #1a0a1a, #3a1040); }
.hero-article__img--f1          { background: linear-gradient(135deg, #1a0000, #4a0000); }
.hero-article__img--mercado     { background: linear-gradient(135deg, #001a1a, #003a40); }

.hero-article__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}

.hero-article:hover .hero-article__img img { transform: scale(1.03); }

.hero-article__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.3) 50%, transparent 100%);
}

.hero-article__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px;
}

.hero-article__cat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(4px);
  border-radius: var(--radius-pill);
  padding: 3px 11px;
  font-size: .65rem;
  font-weight: 700;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: .3px;
  margin-bottom: 10px;
}

.hero-article__title {
  font-size: 1.45rem;
  font-weight: 900;
  color: var(--white);
  line-height: 1.25;
  margin-bottom: 10px;
  text-shadow: 0 1px 3px rgba(0,0,0,.3);
}

.hero-article__lead {
  font-size: .875rem;
  color: rgba(255,255,255,.75);
  line-height: 1.55;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hero-article__meta {
  font-size: .75rem;
  color: rgba(255,255,255,.55);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}


/* ── GRID DE ARTÍCULOS ── */
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}

/* Tarjeta de noticia en grid */
.news-card-item {
  background: var(--white);
  border: 1px solid var(--g200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  transition: box-shadow .18s, transform .15s;
}

.news-card-item:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.news-card-thumb {
  height: 150px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #1a1a2e, #2a2a50);
}

/* Fondos de placeholder por categoría */
.news-card-thumb--electricos   { background: linear-gradient(135deg, #0a1a0a, #0a3a20); }
.news-card-thumb--novedades    { background: linear-gradient(135deg, #1a1a2e, #2a1a3e); }
.news-card-thumb--comparativas { background: linear-gradient(135deg, #1a0a0a, #3a1010); }
.news-card-thumb--consejos     { background: linear-gradient(135deg, #1a1500, #3a2d00); }
.news-card-thumb--motos        { background: linear-gradient(135deg, #1a0a1a, #3a1040); }
.news-card-thumb--f1           { background: linear-gradient(135deg, #1a0000, #4a0000); }
.news-card-thumb--mercado      { background: linear-gradient(135deg, #001a1a, #003a40); }
.news-card-thumb--legislacion  { background: linear-gradient(135deg, #0a0a1a, #202050); }
.news-card-thumb--clasicos     { background: linear-gradient(135deg, #1a0f00, #3a2000); }

.news-card-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}

.news-card-item:hover .news-card-thumb img { transform: scale(1.04); }

.news-card-placeholder {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  opacity: .4;
}

.news-card-body {
  padding: 13px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.news-card-cat {
  font-size: .65rem;
  font-weight: 800;
  color: var(--red);
  text-transform: uppercase;
  letter-spacing: .4px;
}

.news-card-title {
  font-size: .875rem;
  font-weight: 700;
  color: var(--black);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-card-excerpt {
  font-size: .775rem;
  color: var(--g500);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  border-top: 1px solid var(--g100);
  margin-top: auto;
}

.news-card-date { font-size: .7rem; color: var(--g400); }
.news-card-read { font-size: .7rem; color: var(--g400); }

/* Slot in-feed dentro del grid */
.ad-slot--infeed-news {
  background: rgba(240,192,64,.06);
  border: 1.5px dashed rgba(240,192,64,.5);
  border-radius: var(--radius-lg);
  padding: 14px;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
  text-align: center;
}

.ad-infeed-news-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ad-infeed-news-body strong {
  font-size: .8rem;
  font-weight: 800;
  color: #b87800;
}

.ad-infeed-news-body span {
  font-size: .7rem;
  color: #b87800;
  opacity: .7;
}


/* ── VACÍO ── */
.news-empty {
  text-align: center;
  padding: 60px 20px;
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--g200);
}

.news-empty__icon { font-size: 2.5rem; margin-bottom: 12px; }
.news-empty h3    { font-size: 1rem; font-weight: 800; margin-bottom: 6px; }
.news-empty p     { font-size: .875rem; color: var(--g500); margin-bottom: 18px; }


/* ── PAGINACIÓN ── */
.news-pagination {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 8px;
}

.npag-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--g200);
  background: var(--white);
  font-size: .8rem;
  font-weight: 600;
  color: var(--g600);
  text-decoration: none;
  transition: all .15s;
}

.npag-btn:hover { border-color: var(--red); color: var(--red); }

.npag-btn--active {
  background: var(--red);
  border-color: var(--red);
  color: var(--white);
  pointer-events: none;
}

.npag-btn--arrow { gap: 4px; padding: 0 12px; }


/* ══════════════════════════════════════
   SIDEBAR (compartido portada + artículo)
══════════════════════════════════════ */

.news-sidebar,
.article-sidebar {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 70px;
}

/* Widgets */
.sidebar-widget {
  background: var(--white);
  border: 1px solid var(--g200);
  border-radius: var(--radius-lg);
  padding: 14px;
  box-shadow: var(--shadow-sm);
}

.sidebar-widget__title {
  font-size: .8125rem;
  font-weight: 800;
  color: var(--black);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--g100);
}

/* Trending list */
.trending-list { list-style: none; }

.trending-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--g50);
}

.trending-item:last-child { border: none; }

.trending-num {
  width: 20px;
  font-size: .8rem;
  font-weight: 900;
  color: var(--g300);
  text-align: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.trending-num--hot { color: var(--red); }

.trending-info { flex: 1; min-width: 0; }

.trending-title {
  display: block;
  font-size: .8rem;
  font-weight: 700;
  color: var(--black);
  text-decoration: none;
  line-height: 1.35;
  margin-bottom: 3px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.trending-title:hover { color: var(--red); }

.trending-meta {
  font-size: .65rem;
  color: var(--g400);
}

/* Newsletter */
.sidebar-newsletter {
  background: linear-gradient(135deg, var(--black), #1a1a2e);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow-md);
}

.sidebar-newsletter__icon { font-size: 1.5rem; margin-bottom: 8px; }

.sidebar-newsletter__title {
  font-size: .875rem;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 4px;
}

.sidebar-newsletter__sub {
  font-size: .75rem;
  color: rgba(255,255,255,.45);
  margin-bottom: 12px;
  line-height: 1.4;
}

.newsletter-form { display: flex; flex-direction: column; gap: 7px; }

.newsletter-input {
  height: 36px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--radius-sm);
  padding: 0 10px;
  font-size: .8rem;
  color: var(--white);
  background: rgba(255,255,255,.08);
  outline: none;
}

.newsletter-input::placeholder { color: rgba(255,255,255,.35); }
.newsletter-input:focus { border-color: var(--red); background: rgba(255,255,255,.12); }

.newsletter-btn {
  height: 34px;
  background: var(--red);
  color: var(--white);
  border: none;
  border-radius: var(--radius-sm);
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s;
}

.newsletter-btn:hover { background: var(--red-dark); }
.newsletter-legal { font-size: .65rem; color: rgba(255,255,255,.25); margin-top: 6px; text-align: center; }

/* Tags cloud */
.tags-cloud { display: flex; flex-wrap: wrap; gap: 6px; }

.tag-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--g200);
  background: var(--g50);
  font-size: .75rem;
  font-weight: 600;
  color: var(--g600);
  text-decoration: none;
  transition: all .15s;
}

.tag-pill:hover,
.tag-pill--active {
  border-color: var(--red);
  color: var(--red);
  background: var(--red-light);
}

/* Sidebar search */
.sidebar-search-form { display: flex; gap: 6px; }

.sidebar-search-input {
  flex: 1;
  height: 34px;
  border: 1.5px solid var(--g200);
  border-radius: var(--radius-sm);
  padding: 0 10px;
  font-size: .8rem;
  color: var(--black);
  background: var(--g50);
  outline: none;
}

.sidebar-search-input:focus { border-color: var(--red); }

.sidebar-search-btn {
  height: 34px;
  padding: 0 12px;
  background: var(--red);
  color: var(--white);
  border: none;
  border-radius: var(--radius-sm);
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
}

/* Ad slots sidebar */
.ad-slot--mpu {
  min-height: 175px;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  text-align: center;
  border-radius: var(--radius-lg);
}

.ad-slot--half {
  min-height: 100px;
  flex-direction: column;
  gap: 5px;
  padding: 12px;
  text-align: center;
  border-radius: var(--radius-md);
}


/* ══════════════════════════════════════
   ARTÍCULO INTERIOR
══════════════════════════════════════ */

.page-article { background: var(--g50); }

.article-page { padding: 20px 0 60px; }

.article-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 28px;
  align-items: start;
}

.article-main {
  background: var(--white);
  border: 1px solid var(--g200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

/* Cabecera del artículo */
.article-header { padding: 28px 32px 0; }

.article-cat-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(245,130,31,.08);
  border: 1px solid rgba(245,130,31,.2);
  border-radius: var(--radius-pill);
  padding: 3px 12px;
  font-size: .65rem;
  font-weight: 800;
  color: var(--red);
  text-transform: uppercase;
  letter-spacing: .3px;
  text-decoration: none;
  margin-bottom: 14px;
}

.article-cat-tag:hover { background: rgba(245,130,31,.14); }

.article-title {
  font-size: 1.75rem;
  font-weight: 900;
  color: var(--black);
  line-height: 1.2;
  letter-spacing: -.03em;
  margin-bottom: 14px;
}

.article-lead {
  font-family: 'Lora', Georgia, serif;
  font-size: 1.05rem;
  color: var(--g600);
  line-height: 1.7;
  margin-bottom: 18px;
}

.article-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--g100);
  flex-wrap: wrap;
}

.article-author {
  display: flex;
  align-items: center;
  gap: 10px;
}

.article-author-avatar {
  font-size: 1.25rem;
  width: 36px; height: 36px;
  background: var(--g100);
  border-radius: 50%;
  display: grid; place-items: center;
  flex-shrink: 0;
}

.article-author-name { font-size: .8rem; font-weight: 700; color: var(--black); }
.article-meta-sep    { color: var(--g300); }
.article-date        { font-size: .75rem; color: var(--g500); }
.article-read-time   { font-size: .75rem; color: var(--g500); }
.article-views       { font-size: .75rem; color: var(--g400); }

/* Botones de compartir */
.article-share {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  font-size: .75rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid var(--g200);
  background: var(--white);
  color: var(--g600);
  transition: all .15s;
}

.share-btn:hover           { border-color: var(--g300); color: var(--black); }
.share-btn--x              { font-style: normal; }
.share-btn--x:hover        { background: var(--black); color: var(--white); border-color: var(--black); }
.share-btn--wa:hover       { background: #25D366; color: var(--white); border-color: #25D366; }
.share-btn--native:hover   { border-color: var(--red); color: var(--red); }

/* Imagen de portada */
.article-cover {
  width: 100%;
  height: 380px;
  overflow: hidden;
  position: relative;
}

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

.article-cover--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1a1a2e, #2a2a50);
}

/* Mismos colores por categoría */
.article-cover--electricos   { background: linear-gradient(135deg, #0a1a0a, #0a3a20); }
.article-cover--novedades    { background: linear-gradient(135deg, #1a1a2e, #2a1a3e); }
.article-cover--comparativas { background: linear-gradient(135deg, #1a0a0a, #3a1010); }
.article-cover--consejos     { background: linear-gradient(135deg, #1a1500, #3a2d00); }
.article-cover--motos        { background: linear-gradient(135deg, #1a0a1a, #3a1040); }
.article-cover--f1           { background: linear-gradient(135deg, #1a0000, #4a0000); }

.cover-placeholder-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: .35;
}

.cover-cat-icon  { font-size: 3rem; }
.cover-cat-label { font-size: .875rem; font-weight: 700; color: var(--white); text-transform: uppercase; letter-spacing: .4px; }

/* Slot in-content del artículo */
.ad-slot--article {
  margin: 0;
  border-radius: 0;
  border-left: none;
  border-right: none;
}

/* Cuerpo del artículo */
.article-body { padding: 28px 32px; }

/* Tags */
.article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 0 32px 24px;
}

.article-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--g200);
  background: var(--g50);
  font-size: .75rem;
  font-weight: 600;
  color: var(--g600);
  text-decoration: none;
  transition: all .15s;
}

.article-tag:hover { border-color: var(--red); color: var(--red); background: var(--red-light); }

/* Footer del artículo */
.article-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 20px 32px;
  background: var(--g50);
  border-top: 1px solid var(--g200);
  flex-wrap: wrap;
}

.article-footer-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.article-footer-avatar {
  width: 42px; height: 42px;
  background: var(--g100);
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}

.article-footer-name { font-size: .875rem; font-weight: 700; color: var(--black); margin-bottom: 2px; }
.article-footer-bio  { font-size: .75rem; color: var(--g500); }

.article-footer-share {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .8rem;
  color: var(--g500);
  flex-shrink: 0;
}

.article-share--footer { gap: 6px; }

/* Secciones del artículo (coches + relacionadas) */
.article-section-title {
  font-family: 'Inter', sans-serif;
  font-size: .9375rem;
  font-weight: 800;
  color: var(--black);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--g100);
}

/* Coches relacionados */
.article-cars { padding: 20px 32px; border-top: 1px solid var(--g100); }

.article-cars-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.article-car-card {
  border: 1px solid var(--g200);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: box-shadow .18s, transform .15s;
}

.article-car-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

.article-car-thumb {
  position: relative;
  height: 110px;
  background: var(--g100);
  overflow: hidden;
}

.article-car-thumb img { width: 100%; height: 100%; object-fit: cover; }

.article-car-noimg {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; opacity: .3;
}

.article-car-price {
  position: absolute;
  bottom: 6px; left: 6px;
  background: rgba(17,17,17,.75);
  color: var(--white);
  font-size: .7rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 5px;
}

.article-car-body { padding: 9px 10px; }

.article-car-make  { font-size: .6rem; font-weight: 700; color: var(--red); text-transform: uppercase; letter-spacing: .4px; }
.article-car-model { font-size: .8rem; font-weight: 700; color: var(--black); margin: 2px 0 3px; }
.article-car-specs { font-size: .7rem; color: var(--g500); }

/* Relacionadas */
.article-related { padding: 20px 32px; border-top: 1px solid var(--g100); }

.related-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.related-card {
  display: flex;
  gap: 11px;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--g200);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--white);
  transition: box-shadow .15s, transform .12s;
}

.related-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }

.related-thumb {
  width: 100px;
  height: 80px;
  flex-shrink: 0;
  overflow: hidden;
  background: linear-gradient(135deg, #1a1a2e, #2a2a50);
}

.related-thumb img { width: 100%; height: 100%; object-fit: cover; }

.related-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; opacity: .35;
}

.related-body {
  padding: 8px 10px 8px 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  justify-content: center;
  flex: 1;
  min-width: 0;
}

.related-cat  { font-size: .6rem; font-weight: 700; color: var(--red); text-transform: uppercase; letter-spacing: .3px; }
.related-title{ font-size: .8rem; font-weight: 700; color: var(--black); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.related-meta { font-size: .65rem; color: var(--g400); }

/* Barra de progreso de lectura */
.reading-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: transparent;
  z-index: 9999;
  pointer-events: none;
}

.reading-progress__bar {
  height: 100%;
  background: var(--red);
  width: 0%;
  transition: width .1s linear;
  border-radius: 0 2px 2px 0;
}


/* ── BREADCRUMB compartido ── */
.breadcrumb-bar {
  background: var(--white);
  border-bottom: 1px solid var(--g200);
  padding: 8px 0;
}

.breadcrumb-bar .container {
  display: flex;
  align-items: center;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .75rem;
  color: var(--g400);
  list-style: none;
  flex-wrap: wrap;
}

.breadcrumb a { color: var(--g500); text-decoration: none; }
.breadcrumb a:hover { color: var(--red); }

/* ── RESPONSIVE ── */

@media (max-width: 900px) {
  .news-layout    { grid-template-columns: 1fr; }
  .article-layout { grid-template-columns: 1fr; }
  .news-sidebar   { position: static; }
  .article-sidebar{ position: static; }

  .news-grid { grid-template-columns: 1fr 1fr; }
  .hero-article__img { height: 260px; }
  .hero-article__title { font-size: 1.1rem; }

  .article-title { font-size: 1.35rem; }
  .article-header, .article-body, .article-footer { padding-left: 20px; padding-right: 20px; }
  .article-cover { height: 240px; }

  .article-cars-grid { grid-template-columns: repeat(2, 1fr); }
  .article-cars, .article-related, .article-tags { padding-left: 20px; padding-right: 20px; }

  .related-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .news-grid { grid-template-columns: 1fr; }
  .article-cars-grid { grid-template-columns: 1fr 1fr; }
  .hero-article__img { height: 220px; }
  .article-meta { flex-direction: column; align-items: flex-start; }
  .article-footer { flex-direction: column; align-items: flex-start; }
  .news-section-header { flex-direction: column; align-items: flex-start; }
  .news-search-form { width: 100%; }
  .news-search-input { flex: 1; }
  .related-thumb { width: 80px; height: 65px; }
}