/*
 * FAQ consolidada — usa los tokens reales del kit de Elementor
 * (var(--e-global-color-*), definidos en css/vendor/kit-572.css) en vez de
 * colores a mano. El acordeón usa las clases reales de Elementor
 * (elementor-accordion-item / elementor-tab-title / elementor-tab-content),
 * el toggle lo gestiona js/elementor-lite.js. Ver notas-clonado.md.
 */

.faq-page {
	padding: 40px 0 100px;
}

.faq-container {
	max-width: 900px;
	margin: 0 auto;
	padding: 0 24px;
}

/* Especificidad reforzada a propósito: el kit global define reglas para
   h1-h6 "a pelo" (.elementor-kit-572 h3{font-size:132px} etc, pensadas
   para quedar siempre por debajo de las reglas específicas de cada widget
   real de Elementor) que si no se superan hacen que los títulos de esta
   página salgan gigantes/solapados. */
.faq-page h1.faq-h1 {
	text-align: center;
	margin: 0 0 48px;
}

.faq-h1__img {
	width: 192px;
	max-width: 60vw;
	display: inline-block;
}

.faq-intro {
	color: var(--e-global-color-text);
	opacity: 0.85;
	text-align: center;
	max-width: 620px;
	margin: 0 auto 48px;
}

/* Pasos del pedido */
.faq-steps-wrap {
	margin-bottom: 64px;
}

.faq-page h2.faq-steps-title {
	color: var(--e-global-color-accent);
	font-family: var(--e-global-typography-primary-font-family);
	text-transform: lowercase;
	font-size: 32px;
	text-align: center;
	margin: 0 0 32px;
}

.faq-steps {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0;
	position: relative;
}

.faq-step {
	flex: 1 1 160px;
	max-width: 200px;
	text-align: center;
	padding: 0 16px;
	position: relative;
}

.faq-step:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 22px;
	left: 50%;
	width: 100%;
	height: 2px;
	background: var(--e-global-color-accent);
	opacity: 0.4;
	z-index: 0;
}

.faq-page .faq-step__num {
	position: relative;
	z-index: 1;
	width: 44px;
	height: 44px;
	line-height: 44px;
	border-radius: 50%;
	background: var(--e-global-color-accent);
	color: var(--e-global-color-primary);
	font-family: var(--e-global-typography-primary-font-family);
	font-weight: 700;
	font-size: 18px;
	margin: 0 auto 16px;
}

.faq-page h3.faq-step__title {
	color: var(--e-global-color-text);
	font-family: var(--e-global-typography-primary-font-family);
	text-transform: lowercase;
	font-size: 18px;
	margin: 0 0 8px;
	letter-spacing: -0.5px;
}

.faq-page .faq-step__desc {
	color: var(--e-global-color-text);
	opacity: 0.75;
	font-size: 14px;
	line-height: 1.4;
	margin: 0;
}

/* Categorías */
.faq-category {
	margin-bottom: 40px;
}

.faq-page h2.faq-category__title {
	color: var(--e-global-color-accent);
	font-family: var(--e-global-typography-primary-font-family);
	text-transform: lowercase;
	font-size: 28px;
	margin: 0 0 16px;
	letter-spacing: -1px;
}

/* Acordeón — clases reales elementor-accordion-*, look adaptado al tema oscuro */
.faq-category .elementor-accordion {
	border: 1px solid rgba(242, 238, 227, 0.15);
	border-radius: 8px;
	overflow: hidden;
}

.faq-category .elementor-accordion-item {
	border-bottom: 1px solid rgba(242, 238, 227, 0.15);
}

.faq-category .elementor-accordion-item:last-child {
	border-bottom: none;
}

.faq-category .elementor-tab-title {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--e-global-color-text);
	font-family: var(--e-global-typography-text-font-family);
	font-size: 17px;
	font-weight: 500;
	padding: 18px 20px;
	cursor: pointer;
	background: rgba(242, 238, 227, 0.03);
}

.faq-category .elementor-tab-title:hover {
	background: rgba(242, 238, 227, 0.07);
}

.faq-category .elementor-tab-title .elementor-accordion-icon {
	color: var(--e-global-color-accent);
	font-size: 20px;
	font-weight: 700;
	width: 1em;
	flex: 0 0 auto;
}

.faq-category .elementor-accordion-title {
	color: inherit;
	text-decoration: none;
}

.faq-category .elementor-tab-content {
	color: var(--e-global-color-text);
	opacity: 0.85;
	font-family: var(--e-global-typography-text-font-family);
	font-size: 15px;
	line-height: 1.6;
	padding: 4px 20px 20px 52px;
}

.faq-category .elementor-tab-content p {
	margin: 0 0 12px;
}

.faq-category .elementor-tab-content p:last-child {
	margin-bottom: 0;
}

.faq-category .elementor-tab-content a {
	color: var(--e-global-color-accent);
}

.faq-category .elementor-tab-content ul {
	margin: 0 0 12px;
	padding-left: 20px;
}

@media (max-width: 768px) {
	.faq-h1__img {
		width: 150px;
	}
	.faq-steps {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 32px 16px;
		justify-items: center;
	}
	.faq-step {
		max-width: none;
		width: 100%;
	}
	.faq-step:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}
	.faq-step:not(:last-child)::after {
		display: none;
	}
	.faq-category .elementor-tab-content {
		padding-left: 20px;
	}
}