/**********************************************************************
 * Microfast Store – CSS personalizado
 * Autor: Microfast SRL
 * Versión: 1.1
 * Descripción:
 *   Capa visual independiente de la plantilla Belle.
 *   Compatible sólo con Bootstrap 5 + jQuery.
 *   Namespace global: .mf
 *
 * Estructura:
 *   1. Variables y colores base
 *   2. Helpers y ajustes globales
 *   3. Header y navegación
 *   4. Banners y anuncios
 *   5. Grilla de productos
 *   6. Ficha de producto (articulo.php)
 *   7. Carrito y checkout
 *   8. Formularios y botones
 *   9. Utilidades responsivas
 *   10. Animaciones y transiciones
 **********************************************************************/

/*======================================================================
  1. Variables y colores base
======================================================================*/
:root {
	--mf-color-principal: #00a650;
	--mf-color-secundario: #1a73e8;
	--mf-color-texto: #333;
	--mf-color-fondo: #fff;
	--mf-color-borde: #e5e5e5;
	--mf-shadow-sm: 0 2px 6px rgba(0,0,0,.08);
	--mf-shadow-md: 0 4px 12px rgba(0,0,0,.1);
	--mf-radius: .75rem;
	--mf-transition: all .25s ease;
}

/*======================================================================
  2. Helpers y ajustes globales
======================================================================*/
.mf {
	color: var(--mf-color-texto);
	font-family: "Poppins", sans-serif;
}
.mf .bold { font-weight:700 !important; }
.mf .text-green { color: var(--mf-color-principal) !important; }
.mf .shadow-sm { box-shadow: var(--mf-shadow-sm); }
.mf .shadow-md { box-shadow: var(--mf-shadow-md); }
.mf .radius { border-radius: var(--mf-radius); }

.mf a:hover,
.mf a:focus {
	text-decoration: none !important;
	opacity: .85;
}

/*======================================================================
  3. Header y navegación
======================================================================*/
/* (se completará más adelante si migramos header de tienda) */

/*======================================================================
  4. Banners y anuncios
======================================================================*/

/* --- Banner base --- */
.mf .cuotas-global{
	background: linear-gradient(90deg,#e9f7ef, #d6f5ff);
	border: 1px solid rgba(0,0,0,.06);
	border-radius: var(--mf-radius);
	padding: .85rem 1rem;
	box-shadow: var(--mf-shadow-sm);
}
.mf .cuotas-emoji{
	font-size: 1.35rem;
	line-height: 1;
	margin-right: .5rem;
}
.mf .cuotas-titulo{
	font-weight: 800;
	letter-spacing: .3px;
}
.mf .cuotas-sub{
	color: #2b2f33;
	opacity: .85;
	font-weight: 600;
}
.mf .btn-close-cuotas{
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 50%;
	background: rgba(0,0,0,.06);
	position: relative;
}
.mf .btn-close-cuotas:before,
.mf .btn-close-cuotas:after{
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 2px;
	background: #333;
	transform-origin: center;
}
.mf .btn-close-cuotas:before{ transform: translate(-50%,-50%) rotate(45deg); }
.mf .btn-close-cuotas:after{ transform: translate(-50%,-50%) rotate(-45deg); }
.mf .btn-close-cuotas:hover{ background: rgba(0,0,0,.1); }

/* --- Variante: banner cuotas (6 cuotas sin interés) --- */
.mf .cuotas-global.cuotas-6{
	background: linear-gradient(90deg,#e9f7ef,#d6f5ff);
	color:#004d25;
}

/* --- Variante: banner transferencia bancaria (10% OFF) --- */
.mf .cuotas-global.cuotas-transfer{
	background: linear-gradient(90deg,#fff9e6,#fff2c2);
	color:#553d00;
}

/* --- Adaptación mobile --- */
@media (max-width: 575.98px){
	.mf .cuotas-global{
		position: sticky;
		top: 56px;				/* ajustar según header */
		z-index: 1030;
		margin: .5rem .5rem 0 .5rem;
		padding: .55rem .75rem;	/* más compacto */
		padding-right: 3rem;	/* espacio para la X */
		border-radius: .75rem;
		display: flex;
		align-items: center;
		gap: .5rem;
		box-shadow: 0 2px 4px rgba(0,0,0,.08); /* flota un poco */
	}

	/* primera línea/tira de texto en una sola fila cuando entra */
	.mf .cuotas-global > div:first-child{
		display: flex;
		align-items: center;
		gap: .4rem;
		flex: 1 1 auto;
		min-width: 0;
	}

	/* separación entre los dos banners */
	.mf .cuotas-6{ margin-bottom: .4rem; }

	.mf .cuotas-emoji{ font-size: 1.1rem; margin-right: .35rem; }
	.mf .cuotas-titulo{ font-size: .95rem; line-height: 1.1; }
	.mf .cuotas-sub{ font-size: .85rem; line-height: 1.1; }

	.mf .btn-close-cuotas{
		position: absolute;
		right: .5rem;
		top: .5rem;
		width: 28px;
		height: 28px;
		background: rgba(0,0,0,.08);
		cursor: pointer;
	}
}


/*======================================================================
  5. Grilla de productos
======================================================================*/
.mf .product-item{
	border: 1px solid var(--mf-color-borde);
	border-radius: var(--mf-radius);
	overflow: hidden;
	transition: var(--mf-transition);
	background-color: var(--mf-color-fondo);
}
.mf .product-item:hover{
	transform: translateY(-4px);
	box-shadow: var(--mf-shadow-md);
}
.mf .product-image .product-labels .lbl{
	border-radius: .5rem;
	padding: .25rem .5rem;
	box-shadow: var(--mf-shadow-sm);
	font-size: .75rem;
	text-transform: uppercase;
	letter-spacing: .3px;
}
.mf .lbl-red{ background:#f54337; color:#fff; }
.mf .lbl-orange{ background:#ff9c07; color:#fff; }
.mf .lbl-green{ background:var(--mf-color-principal); color:#fff; }
.mf .lbl-purple{ background:#8b5cf6; color:#fff; }
.mf .lbl-yellow{ background:#ffc107; color:#222; }

/* Precio y cuotas */
.mf .product-details .product-price{
	font-size: 1rem;
	font-weight: 600;
}
.mf .cuotas-msg{
	font-size: .8rem;
	color: var(--mf-color-principal);
	margin-top: .25rem;
}

/*======================================================================
  6. Ficha de producto (articulo.php)
======================================================================*/
.mf .articulo-titulo{
	font-weight: 700;
	font-size: 1.4rem;
	margin-bottom: .5rem;
}
.mf .articulo-precio{
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--mf-color-principal);
}
.mf .articulo-descripcion{
	font-size: .95rem;
	color: #555;
}

/*======================================================================
  7. Carrito y checkout
======================================================================*/
.mf .cart-resumen{
	border:1px solid var(--mf-color-borde);
	border-radius:var(--mf-radius);
	padding:1rem;
	background:#fff;
	box-shadow:var(--mf-shadow-sm);
}
.mf .cart-total{
	font-size:1.1rem;
	font-weight:700;
}

/*======================================================================
  8. Formularios y botones
======================================================================*/
.mf .btn-mf{
	background-color: var(--mf-color-principal);
	color:#fff !important;
	border:0;
	border-radius: var(--mf-radius);
	padding:.6rem 1.2rem;
	font-weight:600;
	transition: var(--mf-transition);
}
.mf .btn-mf:hover{
	background-color:#009247;
	color:#fff;
}

/*======================================================================
  9. Utilidades responsivas
======================================================================*/
@media (max-width:767.98px){
	.mf .product-item{ margin-bottom:1rem; }
}

/*======================================================================
  10. Animaciones y transiciones
======================================================================*/
.mf .fade-in{
	animation: mfFadeIn .5s ease forwards;
}
@keyframes mfFadeIn{
	from{ opacity:0; transform:translateY(10px); }
	to{ opacity:1; transform:translateY(0); }
}