body {
			padding-top: 70px; /* espacio para el navbar fijo */
			margin: 0;
			border: none; outline: none; font-family: 'Open Sans', sans-serif; font-optical-sizing: auto;
			background-color:#000;
		}

		.navbar {
			transition: top 0.4s ease-in-out;
		}

		.navbar-hidden {
			top: -80px; /* ajusta según la altura de tu navbar */
		}
		.btn-rosado {
			background-color: #a20045;
			color: white;
			border: none;
			transition: background-color 0.3s ease-in-out, transform 0.2s;
		}

		.btn-rosado:hover {
			background-color: #ff066e;
			color: white;
		}
		.pt10
		{
			font-size:10pt;
		}
		.pt11
		{
			font-size:11pt;
		}
		.pt12
		{
			font-size:12pt;
		}
		.pt14
		{
			font-size:14pt;
		}
		.pt16
		{
			font-size:16pt;
		}
		.pt18
		{
			font-size:18pt;
		}
		.pt8
		{
			font-size:8pt;
		}
		.pd5 {
			padding:5px;
		}
		.pd10 {
			padding:10px;
		}
		.pd20 {
			padding:20px;
		}
		.link-gris {
		  color: #aaa; 
		  text-decoration: none;
		  transition: color 0.3s ease-in-out;
		}
		.der10 {
			padding-right:10px;
		}
		.top10 {
			padding-top:10px;
		}
		.top5 {
			padding-top:5px;
		}
		.top20 {
			padding-top:20px;
		}
		.link-gris:hover {
		  color: #fff;
		  text-decoration: none;
		}
		
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}

		#contenedor-imagenes {
			width: 100%; 
			
			position: relative;
			overflow: hidden;
			border: none;
		}
		.h70 {
			height: 70vh;
		}

		.imagen-elemento {
			position: absolute;
			width: 100%;
			height: 100%;
			object-fit: cover;
			display: none;
		}

		.imagen-elemento.active {
			display: block;
			z-index: 0;
		}

		/* Logo centrado al frente */
		#logo-centro {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			z-index: 2;
			
			height: auto;
			pointer-events: none; 
		}
		.tit {
			font-weight:bold; 
			color:#d10359
		}
		.bco {
			color:#fff;
		}
		.neg {
			font-weight:bold; 
		}
		
		
		
		#slider-container {
			position: relative;
			width: 100%;
			max-width: 600px;
			height: 400px;
			margin: auto;
			overflow: hidden;
			background-color: #f0f0f0;
		}

		#slider-container .slider-img {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			opacity: 0;
			transition: opacity 1.2s ease-in-out; /* transición más larga y visible */
		}

		#slider-container .slider-img.active {
			opacity: 1;
			z-index: 2;
		}
		
		
		
		
		
		.fonbco {
			background-color:#fff;
		}
		.fongri {
			background-color:#f0f0f0;
		}
		.fonneg {
			background-color:#010101;
		}
		
		
		.producto-elemento {
			max-width: 240px;
			border: 1px solid #e0e0e0;     /* Borde gris tenue */
			border-radius: 6px;
			overflow: hidden;
			background: #fff;
			text-align: center;
			font-family: Arial, sans-serif;
			transition: box-shadow 0.2s ease;
			cursor: pointer;
		}

		.producto-elemento:hover {
			box-shadow: 0 4px 12px rgba(0,0,0,0.12);
		}

		
		.producto-imagen {
			width: 100%;
			height: 220px;
			display: flex;
			align-items: center;
			justify-content: center;
			overflow: hidden;
			border-bottom: 1px solid #e0e0e0;  /* Separación gris tenue */
		}

		
		.producto-imagen img {
			width: 85%;
			transition: transform 0.25s ease;
		}

		.producto-elemento:hover .producto-imagen img {
			transform: scale(1.05);   /* Crece levemente */
		}

		
		.producto-titulo {
			padding: 16px;
			font-size: 17px;
			font-weight: 600;
			color: #333;
		}
		
		
		a.rosado {
			color: #a20045;
			text-decoration: none;
			transition: color 0.25s ease, transform 0.25s ease;
		}

		a.rosado:hover {
			color: #ff066e;
		}
		
		.boton-rosado {
			display: block;                 
			width: 100%;                    
			height: 100%;                   
			background-color: #a20045;
			color: #fff;
			text-decoration: none;
			text-align: center;
			transition: background-color 0.3s ease, text-shadow 0.3s ease;
		}

		/* Hover: solo cambia color y fondo */
		.boton-rosado:hover {
			background-color: #ff066e;
			color: #fff;
			text-shadow: 0 2px 4px rgba(0,0,0,0.50);
		}
		.sinsub {
			text-decoration: none;
		}
		.alto75 {
			height:75px;
			overflow:hidden;
		}
		
		/* Para transición suave en el slider secundario */
		#slider-container {
			position: relative;
		}

		.slider-img {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			opacity: 0;
			transition: opacity 0.6s ease-in-out;
		}

		.slider-img.active {
			opacity: 1;
			z-index: 2;
		}
		.icorosa {
			font-size: 2rem;
			color: #ff066e;
		}
		
		
		
		
	.flip-card {
  width: 100%;
  height: 200px;
  perspective: 1000px;
  display: inline-block;
}

    /* Elemento que rota */
    .flip-inner {
      width: 100%;
      height: 100%;
      position: relative;
      transform-style: preserve-3d;
      transition: transform 0.5s ease;
	  will-change: transform;
    }

    /* Clase que activa el giro (por hover o por jQuery) */
    .flip-card.is-flipped .flip-inner {
      transform: rotateY(180deg);
    }

    /* Caras */
    .flip-face {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      border-radius: 12px;
      overflow: hidden;
    }

    /* Frente (imagen) */
    .flip-front img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    /* Reverso */
    .flip-back {
      transform: rotateY(180deg);
      display: grid;
      place-items: center;
      background: #111;
      color: #fff;
      font-family: system-ui, Arial, sans-serif;
      padding: 18px;
      box-sizing: border-box;
      text-align: center;
    }

    .flip-back a {
      color: #fff;
      text-decoration: none;
      font-size: 18px;
      font-weight: 600;
      padding: 10px 14px;
      border: 1px solid rgba(255,255,255,.4);
      border-radius: 10px;
    }
    .flip-back a:hover {
      border-color: rgba(255,255,255,.9);
    }

    /* Opción: hover puro sin jQuery (PC) */
    .flip-card.hover-flip:hover .flip-inner {
      transform: rotateY(180deg);
    }
	
	\@media (hover: hover) and (pointer: fine) {
  .flip-card.hover-flip:hover .flip-inner {
    transform: rotateY(180deg);
  }
}
	
	.thumb-btn {
	  opacity: 0.33;
	  transition: opacity 0.2s ease-in-out, box-shadow 0.2s;
	}

	.thumb-btn.active {
	  opacity: 1;
	}
	
	
	.thumb-btn:focus,
	.thumb-btn:focus-visible {
	  outline: none !important;
	  box-shadow: none !important;
	}
    .thumb-360-wrap {
  position: relative;
  display: inline-block;
  width: 100%;
}

/* Ícono 360 */
.thumb-360-icon {
  position: absolute;
  inset: 0;
  width: 60%;
  height: 60%;
  margin: auto;
  object-fit: contain;
  pointer-events: none;
  opacity: 0.9;
}

.bordorosa {
    border-top: 1px solid #e4007c;
	border-bottom: 1px solid #e4007c;
}


.opcion {
    float: left;
    padding: 10px;
    border-radius: 10px;
    margin: 5px;
    cursor: pointer;
}

/* Estado inactivo */
.opcion.inactivo {
    background: #ffffff;
    border: 1px solid #b5b5b5;
}

.opcion.inactivo a {
    color: #a20045; /* rosado */
    text-decoration: none;
}
.crosa {
	color: #a20045; 
}
/* Estado activo */
.opcion.activo {
    background: #7a003c; /* guinda */
    border: 1px solid #ff2f92; /* rosa mexicano */
}

.opcion.activo a {
    color: #ffffff;
    text-decoration: none;
}

/* Hover opcional */
.opcion:hover {
    opacity: 0.9;
}
	



.flip-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;

  width: 34px;
  height: 34px;
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(0,0,0,0.55);
  color: #fff;
  cursor: pointer;

  transition: background 0.2s ease, transform 0.15s ease;
}

.flip-close:hover {
  background: rgba(255,255,255,0.85);
  color: #000;
  transform: scale(1.1);
}

.flip-close i {
  font-size: 1.1rem;
  pointer-events: none;
}




/* CONTENEDOR GENERAL */
.cs_flip_container {
    width: 100%;
    height: 200px;
    perspective: 1000px;
    position: relative;
	
}

/* BASE COMÚN */
.cs_flip_face {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    transition: transform 0.4s ease, opacity 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* PRIMER DIV */
.cs_flip_front {
    background: #f5f5f5;
    transform: rotateY(0deg);
    z-index: 2;
}

/* IMAGEN */
.cs_flip_front img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
}

/* SEGUNDO DIV */
.cs_flip_back {
    background: #000;
    transform: rotateY(90deg);
    opacity: 0;
    z-index: 1;
    flex-direction: column;
    padding: 15px;
    box-sizing: border-box;
	color:#fff;
	position: relative;
}

/* ACTIVO */
.cs_flip_show_back {
    transform: rotateY(0deg);
    opacity: 1;
    z-index: 2;
}

.cs_flip_hide_front {
    transform: rotateY(-90deg);
    opacity: 0;
    z-index: 1;
}

/* ICONO REGRESO */
.cs_flip_back_icon {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 25px;
    cursor: pointer;
    color: #333;
    user-select: none;
    z-index: 3;
    transition: transform 0.2s ease, opacity 0.2s ease;
	background-color:#a20045;
	border-radius: 50%;
	padding:5px;
}

.cs_flip_back_icon:hover {
    transform: rotate(-90deg);
    opacity: 0.7;
}




.cs2_card {
  border: 2px solid #ebebeb;
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.3s ease;
  background: #fff;
  cursor: pointer;
}

.cs2_card.cs2_active,
.cs2_card:hover {
  border-color: #a20045;
}

.cs2_img_wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

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

.cs2_overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.0);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 5; 
  pointer-events: none;
}

.cs2_overlay a {
  pointer-events: auto;   
}

.cs2_card.cs2_active .cs2_overlay,
.cs2_card:hover .cs2_overlay {
  opacity: 1;
}

.cs2_icon_circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease, color 0.25s ease;
}

.cs2_icon_circle i {
  font-size: 1.4rem;
  color: #000000;
}

.cs2_icon_circle:hover {
  background: #a20045;
}

.cs2_icon_circle:hover i {
  color: #ffffff;
}

.cs2_text {
  padding: 12px;
}
.tipro
{
	font-size:10pt;
	color: #999;
	text-decoration: none;
}
.urlti,
.urlti:visited {
  color: #000;
  text-decoration: none;
  font-weight: 700;
}

.urlti:hover,
.urlti:focus {
  color: #a20045; 
  text-decoration: none;
}
.h50 {
   height: 50px; 
}
.h30 {
   height: 30px; 
}
.h20 {
   height: 20px; 
}
.ohi {
  overflow: hidden;
}
.titulo_prod {
   height: 50px; 
   overflow: hidden;
}



.contenedor-img {
  position: relative;
  aspect-ratio: 4 / 3;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contenedor-img::before {
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: blur(12px);
  transform: scale(1.1); /* evita bordes al aplicar blur */
  z-index: 1;
  pointer-events: none;
}


.contenedor-img img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.contenedor-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.33);
  z-index: 1;
  pointer-events: none;
}