/* =======================================================
   ESTILOS BOUTIQUE + FUSION (EXCLUSIVOS DEL INDEX)
   ======================================================= */
:root {
	--verde-boutique: #0d9468;
	--verde-claro-boutique: #d1fae5;
}
body { background-color: #f9fafb; font-family: 'Inter', system-ui, sans-serif; }

/* Hero Inmersivo con foto fija de PELUQUERÍA */
.hero-boutique {
	position: relative;
	width: 100%;
	min-height: 80vh; /* Bajamos un poco la altura para UX móvil */
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	margin-top: -80px; 
	padding-top: 80px;
	border-radius: 0 0 40px 40px;
	background-image: url('https://womenzone.ca/blog/wp-content/uploads/2025/04/women-salon-1024x683.jpg'); /* FOTO FIJA PELUQUERÍA */
	background-size: cover;
	background-position: center;
}

.hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(17,24,39,0.3) 0%, rgba(17,24,39,0.8) 100%);
	z-index: 1;
}



.badge-fomo {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(255, 255, 255, 0.15);
	backdrop-filter: blur(10px);
	padding: 6px 16px;
	border-radius: 100px;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 20px;
	border: 1px solid rgba(255, 255, 255, 0.2);
}

/* =======================================================
   ANIMACIONES Y LAYOUT DEL HERO/CHAT
   ======================================================= */
/* Layout Base del Hero */
.hero-content-boutique {
	position: relative;
	z-index: 2;
	max-width: 900px; /* Contenedor inicial */
	padding: 0 20px;
	color: white;
	width: 100%;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-text-side {
	text-align: center;
	transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
	width: 100%;
}

/* Modificadores cuando el chat está ACTIVO (DESKTOP) */
@media (min-width: 769px) {
	.hero-content-boutique.chat-active {
		max-width: 1200px;
		flex-direction: row; /* Textos izq, Chat der */
		align-items: center;
		text-align: left;
	}
	.hero-content-boutique.chat-active .hero-text-side {
		flex: 1;
		text-align: left;
		padding-right: 40px;
	}
	.hero-content-boutique.chat-active .search-sticky-wrapper {
		flex: 1;
		max-width: 550px;
	}
}

/* Modificadores cuando el chat está ACTIVO (MÓVIL) */
@media (max-width: 768px) {
	.hero-content-boutique.chat-active {
		padding: 15px;
		gap: 15px;
	}
	.hero-content-boutique.chat-active .hero-text-side h1 {
		font-size: 2rem; /* Achicamos texto para dar lugar al chat */
	}
	.hero-content-boutique.chat-active .hero-text-side p {
		display: none; /* Ocultamos bajada para maximizar el chat */
	}
}

/* El Wrapper del Buscador/Chat */
.search-sticky-wrapper {
	position: relative;
	z-index: 100;
	width: 100%;
	max-width: 650px;
	transition: all 0.6s ease;
	display: flex;
	flex-direction: column; /* Fundamental: Chat arriba, input abajo */
}
@media (max-width: 768px) {
	.search-sticky-wrapper { position: sticky; top: 15px; }
}

/* El Contenedor del Chat (Mensajes) */
.chat-container {
	background: white;
	border-radius: 24px 24px 0 0; /* Bordes redondos solo arriba */
	overflow: hidden;
	color: #111827;
	text-align: left;
	max-height: 0;
	opacity: 0;
	transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
	display: flex;
	flex-direction: column;
}

/* Animación de apertura y alturas máximas */
.hero-content-boutique.chat-active .chat-container {
	opacity: 1;
	padding-top: 15px;
	border-bottom: 1px solid #f3f4f6;
	box-shadow: 0 -10px 40px rgba(0,0,0,0.15); /* Sombra hacia arriba */
	border-radius: 24px 24px 0 0;
}
@media (min-width: 769px) {
	.hero-content-boutique.chat-active .chat-container { max-height: 50vh; }
}
@media (max-width: 768px) {
	.hero-content-boutique.chat-active .chat-container { max-height: 50vh; }
}

/* El Buscador (Input Unificado) */
.boutique-search {
	display: flex;
	background: white;
	padding: 8px;
	border-radius: 100px;
	box-shadow: 0 20px 40px rgba(0,0,0,0.2);
	align-items: center;
	position: relative;
	transition: all 0.6s ease;
	flex-direction: row;
}

/* Cuando el chat está activo, el buscador se aplana arriba para encajar con los mensajes */
.hero-content-boutique.chat-active .boutique-search {
	border-radius: 0 0 24px 24px;
	box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

.boutique-search input {
	flex: 1;
	border: none;
	padding: 15px 25px;
	font-size: 16px;
	outline: none;
	background: transparent;
	color: #111827;
}

/* Botón Redondo Interior */
.boutique-search button {
	background: var(--verde-boutique);
	color: white;
	border: none;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	margin-right: 4px;
	flex-shrink: 0;
}
.boutique-search button:hover {
	background: #047857;
	transform: scale(1.05) rotate(5deg);
}
.boutique-search button span {
	font-size: 22px;
	transition: all 0.3s ease;
}

/* Contenedor del Chat (Ajustado visualmente) */
.hero-content-boutique.chat-active .boutique-search {
	box-shadow: none;
	margin-top: 0;
}
.chat-container {
	background: white;
	border-radius: 0 0 24px 24px;
	overflow: hidden;
	box-shadow: 0 20px 40px rgba(0,0,0,0.2);
	color: #111827;
	text-align: left;
	border-top: 1px solid #f3f4f6;
}

/* Tarjetas de Deseos (Mood Cards) - LINKS CORREGIDOS */
.mood-section {
	padding: 50px 20px;
	margin-top: -30px;
	position: relative;
	z-index: 10;
}
.mood-scroll {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	padding-bottom: 20px;
	scrollbar-width: none;
	snap-type: x mandatory;
}
.mood-scroll::-webkit-scrollbar { display: none; }
.mood-card {
	flex: 0 0 250px;
	height: 330px;
	border-radius: 24px;
	overflow: hidden;
	position: relative;
	scroll-snap-align: start;
	box-shadow: 0 10px 20px rgba(0,0,0,0.06);
	text-decoration: none;
	transition: 0.3s;
}
.mood-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,0.1); }
.mood-card img {
	width: 100%; height: 100%; object-fit: cover;
	transition: 0.5s;
}
.mood-card:hover img { transform: scale(1.05); }
.mood-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 60%);
	display: flex;
	align-items: flex-end;
	padding: 25px;
}
.mood-overlay h3 {
	color: white; margin: 0; font-size: 20px; font-weight: 700;
}

/* Títulos Boutique */
.titulo-boutique { font-size: 2rem; color: #111827; font-weight: 800; margin-bottom: 8px; letter-spacing: -0.5px; }
.subtitulo-boutique { color: #6b7280; font-size: 1.1rem; margin-bottom: 30px; }

/* Cards Refinadas */
.md3-card { border-radius: 20px; border: none; box-shadow: 0 4px 15px rgba(0,0,0,0.03); background: white; }
.md3-btn-text {
	background: rgba(16, 185, 129, 0.08);
}

/* FAQs RESTAURADAS Y REFINADAS */
.container-faqs { background: white; padding: 60px 20px; border-radius: 32px; margin-top: 80px; box-shadow: 0 10px 30px rgba(0,0,0,0.03); }
.faq-header { text-align: center; max-width: 700px; margin: 0 auto 50px; }
.faq-header h1 { font-size: 2.2rem; font-weight: 800; color: #111827; margin-bottom: 10px; }
.faq-header p { color: #6b7280; font-size: 1.1rem; }
.faq-container { max-width: 800px; margin: 0 auto; }
.faq-item { background: #f9fafb; border: 1px solid #f3f4f6; border-radius: 16px; margin-bottom: 15px; overflow: hidden; transition: 0.3s; }
.faq-question { padding: 20px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 10px; user-select: none; }
.q-text { display: flex; align-items: center; gap: 12px; font-weight: 600; color: #1f2937; font-size: 15px; }
.faq-icon-lead { color: var(--verde-boutique); font-size: 22px; }
.faq-icon-arrow { color: #9ca3af; transition: 0.3s; }
.faq-answer { padding: 0 20px; max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; color: #4b5563; font-size: 14px; line-height: 1.6; }
.faq-item.active { border-color: var(--verde-claro-boutique); background: white; box-shadow: 0 10px 20px rgba(0,0,0,0.02); }
.faq-item.active .faq-answer { padding: 0 20px 20px; max-height: 300px; }
.faq-item.active .faq-icon-arrow { transform: rotate(180deg); color: var(--verde-boutique); }
.faq-cta { text-align: center; margin-top: 40px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.faq-cta .btn-principal { background: var(--verde-boutique); color: white; padding: 12px 24px; border-radius: 100px; text-decoration: none; font-weight: bold; display: flex; align-items: center; gap: 8px; }

/* Footer Boutique */
.footer-boutique {
	background: #111827;
	color: white;
	padding: 60px 20px 30px;
	margin-top: 80px;
	border-radius: 40px 40px 0 0;
	text-align: center;
}
.footer-boutique img { filter: brightness(0) invert(1); width: 50px; margin-bottom: 15px; }
/* Botón de Eliminar Chat */
.chat-container {
	position: relative; /* Aseguramos que sea relativo para anclar el botón */
}
.btn-eliminar-chat {
	position: absolute;
    top: 7px;
    right: 7px;
    background: #f3f4f6;
    color: #9ca3af;
    border: none;
    width: auto;
    height: 32px;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    font-size: 12px;
    transition: 0.2s;
    padding: 2px 10px;
    gap: 4px;
}
.btn-eliminar-chat:hover {
	background: #fee2e2;
	color: #dc2626;
}
/* Le damos un poco de aire al primer mensaje para que no choque con el botón */
.chat-messages {
	padding-top: 40px; 
}


/* =======================================================
   SCROLLBAR PERSONALIZADO (CHAT Y MOOD CARDS)
   ======================================================= */

/* Para navegadores basados en WebKit (Chrome, Safari, Edge) */
.chat-messages::-webkit-scrollbar {
    width: 6px; /* Bien finita y elegante */
}

.chat-messages::-webkit-scrollbar-track {
    background: transparent; /* Fondo invisible para que no ensucie */
    border-radius: 10px;
}

.chat-messages::-webkit-scrollbar-thumb {
    background-color: #e5e7eb; /* Un gris muy suavecito por defecto */
    border-radius: 10px;
    transition: background-color 0.3s ease;
}

.chat-messages::-webkit-scrollbar-thumb:hover {
    background-color: var(--verde-boutique); /* Se pinta de tu verde al pasar el mouse */
}

/* Soporte para Firefox (usa un estándar diferente) */
.chat-messages {
    scrollbar-width: thin;
    scrollbar-color: #e5e7eb transparent;
}