/**
 * Estilos responsivos del formulario público [creati_inscripcion].
 *
 * Escritorio: máximo 720px.
 * Móvil (menor o igual a 600px): 90% del ancho REAL de la pantalla.
 *
 * HISTORIAL DE ESTE ARCHIVO -- 2 intentos previos fallaron y el motivo quedó
 * confirmado inspeccionando el DOM real (Jorge compartió el árbol completo
 * desde el inspector del navegador):
 *   1er intento: max-width fijo, sin media query -- no reaccionaba a pantalla.
 *   2do intento: .creati-inscripcion-form con margin: calc(50% - 50vw) -- no
 *      funcionó porque ese cálculo es relativo al ANCHO YA REDUCIDO del
 *      propio contenedor .creati-inscripcion-form, que hereda su ancho de
 *      .et_pb_row_0 (Divi limita las filas de contenido a un ancho fijo
 *      centrado) y de la columna .et_pb_column_4_4 con su propio padding --
 *      varios niveles de contenedor limitando el ancho antes de llegar a
 *      este div, no solo el padding directo de un único contenedor padre.
 *
 * FIX REAL: usar position:relative + left:50% + margin-left:-50vw. A
 * diferencia de calc(50% - 50vw), este método ancla el elemento respecto al
 * VIEWPORT directamente (vía positioning, no vía cálculo de porcentaje del
 * padre), así que ignora cuántos contenedores restrictivos de Divi haya en
 * el medio -- funciona sin importar la profundidad del anidamiento.
 */

.creati-inscripcion-form > div {
	max-width: 720px !important;
	width: 100%;
	box-sizing: border-box;
}

@media (max-width: 600px) {
	.creati-inscripcion-form {
		position: relative;
		left: 50%;
		right: 50%;
		width: 100vw;
		margin-left: -50vw;
		margin-right: -50vw;
		box-sizing: border-box;
		padding-left: 5vw;
		padding-right: 5vw;
	}

	.creati-inscripcion-form > div {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}