/* BateríaSolares — Estilos globales del tema hijo */

/* ====================================================
   Reset / base
   ==================================================== */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--text-body);
  background: var(--surface-page);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--fw-black);
  color: var(--text-heading);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin: 0 0 var(--space-4);
}

a { color: var(--text-link); }
a:hover { color: var(--color-primary-hover); }
img { max-width: 100%; height: auto; display: block; }

/* ====================================================
   Layout — desactivar sidebar de GP en single y categoría
   (GeneratePress añade .no-sidebar cuando hay filtros activos)
   ==================================================== */
.bs-no-sidebar .site-content .content-area {
  width: 100%;
  float: none;
}

/* ====================================================
   Contenedor principal
   ==================================================== */
.bs-container {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.bs-container--narrow {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ====================================================
   Botón primario (afiliado / CTA)
   ==================================================== */
.bs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.bs-btn--primary {
  background: var(--color-primary);
  color: var(--white);
  padding: 12px 24px;
  font-size: var(--fs-body);
  box-shadow: 0 2px 0 var(--orange-700);
}
.bs-btn--primary:hover { background: var(--color-primary-hover); color: var(--white); }
.bs-btn--primary:active { background: var(--color-primary-press); }

.bs-btn--cta {
  background: var(--color-cta);
  color: var(--color-cta-text);
  padding: 14px 28px;
  font-size: var(--fs-lg);
  box-shadow: var(--shadow-cta);
  width: 100%;
}
.bs-btn--cta:hover { background: var(--color-cta-hover); color: var(--color-cta-text); }
.bs-btn--cta:active { background: var(--color-cta-press); }

.bs-btn--ghost {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border-strong);
  padding: 8px 16px;
  font-size: var(--fs-sm);
}
.bs-btn--ghost:hover { color: var(--text-heading); border-color: var(--color-primary); }

/* ====================================================
   Badge
   ==================================================== */
.bs-badge {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  padding: 3px 10px;
}
.bs-badge--savings {
  background: var(--green-600);
  color: var(--white);
}
.bs-badge--offer {
  background: var(--orange-500);
  color: var(--white);
}
.bs-badge--rank {
  background: var(--navy-900);
  color: var(--white);
  min-width: 28px;
  text-align: center;
}
.bs-badge--award {
  background: var(--orange-50);
  color: var(--orange-700);
  border: 1px solid var(--orange-300);
}

/* ====================================================
   Estrellas
   ==================================================== */
.bs-stars {
  display: inline-flex;
  gap: 2px;
  color: var(--icon-star);
  font-size: 1rem;
  line-height: 1;
}
.bs-stars__score {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-left: 6px;
  align-self: center;
}

/* ====================================================
   Card de producto
   ==================================================== */
.bs-card-producto {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-card);
  box-shadow: var(--shadow-xs);
  height: 100%;
  text-decoration: none;
  color: inherit;
}
.bs-card-producto__media {
  position: relative;
  background: var(--surface-wash);
  aspect-ratio: 4/3;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bs-card-producto__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bs-card-producto__body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}
.bs-card-producto__nombre {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  color: var(--text-heading);
  line-height: var(--lh-snug);
}
.bs-card-producto__precios {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.bs-card-producto__precio-anterior {
  font-size: var(--fs-sm);
  color: var(--text-faint);
  text-decoration: line-through;
}
.bs-card-producto__precio-actual {
  font-family: var(--font-heading);
  font-weight: var(--fw-black);
  font-size: var(--fs-h3);
  color: var(--text-heading);
}
.bs-card-producto__footer {
  margin-top: auto;
  padding-top: var(--space-3);
}

/* ====================================================
   Card de artículo
   ==================================================== */
.bs-card-articulo {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background: var(--surface-card);
  box-shadow: var(--shadow-xs);
  height: 100%;
  text-decoration: none;
  color: inherit;
}
.bs-card-articulo__categoria {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}
.bs-card-articulo__titulo {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  color: var(--text-heading);
  line-height: var(--lh-snug);
  margin-bottom: var(--space-2);
}
.bs-card-articulo__excerpt {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: var(--lh-normal);
  flex: 1;
}

/* ====================================================
   Tabla de comparativa (ranking)
   ==================================================== */
.bs-comparison-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-5) 0;
  font-size: var(--fs-sm);
}
.bs-comparison-table th {
  background: var(--navy-900);
  color: var(--white);
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  padding: 10px 14px;
  text-align: left;
}
.bs-comparison-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
}
.bs-comparison-table tr:nth-child(even) td {
  background: var(--surface-wash);
}
.bs-comparison-table .bs-rank {
  font-family: var(--font-heading);
  font-weight: var(--fw-black);
  font-size: var(--fs-h3);
  color: var(--color-primary);
  text-align: center;
  width: 44px;
}
.bs-comparison-table__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-black);
  font-size: var(--fs-h3);
  color: var(--text-heading);
  margin-bottom: var(--space-4);
}

/* ====================================================
   Migas de pan — banda full-width con fondo gris
   ==================================================== */
.bs-breadcrumbs-bar {
  background: var(--surface-wash);
  border-bottom: 1px solid var(--border-subtle);
  width: 100%;
}
.bs-breadcrumbs {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 9px var(--gutter);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
}
.bs-breadcrumbs > span { display: inline-flex; align-items: center; }
.bs-sep {
  margin: 0 6px;
  color: var(--text-faint);
}
.bs-breadcrumbs a {
  color: var(--text-link);
  text-decoration: none;
  font-weight: var(--fw-regular);
}
.bs-breadcrumbs a:hover { color: var(--color-primary); text-decoration: underline; }
.bs-breadcrumbs .breadcrumb_last {
  color: var(--text-heading);
  font-weight: var(--fw-bold);
}

/* ====================================================
   TOC horizontal (sticky)
   ==================================================== */
.bs-toc-bar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--white);
  border-bottom: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-xs);
  display: flex;
  align-items: center;
}
.bs-toc-bar__inner {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 2px;
  overflow-x: auto;
  padding: 0 4px;
  white-space: nowrap;
  scrollbar-width: none;
}
.bs-toc-bar__inner::-webkit-scrollbar { display: none; }

/* Flechas de navegación del TOC */
.bs-toc-arrow {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 100%;
  border: none;
  background: var(--white);
  color: var(--text-muted);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.bs-toc-arrow:hover { color: var(--color-primary); background: var(--orange-50); }
.bs-toc-arrow--prev { border-right: 1px solid var(--border-subtle); padding: 0 4px 0 var(--gutter); }
.bs-toc-arrow--next { border-left: 1px solid var(--border-subtle);  padding: 0 var(--gutter) 0 4px; }
.bs-toc-chip {
  flex: none;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 15px 16px;
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 3px solid transparent;
  transition: color var(--dur) var(--ease);
  text-decoration: none;
}
.bs-toc-chip:hover { color: var(--text-heading); }
.bs-toc-chip.is-active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* ====================================================
   Single — layout 2 columnas
   ==================================================== */
.bs-single-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-7);
  align-items: stretch;
  max-width: var(--page-max);
  margin-inline: auto;
  padding: var(--space-6) var(--gutter) 0;
}
/* El article es un grid item: sin min-width:0 se expande al ancho de su
   contenido más ancho (p. ej. una tabla) y desborda la pista del grid,
   provocando scroll horizontal en toda la página. Con min-width:0 respeta
   la columna y el overflow-x:auto de la tabla scrollea solo la tabla. */
.bs-single-article,
.bs-single-article .bs-entry-content {
  min-width: 0;
}
@media (max-width: 860px) {
  .bs-single-layout {
    grid-template-columns: 1fr;
  }
  .bs-single-sidebar { display: none; }
  .bs-single-sidebar--mobile { display: block; }
}
/* El sidebar se estira a la altura del artículo (stretch).
   position:sticky en .bs-offer-card necesita ese espacio para desplazarse. */
.bs-single-sidebar {
  align-self: stretch;
}
.bs-single-sidebar--mobile { display: none; }

/* Estilos del H1 y metadatos del single */
.bs-single-h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin: 0 0 var(--space-4);
}
.bs-single-dates {
  font-size: var(--fs-sm);
  color: var(--text-faint);
  margin-bottom: var(--space-4);
}
.bs-single-thumb { margin-bottom: var(--space-5); }
.bs-single-thumb__img {
  border-radius: var(--radius-md);
  width: 100%;
  height: auto;
}
.bs-single-section { margin-top: var(--space-7); }

/* ====================================================
   Offer card (sidebar sticky)
   ==================================================== */
.bs-offer-card {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-md);
  background: var(--white);
  position: sticky;
  top: 72px;       /* altura del header */
}
.bs-offer-card__precios {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: var(--space-3) 0 var(--space-2);
}
.bs-offer-card__precio-anterior {
  color: var(--text-faint);
  text-decoration: line-through;
  font-size: var(--fs-lg);
}
.bs-offer-card__precio-actual {
  font-family: var(--font-heading);
  font-weight: var(--fw-black);
  font-size: var(--fs-h1);
  color: var(--text-heading);
}
.bs-offer-card__img {
  width: 100%;
  border-radius: var(--radius-md);
  display: block;
}
.bs-offer-card__stars {
  margin-top: var(--space-3);
  font-size: 1.1rem;
}
.bs-offer-card__cta {
  margin-top: var(--space-4);
}
.bs-offer-card__nota {
  font-size: var(--fs-xs);
  color: var(--text-faint);
  text-align: center;
  margin-top: var(--space-3);
}

/* ====================================================
   Bottom bar (mobile — solo en producto)
   ==================================================== */
.bs-bottom-bar {
  display: none;
}
@media (max-width: 860px) {
  .bs-bottom-bar {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--white);
    border-top: 1px solid var(--border-subtle);
    box-shadow: 0 -4px 14px rgba(13, 49, 83, 0.10);
    z-index: 50;
    padding: 10px var(--gutter);
  }
  .bs-bottom-bar__inner {
    max-width: var(--page-max);
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
  }
  .bs-bottom-bar__info {
    flex: 1 1 auto;
    min-width: 0;
  }
  .bs-bottom-bar__nombre {
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    font-size: var(--fs-sm);
    color: var(--text-heading);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .bs-bottom-bar .bs-btn--cta {
    flex: 0 0 auto;
    width: auto;
    white-space: nowrap;
  }
  body.has-bottom-bar { padding-bottom: 80px; }
}

/* ====================================================
   Pros / Contras
   ==================================================== */
.bs-pros-cons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin: var(--space-4) 0;
}
@media (max-width: 600px) {
  .bs-pros-cons { grid-template-columns: 1fr; }
}
.bs-pros-cons__col {
  border-radius: var(--radius-md);
  overflow: hidden;
}
.bs-pros-cons__header {
  padding: 10px 16px;
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--white);
}
.bs-pros-cons__header--pros { background: var(--blue-700); }
.bs-pros-cons__header--cons { background: var(--gray-600); }
.bs-pros-cons__list {
  list-style: none;
  margin: 0;
  padding: var(--space-3);
  background: var(--surface-wash);
  border: 1px solid var(--border-subtle);
  border-top: none;
}
.bs-pros-cons__item {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 6px 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}
.bs-pros-cons__icon { flex: none; font-size: 14px; margin-top: 2px; }
.bs-pros-cons__icon--pro { color: var(--icon-pro); }
.bs-pros-cons__icon--con { color: var(--icon-con); }

/* ====================================================
   Tabla de datos (especificaciones / comparativa de packs)
   ==================================================== */
.bs-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  margin: var(--space-4) 0;
}
.bs-data-table th {
  background: var(--surface-muted);
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  padding: 10px 12px;
  text-align: left;
  border-bottom: 2px solid var(--border-strong);
}
.bs-data-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: top;
}
.bs-data-table tr:last-child td { border-bottom: none; }
.bs-data-table tr:nth-child(even) td { background: var(--surface-wash); }

/* ====================================================
   FAQ acordeón (CSS puro)
   ==================================================== */
.bs-faq { margin: var(--space-4) 0; }
.bs-faq__item {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
  overflow: hidden;
}
.bs-faq__toggle {
  display: none;
}
.bs-faq__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  color: var(--text-heading);
  background: var(--surface-page);
  user-select: none;
}
.bs-faq__label::after {
  content: "+";
  flex: none;
  font-size: var(--fs-lg);
  color: var(--color-primary);
  transition: transform var(--dur) var(--ease);
}
.bs-faq__toggle:checked ~ .bs-faq__label::after {
  transform: rotate(45deg);
}
.bs-faq__body {
  display: none;
  padding: 0 var(--space-5) var(--space-4);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--text-body);
}
.bs-faq__toggle:checked ~ .bs-faq__body { display: block; }

/* ====================================================
   Bloque de autor
   ==================================================== */
.bs-autor {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-wash);
  margin: var(--space-6) 0;
}
.bs-autor__avatar {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-circle);
  object-fit: cover;
  flex: none;
}
.bs-autor__nombre {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  color: var(--text-heading);
  margin-bottom: 2px;
}
.bs-autor__cargo {
  font-size: var(--fs-sm);
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}
.bs-autor__bio {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: var(--lh-normal);
}
.bs-autor__links {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.bs-autor__link {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--blue-400);
  text-decoration: none;
}
.bs-autor__link:hover { text-decoration: underline; }

/* ====================================================
   Compartir en RRSS
   ==================================================== */
.bs-share {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  align-items: center;
  margin: var(--space-6) 0;
}
.bs-share__label {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.bs-share__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  text-decoration: none;
  border: 1px solid var(--border-subtle);
  color: var(--text-body);
  background: var(--white);
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.bs-share__btn:hover { background: var(--surface-wash); }
.bs-share__btn--x:hover { background: #000; color: var(--white); border-color: #000; }
.bs-share__btn--fb:hover { background: #1877f2; color: var(--white); border-color: #1877f2; }
.bs-share__btn--wa:hover { background: #25d366; color: var(--white); border-color: #25d366; }
.bs-share__copy-feedback {
  font-size: var(--fs-xs);
  color: var(--green-600);
  display: none;
}
.bs-share__copy-feedback.is-visible { display: inline; }

/* ====================================================
   Valoración y votos
   ==================================================== */
.bs-valoracion {
  text-align: center;
  padding: var(--space-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  margin: var(--space-6) 0;
}
.bs-valoracion__titulo {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  margin-bottom: var(--space-3);
}
.bs-valoracion__interactive .bs-stars__star {
  cursor: pointer;
  font-size: 1.5rem;
  transition: color var(--dur-fast);
}
.bs-valoracion__feedback {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-top: var(--space-2);
  min-height: 20px;
}

/* ====================================================
   Fuentes / referencias
   ==================================================== */
.bs-fuentes {
  margin: var(--space-6) 0;
  padding: var(--space-4) var(--space-5);
  border-left: 4px solid var(--border-accent);
  background: var(--surface-wash);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.bs-fuentes__titulo {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}
.bs-fuentes__list {
  list-style: disc;
  padding-left: var(--space-5);
  margin: 0;
}
.bs-fuentes__item {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: var(--lh-normal);
  margin-bottom: var(--space-1);
}
.bs-fuentes__item a { color: var(--text-link); }

/* ====================================================
   Relacionados
   ==================================================== */
.bs-relacionados {
  margin: var(--space-7) 0;
}
.bs-relacionados__titulo {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  color: var(--text-heading);
  margin-bottom: var(--space-4);
}
.bs-relacionados__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* ====================================================
   Fachada de vídeo
   ==================================================== */
.bs-video-facade {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  cursor: pointer;
  background: #000;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.bs-video-facade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity var(--dur) var(--ease);
}
.bs-video-facade:hover img { opacity: 0.85; }
.bs-video-facade__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.bs-video-facade__play-btn {
  width: 68px;
  height: 68px;
  background: rgba(255,0,0,0.9);
  border-radius: var(--radius-circle);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.bs-video-facade:hover .bs-video-facade__play-btn {
  background: #ff0000;
  transform: scale(1.1);
}
.bs-video-facade__play-btn svg {
  width: 28px;
  height: 28px;
  fill: white;
  margin-left: 4px;
}
.bs-video-facade iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* ====================================================
   Hero del home
   ==================================================== */
.bs-hero {
  background: var(--surface-header);
  color: var(--white);
  border-bottom: 3px solid var(--color-primary);
  padding: var(--space-8) var(--gutter);
}
.bs-hero__inner {
  max-width: var(--page-max);
  margin-inline: auto;
  text-align: center;
}
.bs-hero__badge { margin-bottom: var(--space-4); }
.bs-hero__titulo {
  font-family: var(--font-heading);
  font-weight: var(--fw-black);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--white);
  max-width: 760px;
  margin: 0 auto;
}
.bs-hero__desc {
  font-size: var(--fs-lg);
  color: rgba(255,255,255,.8);
  max-width: 620px;
  margin: var(--space-4) auto 0;
  line-height: var(--lh-normal);
}

/* Buscador del hero */
.bs-search-form {
  display: flex;
  gap: 10px;
  max-width: 560px;
  margin: var(--space-6) auto 0;
  background: var(--white);
  padding: 8px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
.bs-search-form input[type="search"] {
  flex: 1;
  border: none;
  outline: none;
  padding: 0 14px;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--text-body);
  background: transparent;
  min-width: 0;
}

/* Chips populares */
.bs-populares {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-top: var(--space-4);
}
.bs-populares__label {
  font-size: var(--fs-sm);
  color: rgba(255,255,255,.6);
}
.bs-populares__chip {
  font-size: var(--fs-sm);
  color: rgba(255,255,255,.9);
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: var(--radius-pill);
  padding: 4px 12px;
  transition: background var(--dur) var(--ease);
}
.bs-populares__chip:hover { background: rgba(255,255,255,.1); color: var(--white); }

/* ====================================================
   Sección de categoría en el home
   ==================================================== */
.bs-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--border-subtle);
}
.bs-section-header h2 { margin: 0; }

/* Grid de cards */
.bs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-5);
  align-items: stretch;
}
.bs-grid--4 { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

/* ====================================================
   Trust strip (bloques de valor)
   ==================================================== */
.bs-trust {
  background: var(--surface-wash);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-7) var(--space-6);
  margin: var(--space-8) 0;
}
.bs-trust__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-6);
}
.bs-trust__item {}
.bs-trust__bar {
  width: 36px;
  height: 4px;
  background: var(--color-primary);
  border-radius: var(--radius-pill);
  margin-bottom: 12px;
}
.bs-trust__titulo {
  font-family: var(--font-heading);
  font-weight: var(--fw-black);
  font-size: var(--fs-h3);
  color: var(--text-heading);
  margin-bottom: 6px;
}
.bs-trust__desc {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: var(--lh-normal);
  margin: 0;
}

/* ====================================================
   Newsletter placeholder
   ==================================================== */
.bs-newsletter {
  background: var(--navy-900);
  border-radius: var(--radius-md);
  padding: var(--space-7) var(--space-6);
  text-align: center;
  margin: var(--space-7) 0;
}
.bs-newsletter h2 {
  color: var(--white);
  font-size: var(--fs-h2);
}
.bs-newsletter p {
  color: rgba(255,255,255,.8);
  max-width: 520px;
  margin: var(--space-3) auto 0;
}
.bs-newsletter-form {
  display: flex;
  gap: 10px;
  max-width: 460px;
  margin: var(--space-5) auto 0;
  background: var(--white);
  padding: 8px;
  border-radius: var(--radius-md);
}
.bs-newsletter-form input[type="email"] {
  flex: 1;
  border: none;
  outline: none;
  padding: 0 14px;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--text-body);
  background: transparent;
  min-width: 0;
}

/* ====================================================
   GeneratePress — Header y navegación
   Diseño: fondo blanco, logo a la izquierda con padding,
   menú a la derecha en mayúsculas oscuras.
   ==================================================== */

/* Header: fondo blanco, sin border-bottom prominente */
.site-header {
  background-color: var(--white) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
}

/* Inside-header: flex, logo izq, nav dcha, centrado vertical,
   padding interno para que el logo no quede pegado al borde */
.inside-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  max-width: var(--page-max) !important;
  margin-inline: auto !important;
  padding: var(--space-3) var(--gutter) !important;
  width: 100% !important;
}

/* Logo / nombre del sitio */
.site-branding .main-title a,
.site-branding .main-title a:hover,
.site-branding .main-title a:focus {
  color: var(--text-heading) !important;
  font-family: var(--font-heading);
  font-weight: var(--fw-black);
  font-size: var(--fs-h3);
  text-decoration: none;
}

/* Imagen de logo si está configurada */
.site-branding .custom-logo {
  max-height: 44px;
  width: auto;
  display: block;
}

/* Descripción bajo el nombre */
.site-branding .site-description {
  color: var(--text-muted) !important;
  font-size: var(--fs-xs);
}

/* Fondo del área de nav: transparente (hereda el blanco del header) */
.main-navigation,
.main-navigation ul ul {
  background-color: var(--white) !important;
}

/* La nav de GP no debe tener su propio grid-container aparte;
   el inside-navigation hereda el espacio del inside-header */
#site-navigation .inside-navigation {
  background-color: transparent !important;
  padding: 0 !important;
}

/* Links del menú: texto oscuro */
.main-navigation .main-nav ul li a,
.main-navigation .menu-bar-items {
  color: var(--text-heading) !important;
}

/* Menú de primer nivel en desktop: flex horizontal */
#site-navigation .main-nav > ul {
  display: flex !important;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Links del primer nivel */
#site-navigation .main-nav > ul > li > a {
  padding: var(--space-2) var(--space-3) !important;
  font-family: var(--font-heading) !important;
  font-weight: var(--fw-bold) !important;
  font-size: var(--fs-xs) !important;
  letter-spacing: var(--ls-wide) !important;
  text-transform: uppercase !important;
  color: var(--text-heading) !important;
  border-radius: var(--radius-sm);
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}

/* Hover / activo primer nivel */
#site-navigation .main-nav > ul > li:not([class*="current-menu-"]):hover > a,
#site-navigation .main-nav > ul > li.sfHover:not([class*="current-menu-"]) > a {
  color: var(--color-primary) !important;
  background: var(--orange-50) !important;
}
.main-navigation .main-nav ul li[class*="current-menu-"] > a {
  color: var(--color-primary) !important;
}

/* ---- Submenús desplegables (ul ul) ----
   main.css de GP no se carga (el child reemplaza generate-style),
   así que reproducimos aquí las reglas de visibilidad del dropdown. */
.main-navigation ul ul {
  display: block;
  float: left;
  position: absolute;
  left: -99999px;
  opacity: 0;
  z-index: 99999;
  top: auto;
  transition: opacity 80ms linear;
  transition-delay: 0s;
  pointer-events: none;
  height: 0;
  overflow: hidden;
  /* Estilos BS */
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: var(--white) !important;
  border-top: 2px solid var(--orange-500);
  box-shadow: var(--shadow-md);
  min-width: 180px;
}

/* Mostrar al hacer hover (replica la lógica de main.css de GP) */
.main-navigation:not(.toggled) ul li:hover > ul,
.main-navigation:not(.toggled) ul li.sfHover > ul {
  left: auto;
  opacity: 1;
  transition-delay: 150ms;
  pointer-events: auto;
  height: auto;
  overflow: visible;
}

/* Sub-submenús (tercer nivel) */
.main-navigation:not(.toggled) ul ul li:hover > ul,
.main-navigation:not(.toggled) ul ul li.sfHover > ul {
  left: 100%;
  top: 0;
}

/* Links del submenú: tamaño normal, sin uppercase */
.main-navigation ul ul li a {
  font-family: var(--font-body) !important;
  font-size: var(--fs-sm) !important;
  font-weight: var(--fw-medium) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--text-heading) !important;
  padding: 9px 16px !important;
  display: block;
}
.main-navigation ul ul li a:hover {
  color: var(--color-primary) !important;
  background: var(--orange-50) !important;
}
.main-navigation ul ul li {
  border-bottom: 1px solid var(--border-subtle);
}
.main-navigation ul ul li:last-child { border-bottom: none; }

/* Botón hamburguesa en mobile: dark sobre fondo blanco */
.main-navigation .menu-toggle,
button.menu-toggle {
  color: var(--text-heading) !important;
  background: transparent !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius-sm);
}
button.menu-toggle:hover,
button.menu-toggle:focus {
  color: var(--color-primary) !important;
  background: var(--orange-50) !important;
}

/* Desktop: ocultar el mobile toggle wrapper y el toggle duplicado */
@media (min-width: 769px) {
  nav.mobile-menu-control-wrapper { display: none !important; }
  #site-navigation button.menu-toggle { display: none !important; }
  #site-navigation .main-nav { display: block !important; }
}

/* Mobile: ocultar #site-navigation, mostrar sólo el mobile-control-wrapper */
@media (max-width: 768px) {
  #site-navigation { display: none !important; }
  #site-navigation.toggled { display: block !important; }
  nav.mobile-menu-control-wrapper { display: block !important; }
  .inside-header { flex-wrap: wrap !important; }

  /* Logo más contenido en móvil: el header-image lleva width:150px
     fijo (del customizer) y sin límite de alto. Lo reducimos a ~56px
     de alto conservando proporción. */
  .site-logo img.header-image {
    height: 56px !important;
    width: auto !important;
    max-width: 100%;
  }

  /* ----------------------------------------------------
     Icono del toggle: GP mete dos SVG (barras + X) en el
     mismo .icon-menu-bars y su main.css (desencolado) los
     alterna. Lo reproducimos con aria-expanded del botón.
     ---------------------------------------------------- */
  .menu-toggle .gp-icon.icon-menu-bars svg {
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  }
  /* Cerrado: barras visibles, X oculta */
  .menu-toggle[aria-expanded="false"] .gp-icon.icon-menu-bars svg:last-child { display: none; }
  .menu-toggle[aria-expanded="false"] .gp-icon.icon-menu-bars svg:first-child { display: inline-block; }
  /* Abierto: barras ocultas, X visible (con micro-giro de entrada) */
  .menu-toggle[aria-expanded="true"] .gp-icon.icon-menu-bars svg:first-child { display: none; }
  .menu-toggle[aria-expanded="true"] .gp-icon.icon-menu-bars svg:last-child {
    display: inline-block;
    transform: rotate(90deg);
  }

  /* ----------------------------------------------------
     Menú móvil (estado .toggled): el child desencola el
     main.css de GP, así que reproducimos aquí el menú móvil.
     El JS de GP (menu.min.js) ya gestiona .toggled y, en el
     submenú, la clase .toggled-on + aria-expanded.
     ---------------------------------------------------- */

  /* El panel ocupa todo el ancho, bajo la cabecera */
  #site-navigation.toggled {
    width: 100%;
    border-top: 1px solid var(--border-subtle);
  }
  #site-navigation.toggled .inside-navigation { padding: 0 !important; }

  /* Primer nivel: apilado vertical, ancho completo */
  #site-navigation.toggled .main-nav > ul {
    display: block !important;
    width: 100%;
    gap: 0;
  }
  #site-navigation.toggled .main-nav ul li {
    display: block;
    width: 100%;
    border-bottom: 1px solid var(--border-subtle);
  }

  /* Enlaces: ancho completo, área táctil cómoda, sin uppercase comprimido */
  #site-navigation.toggled .main-nav ul li a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 10px var(--gutter) !important;
    font-size: var(--fs-sm) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    border-radius: 0 !important;
  }

  /* El item padre comparte fila con su flecha de submenú */
  #site-navigation.toggled .menu-item-has-children {
    position: relative;
  }
  #site-navigation.toggled .menu-item-has-children > a {
    padding-right: 56px !important;
  }

  /* Flecha de submenú: botón táctil a la derecha */
  #site-navigation.toggled .dropdown-menu-toggle {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    cursor: pointer;
    transition: transform var(--dur) var(--ease);
  }
  #site-navigation.toggled .dropdown-menu-toggle .gp-icon { display: flex; }
  #site-navigation.toggled .dropdown-menu-toggle svg {
    width: 14px;
    height: 14px;
    fill: var(--text-heading);
  }
  /* Rotar la flecha cuando el submenú está abierto */
  #site-navigation.toggled .dropdown-menu-toggle[aria-expanded="true"] {
    transform: rotate(180deg);
  }

  /* Submenú: acordeón (anula el position:absolute/left:-99999px del desktop) */
  #site-navigation.toggled .main-nav ul ul.sub-menu {
    position: static !important;
    left: auto !important;
    float: none !important;
    width: 100% !important;
    min-width: 0 !important;
    opacity: 1 !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: auto !important;
    border-top: none !important;
    box-shadow: none !important;
    background: var(--surface-wash) !important;
  }
  /* Abierto: el JS de GP añade .toggled-on */
  #site-navigation.toggled .main-nav ul ul.sub-menu.toggled-on {
    height: auto !important;
    overflow: visible !important;
  }
  /* Indentar los enlaces del submenú para jerarquía visual */
  #site-navigation.toggled .main-nav ul ul.sub-menu li a {
    padding-left: calc(var(--gutter) + var(--space-4)) !important;
    min-height: 44px;
  }
}

/* ====================================================
   GeneratePress — Footer
   ==================================================== */

/* Franja de widgets del footer */
.footer-widgets {
  background-color: var(--navy-800) !important;
  color: rgba(255, 255, 255, 0.8);
}

/* Barra inferior del footer (copyright de GP) */
.site-footer .site-info,
footer.site-info {
  background-color: var(--navy-900) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
}

/* Centrar el texto de copyright con el mismo max-width que el resto */
.site-footer .inside-site-info {
  max-width: var(--page-max) !important;
  margin-inline: auto !important;
  padding-inline: var(--gutter) !important;
  text-align: center;
}

.site-footer .site-info a,
footer.site-info a {
  color: var(--orange-300) !important;
}
.site-footer .site-info a:hover,
footer.site-info a:hover {
  color: var(--white) !important;
}

/* ====================================================
   GeneratePress — Contenedor principal
   Las plantillas BS gestionan su propio layout y padding,
   por lo que se eliminan los estilos de caja de GP en
   front-page, template-categoria y single.
   ==================================================== */

/* Quitar fondo blanco, sombra y padding del article wrapper de GP */
.home .inside-article,
.page-template-template-categoria .inside-article,
.single-post .inside-article {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* En separate-containers, el site-content también tiene padding propio de GP;
   quitarlo en las plantillas BS para que el hero ocupe el ancho completo */
.home.separate-containers .site-content,
.page-template-template-categoria.separate-containers .site-content {
  padding-top: 0;
}

/* Asegurar que el hero no quede encajonado en el grid de GP */
.home .site-main,
.home .content-area {
  padding: 0;
}

/* Footer: quitar margin-top — el footer-columns ya gestiona la separación */
.site-footer {
  margin-top: 0;
}

/* ====================================================
   Footer rico — columnas (bs-footer-columns)
   ==================================================== */
.bs-footer-columns {
  background-color: var(--navy-800);
  padding: var(--space-8) 0 var(--space-6);
}

.bs-footer-columns__inner {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--space-7);
}

@media (max-width: 640px) {
  .bs-footer-columns__inner {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
}

.bs-footer-col__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: var(--space-3);
}

.bs-footer-col__desc {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.6);
  line-height: var(--lh-normal);
  margin: var(--space-3) 0 0;
}

/* Logo en el footer */
.bs-footer-brand { text-decoration: none; display: inline-block; }

/* Texto fallback cuando no hay imagen de logo */
.bs-footer-brand__text {
  font-family: var(--font-heading);
  font-weight: var(--fw-black);
  font-size: var(--fs-h3);
  color: var(--white);
}

/* Imagen de logo: tamaño generoso + filtro para volverla blanca */
.bs-footer-brand__logo {
  max-height: 64px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
}

/* Lista de menú del footer */
.bs-footer-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.bs-footer-menu li { margin: 0; }
.bs-footer-menu a {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.bs-footer-menu a:hover {
  color: var(--white);
}


/* ====================================================
   Contenido editorial — tipografía del entry-content
   Estilos para todo lo que Gutenberg genera dentro de
   .entry-content / .bs-entry-content: tablas, listas,
   citas, código, encabezados, separadores, etc.
   ==================================================== */

.entry-content,
.bs-entry-content {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--text-body);
  max-width: var(--content-max);
}

/* Encabezados dentro del cuerpo */
.entry-content h2, .bs-entry-content h2 {
  font-family: var(--font-heading);
  font-weight: var(--fw-black);
  font-size: var(--fs-h2);
  color: var(--text-heading);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  margin: var(--space-7) 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--border-subtle);
}
.entry-content h3, .bs-entry-content h3 {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  color: var(--text-heading);
  margin: var(--space-5) 0 var(--space-2);
}
.entry-content h4, .bs-entry-content h4 {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body);
  color: var(--text-heading);
  margin: var(--space-4) 0 var(--space-2);
}

/* Párrafos */
.entry-content p, .bs-entry-content p {
  margin: 0 0 var(--space-4);
}

/* Listas */
.entry-content ul,
.entry-content ol,
.bs-entry-content ul,
.bs-entry-content ol {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-6);
}
.entry-content li, .bs-entry-content li {
  margin-bottom: var(--space-2);
  line-height: var(--lh-normal);
}
.entry-content ul li, .bs-entry-content ul li {
  list-style-type: disc;
}
.entry-content ol li, .bs-entry-content ol li {
  list-style-type: decimal;
}

/* Tabla nativa de Gutenberg */
.entry-content table,
.bs-entry-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  margin: var(--space-5) 0;
  overflow-x: auto;
  display: block;
}
.entry-content table thead,
.bs-entry-content table thead {
  background: var(--navy-900);
  color: var(--white);
}
.entry-content table th,
.bs-entry-content table th {
  padding: 10px 14px;
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
}
.entry-content table td,
.bs-entry-content table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: top;
}
.entry-content table tr:nth-child(even) td,
.bs-entry-content table tr:nth-child(even) td {
  background: var(--surface-wash);
}
.entry-content table tr:last-child td,
.bs-entry-content table tr:last-child td {
  border-bottom: none;
}

/* Cita */
.entry-content blockquote,
.bs-entry-content blockquote {
  margin: var(--space-5) 0;
  padding: var(--space-4) var(--space-5);
  border-left: 4px solid var(--orange-500);
  background: var(--orange-50);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-style: italic;
  color: var(--text-body);
}
.entry-content blockquote p,
.bs-entry-content blockquote p {
  margin: 0;
}

/* Código inline */
.entry-content code,
.bs-entry-content code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--surface-muted);
  color: var(--text-heading);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

/* Bloque de código */
.entry-content pre,
.bs-entry-content pre {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  background: var(--gray-900);
  color: var(--gray-100);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin: var(--space-5) 0;
}
.entry-content pre code,
.bs-entry-content pre code {
  background: none;
  padding: 0;
  font-size: inherit;
  color: inherit;
}

/* Separador */
.entry-content hr,
.bs-entry-content hr {
  border: none;
  border-top: 2px solid var(--border-subtle);
  margin: var(--space-7) 0;
}

/* Imagen dentro del contenido */
.entry-content img,
.bs-entry-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  display: block;
  margin: var(--space-4) 0;
}
.entry-content figcaption,
.bs-entry-content figcaption {
  font-size: var(--fs-xs);
  color: var(--text-faint);
  text-align: center;
  margin-top: var(--space-2);
}

/* Strong y em */
.entry-content strong, .bs-entry-content strong { font-weight: var(--fw-bold); color: var(--text-heading); }
.entry-content em, .bs-entry-content em { font-style: italic; }

/* Link dentro del contenido */
.entry-content a, .bs-entry-content a {
  color: var(--text-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.entry-content a:hover, .bs-entry-content a:hover {
  color: var(--color-primary);
}

/* Card de producto — link en el nombre y placeholder de media */
.bs-card-producto__nombre {
  text-decoration: none;
  color: var(--text-heading);
  display: block;
}
.bs-card-producto__nombre:hover { color: var(--color-primary); }
.bs-card-producto__media { text-decoration: none; display: block; }
.bs-card-producto__media-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 2rem;
  background: var(--orange-50);
}
.bs-card-producto__read {
  display: inline-block;
  margin-top: var(--space-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--text-link);
  text-decoration: none;
}
.bs-card-producto__read:hover { color: var(--color-primary); }

/* ====================================================
   Búsqueda — estado vacío y paginación
   ==================================================== */
.bs-search-empty {
  margin-top: var(--space-5);
}
.bs-search-empty__lead {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--text-heading);
  margin: 0 0 var(--space-2);
}
.bs-search-empty__hint {
  color: var(--text-muted);
  margin: 0 0 var(--space-2);
}
.bs-search-empty__cats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.bs-search-empty__cats .bs-btn {
  width: auto;
}
.pagination {
  margin-top: var(--space-7);
}
.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  color: var(--text-muted);
  text-decoration: none;
}
.pagination .page-numbers.current {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--white);
}
.pagination a.page-numbers:hover {
  border-color: var(--color-primary);
  color: var(--text-heading);
}