/*
 * Ajustes globales de sitio que no dependen de un widget específico.
 * Se cargan siempre (no via get_style_depends) porque afectan al header/footer
 * de Elementor Theme Builder, que no pasa por el sistema de dependencias de widgets.
 */

/* Icon-box con icono a la izquierda (Duración/Modalidad/Certificación en páginas
   de programa): sin align-items el icono queda "estirado" y se ve más arriba
   que el texto. */
.elementor-widget-icon-box.elementor-position-left .elementor-icon-box-wrapper,
.elementor-widget-icon-box.elementor-position-inline-start .elementor-icon-box-wrapper,
.elementor-widget-icon-box.elementor-position-right .elementor-icon-box-wrapper,
.elementor-widget-icon-box.elementor-position-inline-end .elementor-icon-box-wrapper {
	align-items: center;
}

/* Botón "Hablar con un asesor" del header, enlaza a WhatsApp. */
#edupro-header-cta.elementor-button {
	background-color: #1E56F0;
	color: #ffffff;
	border-radius: 8px;
	padding: 12px 22px;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
}

#edupro-header-cta.elementor-button:hover {
	background-color: #0B1D3A;
	color: #ffffff;
}

#edupro-header-cta .elementor-button-icon {
	margin-inline-end: 8px;
}

#edupro-faq-cta.elementor-button {
	background-color: #1E56F0;
	color: #ffffff;
	border-radius: 8px;
	padding: 14px 28px;
	font-size: 15px;
	font-weight: 600;
	margin-top: 32px;
}

#edupro-faq-cta.elementor-button:hover {
	background-color: #0B1D3A;
	color: #ffffff;
}

/* Botón del bloque "Estudia. Trabaja. Crece." (ahora es un div/flexbox con
   fondo e imagen nativos de Elementor, editable desde el panel). */
#edupro-ws-cta.elementor-button {
	background-color: #1E56F0;
	color: #ffffff;
	border-radius: 8px;
	padding: 14px 26px;
	font-size: 15px;
	font-weight: 600;
	margin-top: 12px;
}

#edupro-ws-cta.elementor-button:hover {
	background-color: #3A7CFF;
	color: #ffffff;
}

/* La sección de FAQ usa el ancho "boxed" por defecto de Elementor, que no
   siempre trae margen lateral propio en mobile — se lo dejamos explícito para
   que quede igual al resto del sitio. */
@media (max-width: 767px) {
	/* IDs 323e234/d235795: los regenera Elementor al guardar en el editor —
	   si estos ajustes dejan de aplicarse, revisar los IDs actuales. */
	.elementor-element-323e234.e-con {
		padding-left: 20px;
		padding-right: 20px;
	}

	/* La caja celeste del FAQ (con el ícono, "¿No encuentras tu respuesta?"
	   y el formulario) quedó con padding:0 en mobile en el editor — sin eso
	   el formulario navy toca los bordes de la caja y se ve gigante/pegado. */
	.elementor-element-d235795 {
		padding: 24px !important;
	}
}

/* "Estudia. Trabaja. Crece.": el degradado de fondo está pensado para el
   layout de escritorio (fila); en mobile el contenido se apila en columna y
   deja de cumplir su función, así que se le da un fondo sólido propio. */
@media (max-width: 767px) {
	.e-8dee202 {
		margin: 0 20px !important;
		border-radius: 16px !important;
		overflow: hidden !important;
		width: auto !important;
	}

	.e-f45279d-2e30837 {
		background-color: rgba(11, 29, 58, 0.88) !important;
		border-radius: 0;
		padding: 32px 24px !important;
	}

	/* Offset vertical pensado para el recorte de escritorio; en mobile se
	   resetea para que no se vea la foto mal encuadrada. */
	.e-8dee202 {
		background-position-y: center !important;
	}
}

/* Checklist del hero: se fuerza flex-wrap:nowrap porque el valor de
   escritorio (wrap) puede saltar un ítem a una segunda columna del flex. */
@media (max-width: 767px) {
	/* Sin ancho explícito, la tarjeta de stats del hero dependía de cómo la
	   resolviera el flex padre y quedaba más angosta que el resto. */
	.e-dc96509 {
		width: 100% !important;
		max-width: 100% !important;
	}
}

@media (max-width: 1024px) {
	.e-4a91fbf {
		flex-wrap: nowrap !important;
		flex-direction: column !important;
		row-gap: 14px !important;
		column-gap: 0 !important;
	}

	.e-fde0403-09ff61a,
	.e-57108e1-c38a7e3,
	.e-edh3wrap01-x1,
	.e-edh4wrap01-x1 {
		width: 100% !important;
		flex: 0 0 auto !important;
		flex-wrap: nowrap !important;
		gap: 8px !important;
		justify-content: flex-start !important;
	}

	.e-e7c6812-efdce5d {
		display: none !important;
	}
}

@media (max-width: 1024px) {
	/* En tablet el padding de 80px del bloque de texto queda muy grande. */
	.e-f45279d-2e30837 {
		padding: 48px !important;
	}
}

@media (max-width: 1024px) {
	/* En mobile el header solo muestra logo + hamburguesa, igual que el menú. */
	#edupro-header-cta.elementor-button {
		display: none;
	}


	/* El header (logo + botón hamburguesa) se queda fijo en su fila normal.
	   Solo sirve como referencia de posición para el menú desplegable, que se
	   saca del flujo con position:absolute — así abrir el menú nunca mueve
	   ni descuadra el logo. */
	.e-4fcf5d5 {
		position: relative;
	}

	/* position:fixed (relativo al viewport, no a ningún ancestro) para que el
	   ancho del menú nunca dependa del contenedor donde vive el widget — así
	   se evita el bug de "menú cortado" visto en mobile real. */
	.elementor-nav-menu--dropdown.elementor-nav-menu__container {
		position: fixed !important;
		/* El header (e-4fcf5d5) tiene height:100px fijo en todos los
		   breakpoints, así que este valor es estable. */
		top: 100px !important;
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		max-width: 100vw !important;
		background-color: #0B1D3A !important;
		margin-top: 0;
		border-radius: 0 0 8px 8px;
		overflow-y: auto;
		max-height: calc(100vh - 100px);
		/* Alto a propósito: algunas secciones editadas a mano desde el editor
		   de Elementor (hero de "Cómo funciona"/"Nosotros", tarjeta de stats
		   del hero de portada) quedaron con z-index propio de hasta 20000 —
		   el menú tiene que ganarle a cualquiera de esos sin importar en qué
		   página esté. */
		z-index: 999999 !important;
		box-sizing: border-box;
	}

	.elementor-nav-menu--dropdown .elementor-item,
	.elementor-nav-menu--dropdown a {
		color: #ffffff !important;
		white-space: normal !important;
		overflow: visible !important;
		text-overflow: clip !important;
		width: 100% !important;
		box-sizing: border-box !important;
	}

	.elementor-nav-menu--dropdown .elementor-item:hover,
	.elementor-nav-menu--dropdown .elementor-item:focus,
	.elementor-nav-menu--dropdown a:hover,
	.elementor-nav-menu--dropdown a:focus {
		background-color: rgba(255, 255, 255, 0.1) !important;
		color: #ffffff !important;
	}

	.elementor-nav-menu--dropdown .elementor-sub-item {
		color: #E7F0FF !important;
	}

	/* Botón hamburguesa: color de marca siempre, pisando cualquier estilo
	   (rojo) que haya quedado de un guardado fallido en el editor. */
	.elementor-menu-toggle {
		background-color: #1E56F0 !important;
		color: #ffffff !important;
	}

	.elementor-menu-toggle .e-font-icon-svg,
	.elementor-menu-toggle svg {
		fill: #ffffff !important;
	}
}

/* Página Contacto: en mobile la sección "Hablemos" quedaba con poco aire a
   los costados y el formulario se sentía enorme (mismo ancho que toda la
   columna, sin margen propio). */
@media (max-width: 767px) {
	.elementor-element-f660791.elementor-section > .elementor-container {
		padding-left: 28px;
		padding-right: 28px;
	}

	.elementor-element-2d8c2ee .edupro-lead-form {
		max-width: 360px;
		margin: 0 auto;
	}
}