/**
 * Bloques de Inicio, Conócenos y Consultoría en Elementor.
 *
 * Sustituyen a las "Division" y columnas del page builder de CrunchPress. Las
 * secciones, columnas y widgets llevan las clases de siempre (color_class_cp,
 * student-profile, conocenos_form, cp_heading_style...) para reaprovechar su CSS;
 * aquí solo se ajusta lo que cambia por usar Elementor. Clases propias
 * (Elementor > Avanzado > Clases CSS):
 *   gdoce-bloque     sección: sin el relleno, el fondo y el centrado que Iknow da a
 *                    ".contant section" (las "Division" eran un div). El relleno y el
 *                    fondo se ponen en la propia sección de Elementor.
 *   gdoce-caja       sección: el contenido mide lo mismo que el .container de Bootstrap 2.
 *   gdoce-caja-1000  ...con un máximo de 1000 px (Conócenos y Consultoría, como antes).
 *   gdoce-tercios    sección interior de 3 columnas con la rejilla de Bootstrap (span4).
 *   gdoce-hereda     widget: tipografía y color del tema en vez de los globales del
 *                    kit de Elementor, y sin el hueco de 20 px entre widgets.
 *   cp_heading_style cp_style_2 / cp_style_1
 *                    widget de texto con un h2 y un párrafo (antes [heading]);
 *                    cp_style_1 añade debajo los tres rombos.
 */

.contant section.gdoce-bloque {
	padding: 0;
	background-color: transparent;
	text-align: inherit;
}

/* Ancho del .container de Bootstrap 2 (bootstrap.css y bootstrap-responsive.css). */
.gdoce-caja > .elementor-container {
	width: 940px;
}

@media (min-width: 1200px) {
	.gdoce-caja > .elementor-container {
		width: 1170px;
	}
}

@media (min-width: 768px) and (max-width: 979px) {
	.gdoce-caja > .elementor-container {
		width: 724px;
	}
}

@media (max-width: 767px) {
	.gdoce-caja > .elementor-container {
		width: auto;
		padding: 0 20px;
	}
}

.gdoce-caja-1000 > .elementor-container {
	max-width: 1000px;
}

/* Rejilla .row-fluid .span4 de Bootstrap 2; cada fila empieza sin margen (.first de Iknow). */
.gdoce-tercios > .elementor-container > .elementor-column {
	width: 31.914893617021278%;
	margin-left: 2.127659574468085%;
}

@media (min-width: 1200px) {
	.gdoce-tercios > .elementor-container > .elementor-column {
		width: 31.623931623931625%;
		margin-left: 2.564102564102564%;
	}
}

@media (min-width: 768px) and (max-width: 979px) {
	.gdoce-tercios > .elementor-container > .elementor-column {
		width: 31.491712707182323%;
		margin-left: 2.7624309392265194%;
	}
}

.gdoce-tercios > .elementor-container > .elementor-column:first-child {
	margin-left: 0;
}

@media (max-width: 767px) {
	.gdoce-tercios > .elementor-container > .elementor-column {
		width: 100%;
		margin-left: 0;
	}
}

/*
 * Una sola clase a propósito: gana a los globales del kit (.elementor-widget-text-editor,
 * misma especificidad, esta hoja va detrás) y pierde contra las reglas del tema con más
 * peso, como div.column_center_text_blue (azul y negrita).
 */
.gdoce-hereda {
	font-family: inherit;
	font-weight: inherit;
	color: inherit;
}

.elementor-widget.gdoce-hereda:not(:last-child) {
	margin-block-end: 0;
}

/*
 * Tres rombos bajo el subtítulo de cp_style_1 (antes <div class="dots"> con tres <span>
 * de 10 px girados -45°, a 14 px uno de otro, en una línea de 20 px). Se pintan con un
 * pseudo-elemento y dos sombras para que no haya que mantener <span> vacíos en el editor.
 * Desplazamiento de las sombras: ±14 px en horizontal, expresados en los ejes del cuadrado
 * girado (14·cos 45° = 9,9 px). Color: el del subtítulo, #00a6d6.
 */
.cp_heading_style.cp_style_1 > .elementor-widget-container::after {
	content: "";
	display: block;
	width: 10px;
	height: 10px;
	/* 15 px arriba porque el margen se colapsa con los 10 px del párrafo: centro a 20 px del párrafo, como antes. */
	margin: 15px auto 5px;
	background-color: #00a6d6;
	transform: rotate(-45deg);
	box-shadow: 9.8995px 9.8995px 0 #00a6d6, -9.8995px -9.8995px 0 #00a6d6;
}