.hero-section {
	padding: 100px 0;
}

.welcome-title {
	font-family: 'Playfair Display', serif !important;
	font-style: italic;
	font-size: 5rem;
	color: var(--yerba-dark);
}

/* BOTÓN PRINCIPAL: Fondo Negro -> Dorado */
.btn-hero-primary {
	background-color: var(--yerba-dark);
	color: white !important;
	border-radius: 0;
	padding: 15px 35px;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 0.75rem;
	border: none;
	transition: var(--transition);
	display: inline-block;
	text-decoration: none;
	/* ELIMINAR EL MARCO AL CLICKEAR */
	outline: none !important;
	box-shadow: none !important;
}

	.btn-hero-primary:hover {
		background-color: var(--yerba-gold) !important;
		transform: translateY(-3px);
	}

	/* MATAR EL BORDE DE BOOTSTRAP EN FOCUS/ACTIVE */
	.btn-hero-primary:focus,
	.btn-hero-primary:active {
		outline: none !important;
		box-shadow: none !important;
		background-color: var(--yerba-dark) !important;
	}

	.btn-hero-primary:hover:focus {
		background-color: var(--yerba-gold) !important;
	}

/* BOTÓN SECUNDARIO: Nuestra Historia (Sin fondo + Línea) */
.btn-hero-secondary {
	text-decoration: none;
	text-transform: uppercase;
	padding: 15px 25px;
	letter-spacing: 2px;
	font-size: 0.75rem;
	color: #666;
	position: relative;
	display: inline-block;
	transition: color 0.3s ease;
	/* ELIMINAR EL MARCO AL CLICKEAR */
	outline: none !important;
	box-shadow: none !important;
	background: transparent !important;
}

	.btn-hero-secondary::after {
		content: '';
		position: absolute;
		width: 0;
		height: 1px;
		bottom: 10px;
		left: 25px;
		background-color: var(--yerba-gold);
		transition: width 0.3s ease;
	}

	.btn-hero-secondary:hover {
		color: var(--yerba-gold) !important;
	}

		.btn-hero-secondary:hover::after {
			width: calc(100% - 50px);
		}

	/* MATAR EL BORDE DE BOOTSTRAP EN EL SEGUNDO BOTÓN */
	.btn-hero-secondary:focus,
	.btn-hero-secondary:active {
		outline: none !important;
		box-shadow: none !important;
		background: transparent !important;
		color: #666 !important;
	}

	.btn-hero-secondary:hover:focus {
		color: var(--yerba-gold) !important;
	}

/* TARJETAS Y ANIMACIONES (Se mantienen igual) */
.img-container {
	width: 100%;
	height: 280px;
	overflow: hidden;
	position: relative;
}

	.img-container img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: transform 0.8s cubic-bezier(0.2, 1, 0.3, 1);
	}

.item-card:hover .img-container img {
	transform: scale(1.1);
}

.card-animate {
	opacity: 0;
	animation: fadeInUp 0.8s ease-out forwards;
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* --- NUEVO HERO SECTION --- */
.hero-container {
	/* Altura del hero, ajusta si tienes un navbar muy alto */
	min-height: 85vh;
	/* TODO: reemplazar con foto propia del negocio (sprint de fotografía) */
	/* PLACEHOLDER: degradado dorado + patrón sutil mientras llega la foto real */
	background-color: #f4f1ea;
	background-image: repeating-linear-gradient(45deg, rgba(181, 164, 120, 0.06) 0px, rgba(181, 164, 120, 0.06) 2px, transparent 2px, transparent 14px), linear-gradient(160deg, #f4f1ea 0%, #ece5d3 55%, #e2d6b8 100%);
	background-size: cover;
	background-position: center;
	position: relative;
	/* Centrado del recuadro usando Flexbox */
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 2rem;
}

.hero-proximamente-tag {
	position: absolute;
	bottom: 2.5rem;
	left: 0;
	right: 0;
	text-align: center;
	letter-spacing: 3px;
	text-transform: uppercase;
	font-size: 0.75rem;
	color: #a8946a;
	font-weight: bold;
}

/* --- EL RECUADRO CENTRAL (Efecto Cristal Claro) --- */
.hero-overlay-box {
	/* Fondo blanco al 85% de opacidad para que deje ver la imagen sutilmente */
	background-color: rgba(255, 255, 255, 0.85);
	/* Efecto de desenfoque en lo que queda detrás del cuadro */
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	/* Espaciado y estructura */
	padding: 4rem 5rem;
	max-width: 800px;
	width: 100%;
	/* Sombra suave para despegarlo del fondo */
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
	/* Borde súper sutil (opcional) */
	border: 1px solid rgba(255, 255, 255, 0.5);
}

/* --- AJUSTE DEL DIVIDER DORADO --- */
.divider-gold {
	width: 60px;
	height: 2px;
	background-color: #b5a478; /* Tu color dorado */
}

/* --- PLACEHOLDER "PRÓXIMAMENTE" (mientras llegan las fotos reales del negocio) --- */
.proximamente-placeholder {
	background-color: #faf9f6;
	border: 1px dashed #b5a478;
}

/* --- BOTÓN PERSONALIZADO "VER DETALLE" --- */
.btn-ver-detalle {
	/* Estado Normal: Texto negro, borde negro, fondo transparente */
	background-color: transparent;
	color: #222 !important; /* Forzamos el color negro inicial */
	border: 1px solid #222;
	font-family: 'Inter', sans-serif;
	letter-spacing: 1px;
	font-size: 0.8rem;
	transition: all 0.3s ease; /* Transición suave */
	display: inline-block;
	text-decoration: none;
}

	.btn-ver-detalle:hover {
		/* Estado Hover: Fondo negro, texto blanco */
		background-color: #222;
		color: #ffffff !important; /* Forzamos el texto blanco para que sea legible */
		border-color: #222;
		transform: translateY(-2px); /* Pequeño efecto de levantamiento */
	}