/*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%;
	}
}



@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;
	}
  
  /* 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 */


	/* 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;
  	}





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

	/*FOOTER OCULTAR TOP1 Y TOP2 SOLO DEJAR FOOTER-BOTTOM*/


  /* Layout en columna, centrado */




  /* Orden:
     1) logo VitalMed
     2) copyright
     3) logo desarrollador
  */




  /* Asegurar que los logos ocupen su lugar */

  
}

@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); } */





	/* 🔹 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;
	}



}

@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;
	}





	.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;
	}











  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;
  }



  .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;
	}

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


  
  .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*/
}
/* Footer compacto: reservar únicamente la navegación móvil y el área segura. */
@media (max-width: 992px) {






}

/* Navegación móvil flotante con el elemento activo elevado. */
@media (max-width: 992px) {
  :root {
    --bottom-nav-h: 92px;
    --fab-wa-bottom: calc(104px + env(safe-area-inset-bottom, 0px));
  }
  .bottom-nav {
    left: 12px; right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    width: calc(100% - 24px); height: 64px;
    padding: 0 6px;
    background: #17191d;
    border: 1px solid rgba(110, 140, 200, .28);
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .4), 0 0 12px rgba(50, 74, 124, .2);
    overflow: visible;
  }
  .bottom-nav .bottom-item {
    position: relative; min-width: 0; min-height: 52px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; padding: 4px 0; text-decoration: none;
    color: #d5dae3; font-size: 11px; line-height: 1.2;
    border-radius: 12px;
  }
  .bottom-nav .bottom-item i {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 30px; margin: 0;
    font-size: 21px; line-height: 1;
  }
  .bottom-nav .bottom-item.active { color: var(--primary-color); font-weight: 700; }
  .bottom-nav .bottom-item.active i {
    width: 46px; height: 46px; margin-top: -24px; margin-bottom: 2px;
    background: #17191d; color: var(--primary-color);
    border: 2px solid var(--primary-color); border-radius: 50%;
    box-shadow: 0 0 0 6px #17191d, 0 0 16px rgba(255, 107, 0, .28);
  }
  .bottom-nav .bottom-item:hover { color: var(--primary-color); }
  .bottom-nav .bottom-item:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }
  .bottom-nav .cart-badge {
    top: 0; right: calc(50% - 24px); min-width: 18px; width: auto; height: 18px;
    padding-inline: 3px; border: 2px solid #17191d; font-size: 10px; line-height: 1;
  }
}