/*** agrega aqui los estilos necesarios para modificar el template ***/

/**Cabecera**/


.chat-widget__chat-list {
    flex-wrap: wrap;
    align-content: stretch;
    align-items: baseline;
    justify-content: flex-end;
}

.grid-slider.slick-initialized .item {
    padding: 10px;
}

.txtchat
{
color: black;
}

.bs-collection__with-banner {
    margin-bottom: 3rem;
    margin-top: 2rem;
}
.bs-grid-header__logo img {
    max-width: 70%;
    max-height: 70%;
}

@media screen and (max-width: 992px){
.bs-grid-header__logo img {
    max-width: 70%;
    max-height: 70%;
    width: 90px !important;
}}

.navbar-toggler {
        color: #ffffff;
        background-color: var(--primary-color);
}

.navbar-toggler:hover {
    border-color: var(--secondary-color);
    background: var(--secondary-color);
    color: var(--icon-header-hover-color);
}

.btn-cart, .btn-login, .btn-search {
    color: #ffffff;
    background: var(--primary-color);
}

.btn-cart:hover, .btn-login:hover, .btn-search:hover {
    background: #0D0D0D;
    color: var(--icon-header-hover-color);
}

.announcement-bar {
    color: #0D0D0D;
    background: #ffffff;
    border-color: #ffffff;
}

.cart-items {
    background: #0D0D0D;
    color: var(--primary-hover-contrast);
}

.bs-banners__picture {
    padding-top: 1.2rem;
}

.bs-img-square picture img {
    border-radius: 20px;
}

.bs-collection__with-banner {
    margin-top: 1.2rem !important;
}

/**Productos**/

.bs-product__final-price {
    color: var(--primary-color);
}

.bs-product__original-price {
    color: red;
}

.btn-primary {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #ffffff;
}

.btn-primary:hover {
    background: var(--primary-hover-color);
    border-color: var(--primary-hover-color);
    color: #ffffff;
}

/**Carro**/
@media screen and (max-width: 992px){
.bs-collection__addToCart {
    margin-top: 1rem !important;
}}


.btn-danger {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}

@media screen and (max-width: 992px){
.bs-product__section-title {
    font-size: 1.5rem;
}}

@media screen and (max-width: 992px){
.modal-content .btn-secondary {
    margin-bottom: 5px;
    }}

.tyc{
color: var(--primary-color);
}

/**Blog**/

.bs-blog-article__content{
font-size:15.4px !important;
}

.bs-blog-article__title {
display:contents;
}

.bs-blog-article__info {
    height: 50%;
}

.bs-blog-article__btn {
    font-size: 16px;
}

/**Footer**/

.bs-footer__social .btn-social {
        color: white;
        background-color: var(--primary-color);
}

.bs-footer__social .btn-social:hover {
    background: #ffffff;
    color: var(--primary-color);
}

.bs-footer__top-section__title {
    color: #ffffff;
}

.bs-footer__top-section__info{
    color: #ffffff;
}

.bs-footer__social {
    margin-top: 1rem;
}

.bs-footer__title {
    font-size: var(--footer-title-size, 1.2rem);
  }

.bs-footer__link {
    font-size: var(--footer-font-size, 1rem);
  }

/**Colecciones**/

.bs-collection{
    width: 98% !important;
}


.bs-collection__addToCart {
    margin-top: 3rem;
}

.has-discount .bs-collection__product-final-price {
    color: var(--primary-color);
}

.bs-collection__old-price{
color:red;
}

.btn-secondary {
    background: var(--secondary-color);
    border-color: var(--secondary-color);
}

.btn-secondary:hover {
    background: var(--secondary-hover-color);
    border-color: var(--secondary-hover-color);
}

.bs-img-square[data-bs="zoom"] img {
  transform: none !important;     /* Elimina cualquier escalado al pasar el mouse */
  transition: none !important;    /* Elimina animaciones suaves */
}


/* === AJUSTE: QUITA EL ZOOM === */
.drift-zoom-pane {
  display: none !important;   /* Oculta el panel de zoom activo */
}

.bs-img-square img {
  pointer-events: auto !important;  /* Evita que el zoom JS interfiera con el cursor */
}

/* === OCULTA BOTÓN "AVÍSAME CUANDO LLEGUE" EN FICHA DE PRODUCTO === */
button[data-bs="product.order"] {
  display: none !important;   /* Oculta siempre el botón */
}

/* === AJUSTE DE ANCHO DEL CONTENEDOR DE IMAGEN EN FICHA DE PRODUCTO (SOLO PC) === */
/* Reduce el ancho del lado izquierdo en escritorio, sin afectar móvil */
@media screen and (min-width: 768px) {
  .bs-product .col-sm-6,
  .bs-product .col-sm-4 {
    max-width: 440px !important;   /* Limita el ancho del bloque de imagen */
    flex: 0 0 440px !important;     /* Fija el ancho para evitar que se expanda */
  }
}

/*QUITAR EL SKU*/
.bs-product__sku { 
  display: none; /* Oculta el código SKU del producto */
}

/* === AJUSTE VISUAL: OCULTAR TÍTULO === */

/* Oculta el encabezado azul “Descripción” duplicado */
h2.bs-home-title {
  display: none !important;   /* Elimina el título extra */
}

/* === OCULTAR POPUP EN MÓVILES === */
@media screen and (max-width: 768px) {
  #popup {
    display: none !important;  /* Oculta completamente en móviles */
  }
}

/* === OCULTAR FECHA DE ACTUALIZACIÓN EN ARTÍCULOS DINÁMICOS === */
time.article-date {
  display: none !important;
}



/* === AJUSTES DE PRECIOS EN COLECCIONES Y PRODUCTOS PRIMER SEGMENTO DESDE PAGINA ANTERIOR === */
/* Controla estilos para precios normales y con descuento, incluyendo colores y tamaños */

/* Precio final (sin descuento o base) en colecciones */
.bs-collection__product-final-price {
  padding-bottom: 4%;                /* Espacio inferior */
}

/* Precio final CON DESCUENTO en colecciones */
.has-discount .bs-collection__product-final-price {
  color: #53a1ab;                    /* Color institucional */
  font-size: 1.6rem;                 /* Tamaño más grande para destacar */
  padding-bottom: 1rem;             /* Separación inferior */
  padding-top: 0.5rem;              /* Separación superior */
}

/* Condición de descuento en colecciones (etiqueta azul) */
.bs-collection__discount-condition {
  color: #fff;                       /* Texto blanco */
  background-color: #669FA7;         /* Fondo celeste-gris */
  font-weight: 700;                  /* Texto grueso */
  display: inline-block;             /* Bloque en línea */
  font-size: 85%;                    /* Tamaño reducido */
  line-height: 2;                    /* Altura de línea */
  text-align: center;               /* Centrado horizontal */
  white-space: nowrap;              /* No cortar líneas */
  vertical-align: baseline;         /* Alineado con el texto */
  border-radius: 0.25rem;           /* Bordes suavemente redondeados */
  height: 26px;                     /* Altura fija */
}

/* Condición de descuento en ficha de producto */
.bs-product__discount-condition {
  color: #fff;                       /* Texto blanco */
  background-color: #669FA7;         /* Fondo celeste-gris */
  font-weight: 700;                  /* Texto fuerte */
  display: inline-block;             /* Bloque en línea */
  font-size: 100%;                   /* Tamaño normal */
  line-height: 1;                    /* Altura normal */
  text-align: center;                /* Centrado horizontal */
  white-space: nowrap;              /* Sin salto de línea */
  vertical-align: baseline;         /* Alineado con línea de texto */
  border-radius: 0.25rem;           /* Bordes redondeados */
  height: 30px;                      /* Altura del bloque */
  padding: 9px 12px;                 /* Relleno interno */
}

/* Precio original en ficha de producto (tachado o rojo) */
.bs-product__original-price {
  color: #E30613;                    /* Rojo para precio antiguo */
}

/* Precio final en ficha de producto */
.bs-product__final-price {
  color: #53a1ab;                    /* Color institucional */
}

/* Precio antiguo en colecciones */
.bs-collection__old-price {
  color: #E30613;                    /* Rojo para mostrar que está rebajado */
}


/* === LISTADO DE PRODUCTOS Y HOMEPAGE SEGUNDO SEGMENTO DE PAGINA ANTERIOR=== */
/* Ajustes generales en títulos, badges y avisos */

.bs-collection__product-title {
  font-size: 1rem;                      /* Título de producto más pequeño en listado */
}

.bs-collection__product-notice {
  font-size: 0.7rem;                    /* Tamaño reducido del aviso */
  padding: 0.25em 0.4em;                /* Espaciado interno */
  background-color: #1d5ea8 !important; /* Azul institucional de aviso */
  display: table;                       /* Alineación compacta */
  white-space: nowrap;                 /* No permite quiebre de línea */
  vertical-align: baseline;
  border-radius: 0.25rem;              /* Bordes suavizados */
  margin: 5px 0px;                      /* Margen vertical */
  font-weight: 600;                     /* Negrita media */
  color: #fff;                          /* Texto blanco */
}

h2.bs-title-home span {
  font-size: 15px;                      /* Tamaño reducido del subtítulo */
}

.only-home {
  padding-top: 2.2rem;                  /* Espaciado superior exclusivo del home */
}

.bs-horizontal-slider .slick-list {
  padding-top: 1rem;                    /* Aire superior dentro del slider horizontal */
}

.bs-horizontal-slider .slick-slide {
  padding-left: 1rem;                   /* Aire entre slides individuales */
}


/* === AJUSTES VISUALES: FICHA PRODUCTO, SLIDER Y ETIQUETAS TERCER SEGMENTO DE LA PAGINA ANTERIOR === */
/* Controla elementos como botones secundarios, sliders y etiquetas de precio */


.bs-product .mt-3 .my-2 button.btn-secondary { 
  display: none; /* Oculta botón secundario dentro de la ficha producto */
}

.bs-product .mt-3 span.badge {
  font-size: 1rem;              /* Tamaño de letra de las etiquetas tipo badge */
  border-radius: 2rem;          /* Bordes redondeados circulares */
  padding: 0.4rem 0.7rem;       /* Espaciado interno uniforme */
}

.bs-horizontal-slider .slick-list { 
  padding-top: 1rem; /* Agrega espacio superior dentro del slider horizontal */
}

.bs-horizontal-slider .slick-slide { 
  padding-left: 1rem; /* Espacio entre cada slide dentro del carrusel */
}

.bs-collection__discount-condition {
  color: #fff;                 /* Texto blanco */
  background-color: #669FA7;   /* Fondo celeste institucional antiguo */
  font-weight: 600;            /* Seminegrita (redundante con línea siguiente) */
  display: inline-block;       /* Elemento en línea con propiedades de bloque */
  font-size: 85%;              /* Tamaño de texto relativo */
  font-weight: 700;            /* Negrita fuerte */
  line-height: 2;              /* Altura de línea amplia */
  text-align: center;          /* Texto centrado horizontalmente */
  white-space: nowrap;         /* Evita que el texto se corte en varias líneas */
  vertical-align: baseline;    /* Alineación vertical al texto base */
  border-radius: 0.25rem;      /* Bordes levemente redondeados */
  height: 26px;                /* Alto fijo de la etiqueta */
}


/* === AJUSTES RESPONSIVOS EN ESCRITORIO (desde 768px) === */
@media screen and (min-width: 768px) {
  .bs-collection__btn-group {
    text-align: center;   /* Centra los botones debajo del producto */
    margin-top: 1rem;     /* Espaciado superior estándar */
  }
}

/* Título de las colecciones (como en sliders de productos) */
.bs-collection__title {
  font-size: 1.5rem;   /* Título más grande y visible para cada colección */
}


/* === SEGMENTO 6 – FORZAR BOTÓN DE COMPRA DEBAJO DEL SELECTOR DE CANTIDAD === */
/* Aplica solo en fichas donde el botón quedó al costado por estructura Bootstrap */

#bs-product-form.row.align-items-end {
  display: block !important;     /* Cancela el flex de Bootstrap en esta fila */
}

#bs-product-form .form-group {
  width: 100% !important;        /* Cada .form-group (selector y botón) ocupará una línea */
  margin-bottom: 0.8rem;         /* Da un pequeño espacio entre selector y botón */
}






/* Estilo del botón claro dentro de la ficha de producto */
.bs-product .mt-3 a.btn-light {
  border-color: rgb(11,167,255);     /* Borde celeste institucional */
  background-color: #E7F7FF;         /* Fondo azul claro muy suave */
}









/* MODIFICACIONES PÁGINA ANTERIOR */
#comentarios-blog {
  font-family: 'Open Sans', sans-serif;
  background: #f2f4f7;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  margin-top: 40px;
  font-size: 16px;
  color: #333;
}

#comentarios-blog h3 {
  font-size: 20px;
  margin-bottom: 15px;
  color: #1d5ea8;
}

#comentarios-blog input,
#comentarios-blog textarea,
#comentarios-blog select {
  width: 100%;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 8px;
  font-size: 16x;
  font-family: inherit;
  box-sizing: border-box;
  background: white;
}

#comentarios-blog button {
  background-color: #1d5ea8;
  border: none;
  padding: 8px 15px;
  border-radius: 6px;
  color: white;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s ease;
}

#comentarios-blog button:hover {
  background-color: #5ec6e9;
  color: black;
}

#comentarios-blog hr {
  border: none;
  border-top: 1px solid #ddd;
  margin: 10px 0;
}

#comentarios-blog p {
  margin: 5px 0;
  line-height: 1.4;
}

#comentarios-blog .error {
  color: red;
  font-size: 13px;
}

#comentarios-blog small,
#comentarios-blog .text-link {
  font-size: 13px;
  color: #1d5ea8;
  cursor: pointer;
  text-decoration: underline;
  margin-top: 5px;
  display: inline-block;
}

#bloque-login-extra,
#bloque-registro-extra {
  display: none;
  margin-bottom: 15px;
}

#bloque-login-extra.active,
#bloque-registro-extra.active {
  display: block;
}

#comentarios-blog .text-link:hover {
  text-decoration: none;
  color: #5ec6e9;
}

/* === ESPACIADO ENTRE BLOQUES DE COMENTARIO === */
/* Asegura separación visual entre login, registro, apodo y comentar */

.espaciado-comentario {
  margin-bottom: 20px !important;  /* Forzamos el margen por si hay conflictos */

}

/* === BOTÓN CERRAR SESIÓN (ESTILO ROJO DESTACADO) === */
/* Mejora visual para que el botón logout se note claramente */

#btn-logout {
  background-color: #e74c3c !important;   /* Rojo claro */
  color: white !important;
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
  margin-top: 10px;
  transition: background 0.3s ease;
}

#btn-logout:hover {
  background-color: #c0392b !important;   /* Rojo más oscuro al pasar el mouse */
}

/* === AJUSTE DE ANCHO DEL SELECT Y TEXTAREA EN BLOQUE DE COMENTARIO === */
/* Se limita el ancho para que no ocupen todo el contenedor, y se centran visualmente */

#bloque-comentar select,
#bloque-comentar textarea {
  max-width: 500px;       /* Ancho máximo controlado */
  width: 100%;            /* Se adapta al contenedor padre */
  display: block;         /* Que no floten ni se alineen horizontalmente */
  margin-bottom: 10px;    /* Separación entre elementos */
}

/* === AJUSTE DE ANCHO SOLO PARA SELECT DE ESTRELLAS === */
/* Se hace más pequeño para que no ocupe todo el ancho */

#bloque-comentar select {
  width: 150px;           /* Ancho fijo reducido */
  display: inline-block;  /* Para que no rompa el flujo */
  margin-bottom: 10px;
}

/* === REDUCCIÓN DE ANCHO DEL BLOQUE DE COMENTARIOS CAJA COMPLETA === */
/* Centrado y con ancho fijo más estrecho */

#comentarios-blog {
  max-width: 500px;         /* Ancho más pequeño que el anterior */
  margin: 40px auto;        /* Centrado con espacio arriba */
  padding: 20px;
  background: #f2f4f7;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}




//17-06-2025
/* === MODAL PARA IMAGEN AMPLIADA === */

.modal-img-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.8);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.modal-img-overlay img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(255,255,255,0.3);
  cursor: pointer;
}

/* === MURO ESTILO INSTAGRAM === */
/* Diseño visual de tarjetas con imagen + texto */

.blog-muro {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  padding: 20px;
}

.blog-muro .item-blog {
  width: 300px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  text-decoration: none;
  color: #000;
  transition: transform 0.3s;
  max-height: 540px;
}

.blog-muro .item-blog:hover {
  transform: translateY(-5px);
}

.blog-muro .item-blog img {
  width: 100%;
  height: auto;
  display: block;
}

.blog-muro .item-blog .resumen {
  padding: 15px;
}

.blog-muro .item-blog .resumen h3 {
  font-size: 18px;
  margin: 0 0 8px 0;
  color: #1d5ea8;
  max-width: 100%;
  line-height: 1.3;
  word-break: break-word;
}

/* === AJUSTE: EXTENDER PÁRRAFO DE RESUMEN EN TARJETAS BLOG === */
.blog-muro .item-blog .resumen p {
  font-size: 16px !important;
  margin: 0 !important;
  color: #333 !important;
  max-width: 90% !important;
  text-align: left !important;
  line-height: 1.4 !important;
}

/* === FECHA Y AUTOR EN TARJETA === */
.blog-muro .item-blog .autor-fecha {
  font-size: 12px;
  color: #888;
  margin-top: 10px;
  text-align: left;
}

/* === ESTILO BLOG ARTÍCULO === */

.article-container {
  max-width: 700px;
  margin: 40px auto;
  font-family: Arial, sans-serif;
  color: #333;
  line-height: 1.5;
}

.article-container h1 {
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 20px;
  color: #175975;
}






/* === GALERÍA INTELIGENTE AUTOMÁTICA === */
/* Ajuste completo: 1 imagen (centrada) o 3 imágenes (mosaico en L) */

.imagenes-articulo {
  display: block;                             /* Valor por defecto (1 o 2 imágenes) */
  margin-bottom: 20px;
}

/* Activar diseño en L solo si hay exactamente 3 imágenes */
.imagenes-articulo:has(> img:nth-child(3)):not(:has(> img:nth-child(4))) {
  display: grid !important;                   /* Activa grid dinámico solo para 3 */
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 20px;
}

/* Estilo base para todas las imágenes */
.imagenes-articulo .img-hover-zoom {
  width: 100% !important;                     /* Ocupa su celda completa */
  height: 100% !important;                    /* Toma el alto asignado por el grid */
  border-radius: 12px !important;
  object-fit: cover !important;               /* Recorte limpio */
  display: block !important;
}

/* === MOSAICO EN L - Distribución específica si hay 3 imágenes === */
.imagenes-articulo:has(> img:nth-child(3)):not(:has(> img:nth-child(4))) img:nth-child(1) {
  grid-row: 1 / span 2;                       /* Imagen 1 ocupa las 2 filas izquierda */
  grid-column: 1 / 2;
}

.imagenes-articulo:has(> img:nth-child(3)):not(:has(> img:nth-child(4))) img:nth-child(2) {
  grid-row: 1 / 2;
  grid-column: 2 / 3;
}

.imagenes-articulo:has(> img:nth-child(3)):not(:has(> img:nth-child(4))) img:nth-child(3) {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
}




/* === CASO ESPECIAL: SOLO 1 IMAGEN === */
/* Se centra y se ajusta a un tamaño grande sin grid */
.imagenes-articulo:has(> img:nth-child(1)):not(:has(> img:nth-child(2))) .img-hover-zoom {
  max-width: 720px !important;
  min-width: 520px !important;
  margin: 0 auto !important;
  height: auto !important;                    /* No forzar alto en este caso */
  object-fit: contain !important;             /* Mostrar completa */
}
/* --- AJUSTE RESPONSIVE DEL BLOQUE DE ARRIBA --- */
/* En móviles, evita que la imagen única se pase de ancho o quede demasiado grande */
@media (max-width: 768px) {
  .imagenes-articulo:has(> img:nth-child(1)):not(:has(> img:nth-child(2))) .img-hover-zoom {
    max-width: 95vw !important;   /* Se adapta al ancho del dispositivo */
    min-width: unset !important;  /* Elimina el mínimo de 520px */
    margin: 0 auto !important;    /* Se mantiene centrada */
  }
}

/* === GALERÍA INTELIGENTE – 4 o más imágenes en mosaico === */
/* Se activa con la clase .galeria-mosaico que agrega el JS */

.imagenes-articulo.galeria-mosaico {
  display: grid !important;                           /* Activa grid */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));  /* Distribución adaptable */
  gap: 20px !important;                               /* Espacio entre imágenes */
  justify-items: center;                              /* Centra cada imagen */
  align-items: start;                                 /* Alinea arriba */
  margin-bottom: 20px;
  width: 100% !important;
  max-width: 95vw !important;                         /* Usa casi todo el ancho disponible */
  margin-left: auto !important;
  margin-right: auto !important;
}

.imagenes-articulo.galeria-mosaico .img-hover-zoom {
  width: 100% !important;                             /* Ocupa su columna */
  max-width: 620px !important;
  height: auto !important;                            /* Ajusta altura según imagen */
  object-fit: contain !important;                     /* Quepan bien, sin recorte */
  border-radius: 12px !important;
  display: block !important;
}

/* === FORZAR ANCHO AMPLIO PARA MOSAICO DE 4+ IMÁGENES === */
body:has(#contenido) .imagenes-articulo {
  width: 100% !important;
  max-width: 95vw !important;    /* Permite ocupar casi todo el ancho disponible */
  margin-left: auto !important;
  margin-right: auto !important;
}




.imagenes-articulo:has(> img:nth-child(4)) .img-hover-zoom {
  width: 100% !important;
  max-width: 620px !important;
  height: auto !important;
  object-fit: contain !important;
  border-radius: 12px !important;
  display: block !important;
}

/* === AJUSTE BLOG 2.0 (article-dinamico) === */
body:has(#contenido) h1.bs-title {
  display: none !important;    /* Solo oculta el h1 de Bsale */
}

/* === BLOG 2.0 – ELIMINAR AIRE SUPERIOR === */

/* Eliminar espacio generado por el wrapper principal */
body:has(#contenido) main.bs-main {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Eliminar aire en el contenedor de columna */
body:has(#contenido) .col {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Eliminar espacio en el breadcrumb (migas de pan) */
body:has(#contenido) ol.breadcrumb {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* === AJUSTE BLOG 2.0 (contenedor-blog-2-0) === */
body:has(.blog-muro) h1 {
  display: none !important;          /* Oculta el h1 nativo de Bsale */
}

/* Eliminar aire en layout contenedor blog 2.0 */
body:has(.blog-muro) main.bs-main {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

body:has(.blog-muro) .col {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

body:has(.blog-muro) ol.breadcrumb {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* === FECHA + AUTOR EN ARTÍCULO COMPLETO === */
.autor-fecha-blog {
  font-size: 14px;
  color: #888;
  text-align: right;
  margin: 10px 0;
}


/* === AJUSTE INTELIGENTE DE ALTURA PARA PREVIEW DE BLOG no qudo bien ajusto la altura de todo pero lo dejaremos asi  === */
/* Aumenta solo imágenes pequeñas para que no se vean tan bajitas // NO LO HACE */

.blog-muro .item-blog img {
  width: 100% !important;
  display: block;
  object-fit: cover !important;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.blog-muro .item-blog img:not([style*="height"]) {
  aspect-ratio: 3 / 2 !important;   /* Forza proporción horizontal si es muy chica */
  min-height: 320px !important;     /* La levanta si no trae altura fija */
}

/* === CASO 2 IMÁGENES: lado a lado adaptativo === se ingreso desde la cuenta chatgot por eror  jfrancisco.... el dia 19/06/25*/
.imagenes-articulo:has(> img:nth-child(2)):not(:has(> img:nth-child(3))) {
  display: flex !important;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}
.imagenes-articulo:has(> img:nth-child(2)):not(:has(> img:nth-child(3))) img {
  max-width: 48%;
  object-fit: cover !important;
}

.bs-collection__with-banner {
    margin-top: 2rem;
}

/* === 27-07- AJUSTE FINAL – ENSANCHAR BLOG COMPLETO EN TELÉFONO SIN DESBORDE === */

@media screen and (max-width: 767px) {
  /* Capa superior que limita el ancho por la clase .container */
  .bs-article.container.my-1 {
    width: 100vw !important;
    max-width: 100vw !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
  }

  /* Capa intermedia que contiene el artículo */
  .article-content {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 auto !important;
  }

  /* Capa final donde está el texto */
  .article-body {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
    margin: 0 auto !important;
  }
}
/* === AJUSTE VISUAL DEL ENCABEZADO DE ARTÍCULO EN MÓVIL === */

@media screen and (max-width: 767px) {
  .article-header {
    padding-left: 16px !important;   /* Aire visual izquierdo */
    padding-right: 12px !important;
    box-sizing: border-box !important;
  }
}
/* === LÍNEA BAJO TÍTULO EN MÓVIL (ESTILO PC) === */

@media screen and (max-width: 767px) {
  .article-header h1 {
    border-bottom: 2px solid #4c9ba0;     /* Mismo tono que usas en escritorio */
    padding-bottom: 6px;                  /* Espacio entre texto y línea */
    margin-bottom: 12px;                  /* Aire con siguiente bloque */
  }
}
/* === AJUSTE PRECISO – ELIMINA ESPACIO ENTRE TÍTULO Y CONTENIDO EN MÓVIL === */

@media screen and (max-width: 767px) {
  h1.article-title {
    margin-bottom: 4px !important;         /* Casi pegado al siguiente bloque */
    padding-bottom: 6px !important;        /* Línea inferior */
    border-bottom: 2px solid #4c9ba0;      /* Línea azul institucional */
  }

  .article-body > *:first-child {
    margin-top: 4px !important;            /* Quita espacio al primer párrafo o h2 */
  }
}
/* === ACA TERMINA AJUSTE FINAL PARA QUE SE VEA BIEN EL BLOG EN MOVIL === */


/* === MODAL DE IMAGEN – ESTILO ANTIGUO RESTAURADO === */
#modalImagen {
  display: none;
  position: absolute;                   /* ? permite scroll libre debajo */
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100vh;
  background-color: rgba(0, 0, 0, 0.8); /* ? oscuridad total */
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

#modalImagen img {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(255,255,255,0.3);
  cursor: pointer;
}