/*
Theme Name:   AO Soluciones
Theme URI:    https://aosoluciones.com
Description:  Tema hijo de Hello Elementor para AO Soluciones. Incluye las fuentes de marca (Plus Jakarta Sans e Inter) servidas localmente, la librería de íconos Tabler integrada en Elementor y el importador de la demo (Kit de Elementor con estilos globales, páginas, header y footer).
Author:       AO Soluciones
Author URI:   https://aosoluciones.com
Template:     hello-elementor
Version:      1.1.2
Requires at least: 6.3
Tested up to: 6.8
Requires PHP: 7.4
License:      GNU General Public License v3 or later
License URI:  https://www.gnu.org/licenses/gpl-3.0.html
Text Domain:  ao-soluciones
*/

/*
 * Los estilos visuales (colores, tipografías, botones, formularios) viven en el
 * Kit de Elementor: Sitio > Configuración del sitio. Aquí solo van ajustes que
 * Elementor no cubre.
 */

/* Íconos Tabler dentro de botones y listas: alineación óptica. */
.elementor-button .ti,
.elementor-icon-list-icon .ti {
	line-height: 1;
}

/* Foco visible accesible (WCAG 2.1 AA) en todo el sitio. */
a:focus-visible,
button:focus-visible,
.elementor-button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 3px solid var(--e-global-color-primary, #136BC0);
	outline-offset: 2px;
}

/* Preguntas frecuentes (widget Toggle con la clase ao-faq): cada pregunta en su bloque redondeado. */
.ao-faq .elementor-toggle-item {
	border: 1px solid var(--e-global-color-aobord1, #E5E7EB);
	border-radius: 12px;
	background: var(--e-global-color-aowhite, #FFFFFF);
	overflow: hidden;
}
.ao-faq .elementor-tab-title,
.ao-faq .elementor-tab-content {
	border: 0 !important;
}
.ao-faq .elementor-tab-title {
	display: flex;
	align-items: center;
	gap: 16px;
	text-align: left;
}
.ao-faq .elementor-toggle-title {
	order: 1;
	flex: 1 1 auto;
	text-align: left;
}
.ao-faq .elementor-toggle-icon {
	order: 2;
	float: none !important;
	flex: none;
	width: auto !important;
}

/* Menú principal (widget Menú con la clase ao-nav): flecha pegada al texto. */
.ao-nav .elementor-nav-menu--main .elementor-item.has-submenu {
	gap: 6px;
}
.ao-nav .elementor-nav-menu--main .sub-arrow {
	padding: 0 !important;
	margin: 0 !important;
	font-size: 12px;
}
.ao-nav .elementor-nav-menu--main .sub-arrow svg {
	width: 12px;
	height: 12px;
}

/*
 * Componentes del prototipo v2.8 que Elementor no resuelve solo.
 * Todo usa las variables del Kit: colores (--e-global-color-*) y estilos de texto (--e-global-typography-*).
 */

/* Filas con ícono y texto: el texto se ajusta al ancho disponible, nunca se desborda. */
.e-con > .e-con,
.e-con > .e-con-inner > .e-con {
	min-width: 0;
}

/* Dirección de filas y columnas por pantalla (refuerza lo que define cada contenedor). */
@media (max-width: 1024px) {
	.e-con.ao-col-t {
		flex-direction: column !important;
	}
}
@media (max-width: 767px) {
	.e-con.ao-col-m {
		flex-direction: column !important;
	}
	.e-con.ao-row-m {
		flex-direction: row !important;
	}
	.elementor .e-con.ao-step {
		--flex-direction: row !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		gap: 16px !important;
	}
	.elementor .e-con.ao-step > .e-con {
		flex: 1 1 0 !important;
		min-width: 0;
		width: auto !important;
	}
	.elementor .e-con.ao-step > .ao-num {
		flex: 0 0 40px !important;
		margin: 0 !important;
	}
}

/* Badges: siempre al ancho de su texto. En móvil, junto a botones apilados, quedan centrados. */
.ao-badge {
	flex: none !important;
	width: auto !important;
	max-width: 100%;
}
@media (max-width: 767px) {
	.ao-btns > .ao-badge {
		margin-inline: auto;
	}
}

/* Viñetas redondas rellenas en las listas de ítems. */
.ao-dots .elementor-icon-list-icon i::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	vertical-align: middle;
}

/* Diagrama de conexión. */
.ao-diagram {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 16px;
	padding: 20px;
}
.ao-diagram svg {
	width: 100%;
	height: auto;
	display: block;
}
.ao-diagram .ti {
	font-size: 30px;
	color: var(--e-global-color-aowhite);
}

/* Casos: tarjeta en dos tonos, con efecto al pasar el cursor. */
.ao-case {
	transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s;
}
.ao-case:hover {
	box-shadow: 0 6px 20px rgba(0, 26, 64, 0.08);
	border-color: var(--e-global-color-aobordf) !important;
	transform: translateY(-2px);
}
.ao-case[hidden] {
	display: none !important;
}
.ao-fade {
	animation: ao-fade 0.35s ease both;
}
@keyframes ao-fade {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}

/* Casos: filtros por línea de servicio y contador. */
.ao-cbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}
.ao-cfilter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.ao-cfilter button {
	font-family: var(--e-global-typography-accent-font-family);
	font-size: var(--e-global-typography-accent-font-size);
	font-weight: var(--e-global-typography-accent-font-weight);
	line-height: var(--e-global-typography-accent-line-height);
	padding: 10px 16px;
	border-radius: 999px;
	border: 1px solid var(--e-global-color-aobord1);
	background: var(--e-global-color-aowhite);
	color: var(--e-global-color-text);
	cursor: pointer;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.ao-cfilter button:hover {
	border-color: var(--e-global-color-primary);
	color: var(--e-global-color-primary);
	background: var(--e-global-color-aowhite);
}
.ao-cfilter button.on {
	background: var(--e-global-color-primary);
	border-color: var(--e-global-color-primary);
	color: var(--e-global-color-aowhite);
}
.ao-ccount {
	margin: 0;
	font-family: var(--e-global-typography-aosmall-font-family);
	font-size: var(--e-global-typography-aosmall-font-size);
	line-height: var(--e-global-typography-aosmall-line-height);
	color: var(--e-global-color-aomuted);
}

/* Caso completo: tarjetas del reto con borde superior ámbar. */
.ao-pain {
	border-top: 3px solid var(--e-global-color-accent) !important;
}

/* Auditoría: las diez áreas en un solo panel, con separadores. */
.ao-area-list .ao-area {
	padding: 14px 0;
	border-bottom: 1px solid var(--e-global-color-aobord1);
}
.ao-area-list .ao-area:nth-last-child(-n+2) {
	border-bottom: 0;
}
@media (max-width: 767px) {
	.ao-area-list .ao-area {
		padding: 11px 0;
	}
	.ao-area-list .ao-area:nth-last-child(2) {
		border-bottom: 1px solid var(--e-global-color-aobord1);
	}
}

/* Otras líneas de servicio: 5 por fila, 3 + 2 en pantallas medianas, centradas. */
.ao-others > .e-con,
.ao-others > .e-con-inner > .e-con {
	flex: 0 0 calc((100% - 80px) / 5) !important;
	max-width: calc((100% - 80px) / 5);
}
@media (max-width: 1100px) {
	.ao-others > .e-con,
	.ao-others > .e-con-inner > .e-con {
		flex-basis: calc((100% - 40px) / 3) !important;
		max-width: calc((100% - 40px) / 3);
	}
}
@media (max-width: 700px) {
	.ao-others > .e-con,
	.ao-others > .e-con-inner > .e-con {
		flex-basis: calc((100% - 20px) / 2) !important;
		max-width: calc((100% - 20px) / 2);
	}
}
@media (max-width: 520px) {
	.ao-others > .e-con,
	.ao-others > .e-con-inner > .e-con {
		flex-basis: 100% !important;
		max-width: 100%;
	}
}

/* Número de paso: círculo de 32 px (40 px en móvil, a la izquierda y centrado con el texto). */
.ao-num {
	width: 32px !important;
	height: 32px;
	padding: 0 !important;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
}
@media (max-width: 767px) {
	.ao-num {
		width: 40px !important;
		height: 40px;
		align-self: center;
	}
	.ao-num .elementor-heading-title {
		font-size: var(--e-global-typography-text-font-size);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ao-case:hover {
		transform: none;
	}
	.ao-diagram .p {
		display: none;
	}
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}