/*responsive.css*/
/* === Productos relacionados (Swiper) === */
.relacionados-swiper .swiper-slide {
	display: flex;
	justify-content: center;
}

/* =========================================================
   ✅ OFFSET GLOBAL PARA TODAS LAS PÁGINAS
   (No usar body padding-top en media queries, se pisa y rompe)
   ========================================================= */
:root{
  --content-gap-top: 18px; /* aire debajo del stack fijo */
}

main,
.site-main{
  padding-top: calc(var(--header-total-h) + var(--content-gap-top)) !important;
}

body:has(#contenedor-secciones) main.site-main,
body:has(#contenedor-secciones) .site-main{
  padding-top: calc(var(--header-total-h) + var(--index-gap-top)) !important;
}

/* El contenedor del index no agrega separación extra arriba */
body:has(#contenedor-secciones) #contenedor-secciones{
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Si el index usa #contenedor-secciones con padding-top grande,
   no lo duplicamos (solo anulamos el TOP, mantenés laterales/abajo en index.css) */
#contenedor-secciones{
  padding-top: 0 !important;
}

@media (max-width: 576px) {
  /*mobile de aqui*/
	.section-card-2x .card-promo {
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	min-height: 360px !important;
	}
	.section-card-2x .block-name {
	height: 34px;
	padding: 0 4px;
	}
	
	.section-card-2x .block-name a {
	font-size: 0.72rem;
	line-height: 1.1;
	-webkit-line-clamp: 2;
	max-height: calc(1.1em * 2);
	}
	
	.section-card-2x .block-price {
	height: 34px;
	}
	
	.section-card-2x .old-price {
	font-size: 0.68rem;
	}
	
	.section-card-2x .new-price {
	font-size: 0.78rem;
	}
	
	.section-card-2x .block-descuento-cantidad {
	margin-top: 2px;
	min-height: 14px;
	}
	
	.section-card-2x .block-descuento-cantidad small {
	font-size: 0.65rem;
	line-height: 1.1;
	}
	
	.section-card-2x .block-info {
	height: 46px;
	}
	
	.section-card-2x .block-info .info-extra {
	padding-left: 8px;
	}
	
	.section-card-2x .cod-refe {
	font-size: 0.62rem;
	line-height: 1.1;
	}
	
	.section-card-2x .tag-line {
	font-size: 0.62rem;
	line-height: 1.1;
	}
	
	.section-card-2x .block-add {
	height: 46px;
	padding-top: 2px;
	padding-left: 6px;
	padding-right: 6px;
	}
	
	.section-card-2x .product-add {
	gap: 4px;
	width: 100%;
	transform: translateY(0);
	}
	
	.section-card-2x .qty-control {
	height: 28px;
	border-radius: 8px;
	}
	
	.section-card-2x .qty-btn {
	width: 22px;
	font-size: 14px;
	}
	
	.section-card-2x .qty-input {
	width: 24px;
	font-size: 0.82rem;
	}
	
	.section-card-2x .btn-add {
	height: 28px;
	min-width: 56px;
	padding: 0 8px;
	font-size: 0.68rem;
	border-radius: 8px;
	}
	  /*hasta aqui*/
}

@media (max-width: 1200px) {
	.section-card-2x .slick-slide > div > div {
		flex: 1 1 25%;
		max-width: 25%;
	}

	/* Ajustar grilla de productos */
  	.productos-container {
	    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	    justify-content: center;       /* 🔹 centra las columnas */
	    gap: 10px;
	    padding: 0 20px;               /* 🔹 evita que pegue al borde */
  	}
}

@media (min-width: 1025px) {
	.sucursales-section {
		height: calc(100vh);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.sucursales-layout {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 90%;
		max-width: 1400px;
	}

	.sucursales-list {
		flex: 0 0 40%;
		max-width: 600px;
		height: 100%;
		overflow-y: auto;
		padding: 20px;
		background: #fff;
		border-radius: 8px;
		box-sizing: border-box;
	}

	.sucursales-mapa {
		flex: 1;
		height: 100%;
		min-width: 400px;
		border-radius: 8px;
		overflow: hidden;
		box-sizing: border-box;
	}

	.sucursales-mapa iframe {
		width: 100%;
		height: 100%;
		border: 0;
		border-radius: 8px;
	}
}

@media (min-width: 992px) {
	.top-fixed-bar {
		display: flex;
	}

	.sub-bar {
		display: flex;
	}
	.main-header .container {
		width: 100%;
		max-width: 100%;
		margin: 0;
		padding: 0 40px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 20px;
	}

	.logo {
		flex: 0 0 180px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.search-bar {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.search-bar .input-group {
		width: 100%;
	}

	.icon-row {
		flex: 0 0 220px;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		gap: 25px;
	}

	.session-icon {
		display: flex;
		align-items: center;
		gap: 6px;
		font-weight: 600;
		font-size: 0.9rem;
		color: var(--dark-color);
		cursor: pointer;
		transition: color 0.3s ease;
	}

	.session-icon i {
		font-size: 1.1rem;
	}

	.session-icon:hover {
		color: var(--primary-color);
	}

	.cart-icon {
		margin: 0;
	}

	#btnAbrirFiltros {
    	display: none !important; /* se oculta en desktop */
  	}

  /* 🔹 Mostrar filtros nuevamente en pantallas grandes */
  .producto-lista-section .col-md-3 {
    display: block !important;
  }
  
  /* Desktop: las secciones normales no deben tocar los bordes */
	#contenedor-secciones > div > div > section.section-container:not(.carousel-automatico),
	#contenedor-secciones > div > div > section.section-card:not(.carousel-automatico),
	#contenedor-secciones > div > div > section.section-card-2x:not(.carousel-automatico),
	#contenedor-secciones > div > div > section.section-marquee:not(.carousel-automatico) {
	  width: calc(100% - 30px) !important;
	  max-width: 1600px !important;
	  margin-left: auto !important;
	  margin-right: auto !important;
	  box-sizing: border-box !important;
	}
	
}

@media (max-width: 992px) {

  /* ✅ En mobile/tablet NO existe barra3 => subbar = 0
     y ajustamos el aire superior un poco */
  :root{
    --subbar-h: 0px;
    --content-gap-top: 14px;
    --bottom-nav-h: 70px;   /* ajustá a la altura real de tu barra */
    --footer-safe: 80px;
    
    --fab-wa-bottom: calc(var(--bottom-nav-h) + 10px); /* WhatsApp sube */
    --fab-size: 44px;     /* opcional: un toque más chico en mobile */
    --fab-gap: 12px;
    --fab-right: 16px;
  }

	.banner3-card {
		aspect-ratio: 4 / 3;
	}

	.product-card .card-img-wrapper img {
	  height: 100%;
	}

	.qty-input {
		width: 48px;
	}

	.product-add {
		padding: 14px 0 14px;
	}

	.section-card-2x .slick-slide > div > div {
		flex: 1 1 33.33%;
		max-width: 33.33%;
	}

	/*BARRA INFERIOR*/

  /* Reservar espacio para que nada quede detrás de la barra */
  body {
    padding-bottom: 0 !important;
  }

  /* NO tocamos posición de la barra, sólo la mostramos */
  .bottom-nav {
    display: flex;
  }

  /* Footer sin padding gigante abajo */
  .footer-bottom {
    padding-bottom: calc(14px + var(--bottom-nav-h) + var(--footer-safe)) !important;
  }

	/* Ocultar íconos duplicados del header */
	.main-header .icon-row .session-icon,
	.main-header .icon-row .cart-icon,
	.main-header .menu-toggle {
	   display: none !important;
	}

	#btnCategorias,
    .main-header .menu-toggle,
  	.main-header .btn-categorias {
      display: none !important;
  	}

    .producto-layout {
      flex-direction: column !important; /* 👈 apila los bloques */
      align-items: center !important;
      gap: 30px; /* espacio entre galería e info */
      overflow: visible !important;
    }

    .producto-galeria,
    .producto-info {
      flex: 0 0 100% !important;
      max-width: 100% !important;
    }

    .producto-galeria { order: 1; }
    .producto-info { order: 2; }

  /* 🔹 Mueve los filtros arriba y productos abajo */
  .producto-lista-section .row {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .producto-lista-section .col-md-3 {
    order: 1;
    width: 100%;
    max-width: 100%;
  }

  .producto-lista-section .col-md-9 {
    order: 2;
    width: 100%;
    max-width: 100%;
  }

  /* 🔹 Grilla con 3 columnas adaptables */
  .producto-lista-container .productos-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 24px 20px;
    width: 100%;
    padding: 0;
    box-sizing: border-box;
    justify-items: center;   /* 🔹 centra cada card dentro de su celda */
    align-items: start;
  }

  /* 🔹 Ajuste visual del bloque blanco */
  .producto-lista-container .bg-white.p-3.rounded.shadow-sm {
    width: 100%;
    margin: 0 auto;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
  }

  /*asegura ancho máximo uniforme dentro del contenedor del card*/
  .producto-lista-section .productos-container .item,
  .producto-lista-section .productos-container .card {
    max-width: 100%;
  }

  /* Quitar límite de ancho del container solo en la página del carrito */
  .cart-list-section.container,
  .cart-list-section.main-container {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  /*EXCLUSIVO MI CARRITO CON SUS ITEMS*/
  .cart-page-wrapper {
    flex-direction: column;
    align-items: center;        /* centramos el contenido */
  }

  .cart-page-main {
    width: 100%;                /* columna ocupa todo el ancho */
    display: flex;
    justify-content: center;    /* centramos la tarjeta interna */
  }

  /* Un poco de padding propio para que no quede pegado al borde */
  .cart-page-wrapper {
    padding-left: 8px;
    padding-right: 8px;
  }

  /* Tabla + resumen ocupan 100% del ancho útil */
  .cart-table-wrapper,
  .cart-page-summary {
    width: 96%;
    max-width: 96%;
    margin: 0 auto 16px;  /* centrado y pequeño espacio abajo */
  }

  .page-title-wrapper {
    padding-left: 20px;
  }

	/*FOOTER OCULTAR TOP1 Y TOP2 SOLO DEJAR FOOTER-BOTTOM*/
  .footer-top1,
  .footer-top2 {
    display: none !important;
  }

  /* Layout en columna, centrado */
  .footer-bottom .container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 4px;
  }

  .footer-bottom-logo-dev,
  .footer-bottom-copy,
  .footer-bottom-logo-company {
    width: 100%;
    text-align: center !important;
  }

  /* Orden:
     1) logo VitalMed
     2) copyright
     3) logo desarrollador
  */
  .footer-bottom-logo-company { order: 1; }
  .footer-bottom-copy         { order: 2; }
  .footer-bottom-logo-dev     { order: 3; }

  /* Asegurar que los logos ocupen su lugar */
  .footer-bottom-logo img,
  .footer-logo-img {
    display: block;
    margin: 0 auto;
    max-height: 40px;
    width: auto;
  }
  
}

@media (min-width: 768px) and (max-width: 991px) {
	:root {
		--header-h: 160px;
		--subbar-h: 0px;      /* ✅ no hay barra3 */
		--content-gap-top: 14px;
	}

	.sub-bar {
		display: none !important;
	}

	.main-header {
		position: fixed;
		top: 40px;
		left: 0;
		width: 100%;
		height: var(--header-h);
		background: #fff;
		z-index: 1000;
		box-shadow: 0 2px 4px rgba(0,0,0,.1);
	}

	.main-header .container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 8px;
		max-width: 900px;
		margin: 0 auto;
		padding: 10px 12px;
	}

	.logo {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.search-bar {
		order: 2;
		width: 100%;
		max-width: 600px;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0;
	}

	.icon-row {
		order: 3;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 25px;
	}

	/* ❌ ELIMINADO: body padding-top (ya lo maneja main/site-main global) */
	/* body { padding-top: calc(var(--header-h) + 40px); } */

	.sucursales-layout {
		display: block !important;
	}

	.sucursales-section {
		width: 85vw !important;
		max-width: 85vw !important;
		margin: 0 auto !important;
		padding: 0 10px !important;
		box-sizing: border-box;
	}

	.sucursales-list {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		max-height: 60vh;
		overflow-y: auto;
		flex: 1 1 100% !important;
		box-sizing: border-box;
		margin: 0 auto 40px;
		padding-bottom: 16px;
	}

	.sucursales-mapa {
		display: none !important;
	}

	/* 🔹 Solo redes, centradas */
	.top-fixed-bar {
		display: flex !important;
		justify-content: center;
		align-items: center;
	}

	.top-fixed-bar .top-fixed-content {
		justify-content: center;
	}

	.top-fixed-bar .left-content {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.top-fixed-bar .social-icons {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 10px;
	}

	/* Ocultar texto y bloque derecho */
	.top-fixed-bar .textoBarra1,
	.top-fixed-bar .right-text {
		display: none !important;
	}

	/* 🔹 Mostrar botón y ocultar columna de filtros en pantallas intermedias */
  #btnAbrirFiltros {
    display: block;
    width: 100%;
    font-weight: 600;
    background: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 10px 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
    transition: background 0.2s ease, transform 0.1s ease;
  }

  #btnAbrirFiltros:hover {
    background: #e55c00;
    transform: translateY(-1px);
  }

  #btnAbrirFiltros i {
    margin-right: 6px;
    font-size: 1.1rem;
  }

  .producto-lista-section .col-md-3 {
    display: none !important;
  }

  .producto-lista-section .col-md-9 {
    width: 100%;
    max-width: 100%;
  }

  /* === PANTALLA MÉTODO DE PAGO (TABLET) === */
  .payment-section.container.main-container {
    max-width: 100%;
    padding-left: 24px;
    padding-right: 24px;
  }

  .payment-layout {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .payment-main.card,
  .payment-sidebar {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  .payment-summary-card {
    width: 100%;
  }

  .payment-main.card {
    overflow: hidden;
  }

  .payment-main.card .card-body {
    overflow: visible;
  }

  .payment-form-actions {
    justify-content: flex-end;
    padding: 0 24px 8px;
  }

  .footer-bottom {
    padding-bottom: 70px !important;
  }

}

@media (max-width: 768px) {
	:root {
		--header-h: 172px;
		--subbar-h: 0px;      /* ✅ no hay barra3 */
		--content-gap-top: 12px;
	}

	.sub-bar {
		display: none !important;
	}

	/* 🔹 Mostramos la barra 1 solo con redes centradas */
	.top-fixed-bar {
		display: flex !important;
		justify-content: center;
		align-items: center;
		z-index: 1100;
	}

	.top-fixed-bar .top-fixed-content {
		justify-content: center;
	}

	.top-fixed-bar .left-content {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.top-fixed-bar .social-icons {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 10px;
	}

	/* Ocultamos texto de mantenimiento y sucursales */
	.top-fixed-bar .textoBarra1,
	.top-fixed-bar .right-text {
		display: none !important;
	}

	.main-header {
		position: fixed;
		top: 40px;
		left: 0;
		width: 100%;
		height: var(--header-h);
		background: #fff;
		z-index: 1000;
		box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	}

	.main-header .container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 8px;
		padding: 10px;
		max-width: 100%;
	}

	.logo {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.search-bar {
		order: 2;
		width: 90%;
		max-width: 500px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.icon-row {
		order: 3;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 25px;
	}

	.sucursales-layout {
		display: block !important;
	}

	.sucursales-section {
		width: 85vw !important;
		max-width: 85vw !important;
		margin: 0 auto !important;
		padding: 0 10px !important;
		box-sizing: border-box;
	}

	.sucursales-list {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		max-height: 60vh;
		overflow-y: auto;
		flex: 1 1 100% !important;
		box-sizing: border-box;
		margin: 0 auto 40px;
		padding-bottom: 16px;
	}

	.sucursales-mapa {
		display: none !important;
	}

	.carousel-automatico {
	  position: relative;
	  margin-top: 0 !important;
	  z-index: 1;
	  width: 100%;
	  overflow: hidden;
	  border-radius: 0;
	  min-height: 0;
	  padding: 0 !important;
	}
	
	.carousel-automatico .slick-slide,
	.carousel-slide,
	.carousel-slide a,
	.carousel-slide picture {
	  width: 100%;
	}
	
	.carousel-slide picture {
	  display: block;
	  width: 100%;
	  aspect-ratio: auto !important;
	  overflow: visible;
	  background: #fff;
	}
	
	.carousel-img {
	  width: 100%;
	  height: auto !important;
	  max-height: none !important;
	  object-fit: contain !important;
	  object-position: center;
	  display: block;
	  border-radius: 0 !important;
	  background-color: #fff;
	}

	.banner-card {
		min-height: 160px;
		border-radius: 16px;
	}
	.banner2-card {
		min-height: 160px;
		border-radius: 16px;
	}
	.banner3-card {
		min-height: 200px;
		border-radius: 16px;
	}

	.product-card .card-img-wrapper img {
	  height: 100%;
	}
	.product-add {
		gap: 6px;
		padding: 12px 0 12px;
	}

	.section-card-2x {
	  padding: 12px !important;
	}
	
	.section-card-2x .slick-slide > div > div {
	  flex: 1 1 50%;
	  max-width: 50%;
	  padding: 4px !important;
	  box-sizing: border-box;
	}

	.slick-prev-nav,
	.slick-next-nav {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		z-index: 3;
		background: rgba(0, 0, 0, 0.6);
		color: #fff;
		border: none;
		width: 26px;
		height: 26px;
		border-radius: 50%;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.slick-prev-nav { left: 20px; }
	.slick-next-nav { right: 20px; }

	.slick-prev-nav i, .slick-next-nav i {
		font-size: 14px;
		line-height: 1;
	}

	.slick-prev-for, .slick-next-for {
		font-size: 18px;
		width: 32px;
		height: 32px;
	}

  .producto-lista-container .bg-white.p-3.rounded.shadow-sm {
    width: 100% !important;
    margin: 0 auto !important;
    padding: 10px !important;
    box-sizing: border-box;
  }

  .producto-lista-container .productos-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    padding: 0;
  }

  .producto-lista-container .productos-container .card {
    border-radius: 10px;
    overflow: hidden;
  }

  #btnAbrirFiltros {
    display: block;
    width: 100%;
    font-weight: 600;
    background: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 10px 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
    transition: background 0.2s ease, transform 0.1s ease;
  }

  #btnAbrirFiltros:hover {
    background: #e55c00;
    transform: translateY(-1px);
  }

  #btnAbrirFiltros i {
    margin-right: 6px;
    font-size: 1.1rem;
  }

  .producto-lista-section .col-md-3 { display: none !important; }
  .producto-lista-section .col-md-9 { width: 100%; max-width: 100%; }

  .producto-layout {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 20px;
    padding: 10px;
    overflow: visible !important;
  }

  .producto-galeria {
    width: 100% !important;
    max-width: 100% !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: visible !important;
    box-sizing: border-box;
    padding: 0 10px;
  }

  .slider-for {
    width: 100% !important;
    max-width: 450px;
    margin: 0 auto;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    overflow: hidden;
  }

  .slider-for img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .slider-nav {
    margin-top: 10px;
    width: 100%;
    max-width: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }

  .slider-nav .swiper-slide {
    flex: 0 0 auto;
    width: 80px;
    height: 100px;
  }

  .slider-nav img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 6px;
  }

  .producto-galeria .swiper-button-prev { left: 10px !important; }
  .producto-galeria .swiper-button-next { right: 10px !important; }

  .producto-info {
    width: 100% !important;
    max-width: 100% !important;
    padding: 15px;
    box-sizing: border-box;
  }

  body > div:first-of-type {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .container,
  .main-container {
    max-width: 100%;
    width: 100%;
    padding-left: 12px;
    padding-right: 12px;
    box-sizing: border-box;
  }

  .payment-section.container.main-container {
    max-width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }

  .payment-layout {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  .payment-main.card,
  .payment-sidebar {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  .payment-summary-card {
    width: 100%;
  }

  .payment-main.card {
    overflow: hidden;
  }

  .payment-main.card .card-body {
	width: 100%;
    max-width: 100%;
    overflow: visible;
  }

  .payment-panels-wrapper {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  .payment-panel {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  .payment-panel-content {
    max-width: 100%;
    box-sizing: border-box;
    white-space: pre-line;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  .payment-form-actions {
    justify-content: flex-end;
    padding: 0 12px 8px;
  }

  .footer-main,
  .footer-bottom,
  .footer-bottom .container {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  .bottom-nav {
    width: 100%;
    max-width: 100%;
    left: 0;
    right: 0;
    overflow-x: hidden;
  }
  
    /* Mostrar acciones sin hover en móvil */
  .card-actions{
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
  }
  
  .ribbon {
    top: 10px;
    left: 8px;
    min-width: 66px;
    height: 20px;
    padding: 0 8px;
    font-size: 9px;
    border-radius: 4px;
  }
  
	/* Separar secciones normales del borde en mobile */
/* Más ancho útil para las secciones móviles */
	#contenedor-secciones > div > div > section.section-container:not(.carousel-automatico),
	#contenedor-secciones > div > div > section.section-card:not(.carousel-automatico),
	#contenedor-secciones > div > div > section.section-card-2x:not(.carousel-automatico),
	#contenedor-secciones > div > div > section.section-marquee:not(.carousel-automatico) {
	  width: calc(100% - 12px) !important;
	  max-width: calc(100% - 12px) !important;
	  margin-left: auto !important;
	  margin-right: auto !important;
	  padding-left: 6px !important;
	  padding-right: 6px !important;
	  box-sizing: border-box !important;
	}
	
	/* Menos aire interno en secciones */
	.section-card,
	.section-card-2x,
	.catalogo,
	.fijadores,
	.promociones,
	.marcas,
	.banners1,
	.banners2,
	.banners3 {
	  padding: 12px !important;
	}
	
	/* Menos hueco entre slides */
	.section-card .slick-slide,
	.banners1 .slick-slide,
	.banners2 .slick-slide,
	.banners3 .slick-slide {
	  padding: 4px !important;
	}
	
	.section-card-2x .slick-slide > div > div {
	  padding: 4px !important;
	}
	
	/* 1xN mobile: dar aire lateral al bloque cantidad + añadir */
	.section-card .block-add {
	  padding-left: 8px;
	  padding-right: 8px;
	  box-sizing: border-box;
	}
	
	.section-card .product-add {
	  width: calc(100% - 8px);
	  margin: 0 auto;
	  gap: 4px;
	  transform: translateY(-1px);
	}
	
	.section-card .qty-control {
	  height: 30px;
	  border-radius: 8px;
	  flex: 1 1 auto;
	  min-width: 0;
	}
	
	.section-card .qty-btn {
	  width: 24px;
	  font-size: 15px;
	}
	
	.section-card .qty-input {
	  width: 28px;
	  font-size: 0.9rem;
	}
	
	.section-card .btn-add {
	  height: 30px;
	  min-width: 64px;
	  padding: 0 10px;
	  font-size: 0.72rem;
	  border-radius: 8px;
	  flex: 0 0 auto;
	}
	/*hasta aqui*/
}

@media (max-width: 480px) {
	.banner-card {
		min-height: 140px;
		border-radius: 12px;
	}

	.banner2-card {
		min-height: 140px;
		border-radius: 12px;
	}

	.banner3-card {
		min-height: 160px;
		border-radius: 12px;
	}

	.card img {
		height: 160px;
	}

	.btn-add, .btn-view {
		padding: 0 10px;
		height: 34px;
		font-size: 0.8rem;
		min-width: 70px;
	}

	.qty-btn {
		width: 32px;
	}

	.qty-input {
		width: 42px;
	}

	.product-add {
		padding: 10px 0 10px;
	}

	.section-card-2x {
	  padding: 10px !important;
	}
	
	.section-card-2x .slick-slide > div > div {
	  flex: 1 1 50%;
	  max-width: 50%;
	  padding: 4px !important;
	}
	/*mobile de aqui*/
	.section-card-2x .card-promo {
	  max-width: 100% !important;
	  height: auto !important;
	  min-height: 350px !important;
	}
	
	.section-card-2x .card-actions {
	  gap: 6px;
	  margin: 4px 0 6px;
	}
	
	.section-card-2x .card-actions .action-btn {
	  width: 26px;
	  height: 26px;
	  font-size: 12px;
	}
	
	.section-card-2x .block-img {
	  height: 132px;
	}
	
	.section-card-2x .card-img-wrapper {
	  height: 132px;
	}
	
	.section-card-2x .badge-promo {
	  top: 8px;
	  right: 8px;
	  font-size: 0.68rem;
	  padding: 3px 6px;
	  border-radius: 5px;
	}
	
	.section-card-2x .ribbon {
	  min-width: 58px;
	  height: 18px;
	  font-size: 8px;
	  padding: 0 6px;
	}
	/*hasta aqui*/
	
  .producto-lista-container .bg-white.p-3.rounded.shadow-sm {
    width: 94% !important;
    margin: 0 auto !important;
    padding: 8px !important;
    box-sizing: border-box;
  }

  .producto-lista-container .productos-container {
    display: grid;
    grid-template-columns: repeat(1, minmax(240px, 1fr));
    justify-content: center;
    gap: 14px;
    width: 100%;
    padding: 0 8px;
    box-sizing: border-box;
  }

  .producto-lista-container .productos-container .item {
    display: flex;
    justify-content: center;
  }

  .producto-lista-container .productos-container .card {
    max-width: 300px;
    width: 100%;
  }

  :root{
	--footer-safe: 110px;
  }

  .footer-logo-img{
    max-height: 32px;
  }
  
  .carousel-slide picture {
	  aspect-ratio: auto !important;
	}
	
	.carousel-img {
	  width: 100%;
	  height: auto !important;
	  object-fit: contain !important;
	}
	
	/* 1xN mobile: dar aire lateral al bloque cantidad + añadir */
	.section-card .block-add {
	  padding-left: 10px;
	  padding-right: 10px;
	}
	
	.section-card .product-add {
	  width: calc(100% - 10px);
	  gap: 4px;
	}
	
	.section-card .qty-btn {
	  width: 22px;
	}
	
	.section-card .qty-input {
	  width: 26px;
	}
	
	.section-card .btn-add {
	  min-width: 60px;
	  padding: 0 8px;
	  font-size: 0.7rem;
	}
	/*hasta aqui*/
}