/* =========================================================
			EVL MODELS · PREGUNTAS FRECUENTES
			---------------------------------------------------------
			Mismos colores que Blog, Gracias, 404, legales y footer.
			Todo va dentro de #evl-faq / .evl-faq.
			Sin JS y sin Font Awesome (acordeón con <details>).
			1. Encabezado              2. Filtro por tema (solo CSS)
			3. Acordeón                4. Tarjeta de ayuda
			5. CTA final               6. Responsive
			========================================================= */


		/* =========================================================
			0. VARIABLES Y BASE
			Para cambiar colores, modifica SOLO este bloque.
			========================================================= */
		.evl-faq {
			/* Colores */
			--evl-primary: #111;             /* negro */
			--evl-accent: #AE8813;           /* dorado EVL */
			--evl-accent-hover: #8F700F;     /* dorado oscuro: hover y textos */
			--evl-accent-light: #E3C76A;     /* dorado claro: sobre fondo negro */
			--evl-text: #17131A;             /* texto fuerte */
			--evl-muted: #5B5560;            /* párrafos */
			--evl-border: #E7E1D6;           /* bordes */
			--evl-bg: #FBFAF7;               /* fondo */
			--evl-soft: #F5F0E8;             /* fondo suave dorado */
			--evl-white: #FFFFFF;

			/* Medidas */
			--evl-gutter: 24px;

			font-family: inherit;            /* usa la fuente del sitio */
			color: var(--evl-text);
			font-size: 16px;
			line-height: 1.6;
			background: var(--evl-bg);
		}

		.evl-faq *,
		.evl-faq *::before,
		.evl-faq *::after { box-sizing: border-box; }

		.evl-faq .evl-container {
			width: 100%;
			max-width: 1180px;
			margin: 0 auto;
			padding: 0 var(--evl-gutter);
		}

		/* Oculta los radios del filtro sin quitarlos del teclado */
		.evl-faq .evl-sr-only {
			position: absolute;
			width: 1px;
			height: 1px;
			margin: -1px;
			overflow: hidden;
			clip: rect(0 0 0 0);
			white-space: nowrap;
			border: 0;
		}

		/* Botones */
		.evl-faq .evl-faq__btn {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			padding: 15px 26px;
			border: 2px solid var(--evl-accent);
			border-radius: 8px;
			background: var(--evl-accent);
			color: var(--evl-white);
			font-weight: 700;
			line-height: 1;
			text-decoration: none;
			transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
		}

		.evl-faq .evl-faq__btn:hover {
			background: var(--evl-accent-hover);
			border-color: var(--evl-accent-hover);
			color: var(--evl-white);
			transform: translateY(-2px);
		}

		/* Contorno blanco (sobre fondo negro) */
		.evl-faq .evl-faq__btn--outline {
			background: transparent;
			border-color: rgba(255, 255, 255, .7);
		}

		.evl-faq .evl-faq__btn--outline:hover {
			background: var(--evl-white);
			border-color: var(--evl-white);
			color: var(--evl-primary);
		}

		.evl-faq .evl-faq__btn:focus-visible { outline: 3px solid var(--evl-accent); outline-offset: 3px; }


		/* =====================================================================
			1. ENCABEZADO
			===================================================================== */
		.evl-faq__hero {
			position: relative;
			overflow: hidden;
			padding: clamp(56px, 8vw, 104px) 0 clamp(48px, 6vw, 76px);
			background: var(--evl-primary);
			color: var(--evl-white);
		}

		/* Círculo dorado decorativo */
		.evl-faq__hero::after {
			content: "";
			position: absolute;
			top: -120px;
			right: -120px;
			width: 360px;
			aspect-ratio: 1;
			border-radius: 50%;
			background: var(--evl-accent);
			opacity: .25;
			pointer-events: none;
		}

		.evl-faq__eyebrow {
			display: inline-block;
			margin: 0 0 16px;
			padding: 6px 14px;
			background: rgba(174, 136, 19, .22);
			color: var(--evl-accent-light);
			border-radius: 999px;
			font-size: 14px;
			font-weight: 700;
			letter-spacing: .06em;
			text-transform: uppercase;
		}

		.evl-faq__title {
			margin: 0 0 14px;
			font-size: 2.5em;
			font-weight: bold;
			line-height: 1.12;
			letter-spacing: 0.5px;
			text-transform: none;
			color: var(--evl-white);
		}

		.evl-faq__title span { color: var(--evl-accent-light); }

		.evl-faq__lead {
			max-width: 58ch;
			margin: 0;
			color: rgba(255, 255, 255, .8);
			font-size: 18px;
		}


		/* =====================================================================
			2. FILTRO POR TEMA (SOLO CSS)
			Cada radio muestra solo las preguntas con su data-cat.
			Para agregar un tema: copia un radio + label y agrégalo
			en las 3 reglas de abajo.
			===================================================================== */
		.evl-faq__body { padding: clamp(40px, 6vw, 72px) 0; }

		.evl-faq__filter {
			display: flex;
			flex-wrap: wrap;
			gap: 8px;
			margin-bottom: 28px;
		}

		.evl-faq__filter label {
			padding: 8px 16px;
			background: var(--evl-white);
			border: 1px solid var(--evl-border);
			border-radius: 999px;
			color: var(--evl-text);
			font-size: 14.5px;
			font-weight: 600;
			line-height: 1.3;
			white-space: nowrap;
			cursor: pointer;
			user-select: none;
			transition: background-color .2s ease, border-color .2s ease, color .2s ease;
		}

		.evl-faq__filter label:hover { border-color: var(--evl-accent); }

		/* Botón activo */
		#evl-q-todas:checked ~ .evl-container label[for="evl-q-todas"],
		#evl-q-marcas:checked ~ .evl-container label[for="evl-q-marcas"],
		#evl-q-talento:checked ~ .evl-container label[for="evl-q-talento"],
		#evl-q-pagos:checked ~ .evl-container label[for="evl-q-pagos"] {
			background: var(--evl-primary);
			border-color: var(--evl-primary);
			color: var(--evl-white);
		}

		/* Foco con teclado (el radio está oculto, se marca su botón) */
		#evl-q-todas:focus-visible ~ .evl-container label[for="evl-q-todas"],
		#evl-q-marcas:focus-visible ~ .evl-container label[for="evl-q-marcas"],
		#evl-q-talento:focus-visible ~ .evl-container label[for="evl-q-talento"],
		#evl-q-pagos:focus-visible ~ .evl-container label[for="evl-q-pagos"] {
			outline: 3px solid var(--evl-accent);
			outline-offset: 2px;
		}

		/* Oculta las preguntas de otros temas */
		#evl-q-marcas:checked ~ .evl-container .evl-faq__item:not([data-cat="marcas"]),
		#evl-q-talento:checked ~ .evl-container .evl-faq__item:not([data-cat="talento"]),
		#evl-q-pagos:checked ~ .evl-container .evl-faq__item:not([data-cat="pagos"]) {
			display: none;
		}


		/* =====================================================================
			3. ACORDEÓN
			===================================================================== */
		.evl-faq__layout {
			display: grid;
			grid-template-columns: minmax(0, 1fr) 340px;
			align-items: start;
			gap: 40px;
		}

		.evl-faq__list {
			display: flex;
			flex-direction: column;
			gap: 12px;
		}

		.evl-faq__item {
			background: var(--evl-white);
			border: 1px solid var(--evl-border);
			border-radius: 14px;
			transition: border-color .2s ease, box-shadow .2s ease;
		}

		.evl-faq__item:hover { border-color: var(--evl-accent); }

		.evl-faq__item[open] {
			border-color: var(--evl-accent);
			box-shadow: 0 12px 28px rgba(17, 17, 17, .08);
		}

		/* Pregunta */
		.evl-faq__q {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 16px;
			padding: 20px 22px;
			color: #111111d4;
			font-size: 18px;
			font-weight: 600;
			list-style: none;
			cursor: pointer;
		}

		.evl-faq__q::-webkit-details-marker { display: none; }

		.evl-faq__q:focus-visible { outline: 3px solid var(--evl-accent); outline-offset: 3px; border-radius: 14px; }

		.evl-faq__item[open] .evl-faq__q-text { color: var(--evl-accent-hover); }

		/* Ícono + que gira a × */
		.evl-faq__icon {
			position: relative;
			flex: 0 0 34px;
			width: 34px;
			height: 34px;
			border-radius: 50%;
			background: var(--evl-soft);
			transition: background-color .25s ease, transform .3s ease;
		}

		.evl-faq__icon::before,
		.evl-faq__icon::after {
			content: "";
			position: absolute;
			top: 50%;
			left: 50%;
			width: 12px;
			height: 2px;
			margin: -1px 0 0 -6px;
			border-radius: 2px;
			background: var(--evl-accent-hover);
			transition: background-color .25s ease;
		}

		.evl-faq__icon::after { transform: rotate(90deg); }

		.evl-faq__item:hover .evl-faq__icon { background: #EFE5CF; }

		.evl-faq__item[open] .evl-faq__icon {
			background: var(--evl-accent);
			transform: rotate(45deg);
		}

		.evl-faq__item[open] .evl-faq__icon::before,
		.evl-faq__item[open] .evl-faq__icon::after { background: var(--evl-white); }

		/* Respuesta */
		.evl-faq__a { padding: 0 22px 22px; }

		.evl-faq__a-inner {
			padding-top: 16px;
			border-top: 1px solid var(--evl-border);
			color: var(--evl-muted);
		}

		.evl-faq__item[open] .evl-faq__a-inner { animation: evlFaqIn .3s ease; }

		@keyframes evlFaqIn {
			from { opacity: 0; transform: translateY(-6px); }
			to   { opacity: 1; transform: none; }
		}

		.evl-faq__a p { margin: 0 0 10px; }
		.evl-faq__a p:last-child { margin-bottom: 0; }

		.evl-faq__a ol,
		.evl-faq__a ul { margin: 0; padding-left: 1.3em; }

		.evl-faq__a li { margin-bottom: 6px; }
		.evl-faq__a li::marker { color: var(--evl-accent); font-weight: 700; }

		.evl-faq__a a {
			color: var(--evl-accent-hover);
			font-weight: 600;
			text-decoration: underline;
			text-underline-offset: 3px;
		}

		.evl-faq__a a:hover { color: var(--evl-primary); }


		/* =====================================================================
			4. TARJETA DE AYUDA (columna derecha)
			===================================================================== */
		.evl-faq__help {
			position: sticky;
			top: 110px;                      /* ajusta según la altura de tu header */
			overflow: hidden;
			padding: 32px 28px;
			background: #000000d9;
			border-radius: 18px;
			color: var(--evl-white);
		}

		/* Círculo dorado decorativo */
		.evl-faq__help::after {
			content: "";
			position: absolute;
			right: -70px;
			bottom: -90px;
			width: 200px;
			aspect-ratio: 1;
			border-radius: 50%;
			background: var(--evl-accent);
			opacity: .25;
			pointer-events: none;
		}

		.evl-faq__help > * { position: relative; z-index: 1; }

		.evl-faq__help-icon {
			display: grid;
			place-items: center;
			width: 52px;
			height: 52px;
			margin-bottom: 18px;
			border-radius: 14px;
			background: rgba(174, 136, 19, .22);
			color: var(--evl-accent-light);
		}

		.evl-faq__help-title {
			margin: 0 0 10px;
			font-size: 22px;
			font-weight: bold;
			line-height: 1.25;
			color: #fffffff2;
		}

		.evl-faq__help p { margin: 0 0 22px; color: rgba(255, 255, 255, .8); font-size: 15.5px; }

		.evl-faq__help .evl-faq__btn { width: 100%; }

		.evl-faq__help-list {
			display: grid;
			gap: 10px;
			margin: 24px 0 0;
			padding: 20px 0 0;
			border-top: 1px solid rgba(255, 255, 255, .15);
			list-style: none;
			font-size: 14.5px;
		}

		.evl-faq__help-list li { display: flex; align-items: center; gap: 10px; color: rgba(255, 255, 255, .85); }

		/* Palomita dorada */
		.evl-faq__help-list li::before {
			content: "";
			flex: 0 0 auto;
			width: 6px;
			height: 11px;
			margin: 0 4px 3px 3px;
			border: solid var(--evl-accent-light);
			border-width: 0 2px 2px 0;
			transform: rotate(45deg);
		}


		/* =====================================================================
			5. CTA FINAL
			===================================================================== */
		.evl-faq-cta { padding: 0 0 clamp(56px, 7vw, 96px); }

		.evl-faq-cta__box {
			position: relative;
			overflow: hidden;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: space-between;
			gap: 24px 40px;
			padding: clamp(32px, 4vw, 52px) clamp(24px, 4vw, 56px);
			background: var(--evl-soft);
			border: 1px solid var(--evl-border);
			border-radius: 18px;
		}

		.evl-faq-cta__text { max-width: 640px; }

		.evl-faq-cta__title {
			margin: 0 0 10px;
			color: var(--evl-primary);
			font-size: 2em;
			font-weight: 800;
    		line-height: 1.2;
		}

		.evl-faq-cta__title span { color: var(--evl-accent-hover); }

		.evl-faq-cta__text p { margin: 0; color: var(--evl-muted); font-size: 17px; }

		.evl-faq-cta__actions {
			display: flex;
			flex-wrap: wrap;
			gap: 12px;
		}

		/* Botón negro (sobre fondo claro) */
		.evl-faq .evl-faq__btn--dark {
			background: var(--evl-primary);
			border-color: var(--evl-primary);
		}

		.evl-faq .evl-faq__btn--dark:hover {
			background: transparent;
			border-color: var(--evl-primary);
			color: var(--evl-primary);
		}


		/* =====================================================================
			6. RESPONSIVE
			===================================================================== */

		/* Tablet: la tarjeta de ayuda baja */
		@media (max-width: 991px) {
			.evl-faq__layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
			.evl-faq__help { position: static; }
		}

		/* Celular */
		@media (max-width: 600px) {
			.evl-faq { --evl-gutter: 20px; }

			.evl-faq__hero::after { width: 220px; top: -90px; right: -90px; }

			/* Filtro: una sola fila que se desliza de lado */
			.evl-faq__filter {
			flex-wrap: nowrap;
			width: calc(100% + var(--evl-gutter) * 2);
			margin: 0 calc(var(--evl-gutter) * -1) 24px;
			padding: 2px var(--evl-gutter) 6px;
			overflow-x: auto;
			scrollbar-width: none;
			}

			.evl-faq__filter::-webkit-scrollbar { display: none; }

			.evl-faq__q { padding: 18px; font-size: 1rem; }
			.evl-faq__a { padding: 0 18px 18px; }

			.evl-faq__help { padding: 28px 22px; }

			.evl-faq-cta__actions { flex-direction: column; width: 100%; }
			.evl-faq-cta__actions .evl-faq__btn { width: 100%; }
		}

		/* Sin animaciones si el usuario lo pidió */
		@media (prefers-reduced-motion: reduce) {
			.evl-faq * { transition: none !important; animation: none !important; }
			.evl-faq .evl-faq__btn:hover { transform: none; }
		}