/* ======================================================================
   Base de estilos de las cinco paginas del rediseno 2026 de instore.es
   (INS_HOME, INS_X360, INS_NOSOTROS, INS_SERVICIOS, INS_PROYECTOS).

   Se copia tal cual a css/page-<ID>.css de cada una: asi un arreglo de
   maquetacion se aplica a las cinco a la vez.
   Escala del diseno: Figma 1920 -> web 1200 (x0,625).
   ====================================================================== */

/* Lo mismo en proyectos (1,458 / 1,440 / 1,448) y, de paso, display:block elimina
   la línea blanca de 1px bajo la foto: la dejaba el hueco de línea base del inline-block. */
.proy-img img {
	aspect-ratio: 1152 / 790;
	object-fit: cover;
	width: 100%;
	display: block;
}

/* Las tres tarjetas negras, a la misma altura aunque su texto tenga distinta longitud */
.proy-col > .elementor-widget-wrap {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.proy-col > .elementor-widget-wrap > .elementor-section {
	flex: 1 1 auto;
	display: flex;
}
.proy-col > .elementor-widget-wrap > .elementor-section > .elementor-container,
.proy-col > .elementor-widget-wrap > .elementor-section .elementor-column {
	width: 100%;
}

/* Botón "Ver más proyectos" centrado bajo la tarjeta central.
   El widget debe ocupar todo el ancho: si lleva _element_width:auto se pega a la izquierda
   y ni text-align ni margin:auto tienen efecto. */
.btn-ver-proyectos {
	width: 100% !important;
	max-width: 100% !important;
}
.btn-ver-proyectos .elementor-widget-container { text-align: center; }
.btn-ver-proyectos .elementor-button {
	display: inline-flex;
	margin: 0 auto;
	float: none;
}


/* Signos + / - del acordeón: el tamaño lo manda el <span> que envuelve al svg,
   no el svg. Se anula ahí y se centra con flex. */
.elementor-widget-accordion .elementor-accordion-icon span {
	font-size: 0 !important;
	line-height: 0 !important;
}
.elementor-widget-accordion .elementor-accordion-icon svg {
	width: 11px !important;
	height: 11px !important;
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* Al fijar un ancho al <a>, su contenido (que va en flex) se queda a la izquierda.
   Hay que centrarlo también por dentro, en el enlace y en su wrapper. */
.btn-ver-proyectos .elementor-button,
.btn-ver-proyectos .elementor-button .elementor-button-content-wrapper {
	justify-content: center;
	text-align: center;
}


/* ---- Preguntas frecuentes ---- */

/* La línea corta va a la IZQUIERDA del antetítulo, no debajo (Figma: 56x2 px a 1920 -> 35px de ancho; grosor 1px por decisión de Raúl).
   Usa currentColor: en Figma cada línea es del mismo color que su texto (negra en los
   antetítulos sobre fondo claro, dorada en PREGUNTAS FRECUENTES y TU PRÓXIMA CAMPAÑA). */
.ante-linea p {
	display: flex;
	align-items: center;
	gap: 10px;
}
.ante-linea p::before {
	content: "";
	display: block;
	width: 35px;
	height: 1px;
	background: currentColor;
	flex: 0 0 35px;
}

/* Aire entre pregunta y separador. Figma: 224px entre líneas sobre 1920 -> 140px aquí,
   con la pregunta de 28px de alto quedan 56px arriba y abajo. */
.elementor-widget-accordion .elementor-tab-title {
	padding-top: 56px !important;
	padding-bottom: 56px !important;
}
@media (max-width: 767px) {
	.elementor-widget-accordion .elementor-tab-title {
		padding-top: 26px !important;
		padding-bottom: 26px !important;
	}
}
/* y separador también encima de la primera pregunta */
.elementor-widget-accordion .elementor-accordion-item:first-child {
	border-top: 1px solid #C2C2C2;
}


/* ======================================================================
   Preguntas frecuentes como TOGGLE (todas cerradas al cargar).
   El toggle usa otras clases que el acordeón: .elementor-toggle-*
   ====================================================================== */
.faq-toggle .elementor-toggle-item {
	border: 0;
	border-bottom: 1px solid #C2C2C2;
	margin: 0 !important;
}
.faq-toggle .elementor-toggle-item:first-child { border-top: 1px solid #C2C2C2; }

/* Pregunta e icono en la misma fila, centrados en vertical entre sí */
.faq-toggle .elementor-tab-title {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 56px 0 !important;
	border: 0 !important;
	line-height: 1.35 !important;
}
.faq-toggle .elementor-toggle-title {
	order: 1;
	flex: 1 1 auto;
	line-height: 1.35 !important;
}
.faq-toggle .elementor-tab-content {
	border: 0 !important;
	padding: 0 0 40px !important;
}

/* Icono: círculo dorado con el signo pequeño y centrado */
.faq-toggle .elementor-toggle-icon {
	order: 2;
	position: relative;
	float: none !important;
	flex: 0 0 26px;
	width: 26px !important;
	height: 26px;
	border: 2px solid #B89246;
	border-radius: 50%;
	box-sizing: border-box;
	margin: 0 !important;
	line-height: 0;
}
.faq-toggle .elementor-toggle-icon span { font-size: 0 !important; line-height: 0 !important; }
.faq-toggle .elementor-toggle-icon svg {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 11px !important;
	height: 11px !important;
	fill: #B89246 !important;
}

@media (max-width: 767px) {
	.faq-toggle .elementor-tab-title { padding: 22px 0 !important; gap: 14px; }
	.faq-toggle .elementor-tab-content { padding-bottom: 24px !important; }

	/* Tarjetas de servicios y de proyectos: al apilarse en móvil necesitan aire entre ellas */
	.card-col,
	.proy-col { margin-bottom: 24px; }
	.card-col:last-child,
	.proy-col:last-child { margin-bottom: 0; }
}

/* El toggle no hereda el tamaño de título del acordeón: salía a 31px en escritorio.
   Figma: 36px sobre 1920 -> 22px aquí; 17px en móvil. */
.faq-toggle .elementor-toggle-title {
	font-size: 22px !important;
	font-weight: 600 !important;
}
@media (max-width: 767px) {
	.faq-toggle .elementor-toggle-title { font-size: 17px !important; }
}
/* Los span del icono llevan position propia y descentraban el signo 10px.
   Se anula solo position; nunca display, que es lo que oculta el signo que no toca. */
.faq-toggle .elementor-toggle-icon span { position: static !important; }
/* Elementor da al svg del toggle un margin-left:-5px que lo descentraba dentro del círculo */
.faq-toggle .elementor-toggle-icon svg { margin: 0 !important; }


/* Tarjetas negras de proyectos: el enlace "Tengo un proyecto similar →" pegado abajo,
   a la misma altura en las tres aunque el texto de cada tarjeta ocupe distinto.
   El interior de la tarjeta pasa a columna flexible y el último widget (el enlace)
   se lleva todo el espacio sobrante por arriba. */
.proy-tarjeta { display: flex; }
.proy-tarjeta > .elementor-widget-wrap {
	display: flex !important;
	flex-direction: column;
	flex-wrap: nowrap !important;
	height: 100%;
}
.proy-tarjeta > .elementor-widget-wrap > .elementor-widget:last-child {
	margin-top: auto !important;
}



/* ======================================================================
   Logos de cliente (clonados de 52700): caja con borde dorado
   ====================================================================== */
.proy-tarjeta > .elementor-widget-wrap > .elementor-widget:last-child {
	margin-top: auto !important;
}

/* Logos de clientes con marco, copiado de la página Servicios Eventos (52464), medido allí:
   caja 192x114 px, borde 2px #B89246, logo de 100px centrado, 12px entre cajas y 20px entre filas. */
.logo-caja {
	padding: 10px 6px !important;
}
.logo-caja > .elementor-widget-wrap {
	border: 2px solid #B89246;
	height: 114px;
	padding: 0 !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}
.logo-caja .elementor-widget-icon {
	margin: 0 !important;
	width: auto;
}
@media (max-width: 767px) {
	/* 3 por fila en móvil: 8px entre cajas y logo de 70px */
	.logo-caja { padding: 6px 4px !important; }
	.logo-caja > .elementor-widget-wrap { height: 84px; }
}
/* El icono va en línea y deja hueco de línea base: descentraba el logo ~5px en vertical */
.logo-caja .elementor-icon-wrapper,
.logo-caja .elementor-icon {
	line-height: 0 !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
}
.logo-caja .elementor-icon svg { display: block; }
/* La causa real del descentrado vertical: .elementor-widget-wrap lleva flex-wrap:wrap y
   align-content:flex-start, así que align-items:center no basta. */
.logo-caja > .elementor-widget-wrap {
	flex-wrap: nowrap !important;
	align-content: center !important;
}

/* ======================================================================
   Bloques propios del rediseno 2026
   ====================================================================== */

/* ---- Botones ----------------------------------------------------------
   En el Figma los botones tienen ancho fijo (474x96 o 541x91 sobre 1920).
   Sin ancho fijo cada uno coge el de su texto y la botonera queda desigual.
   .btn-destacado y .btn-instore del style.css global imponen su propio fondo,
   por eso estos botones llevan clases propias y !important donde hace falta. */
.btn-ins26 .elementor-button {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	border-radius: 0 !important;
	transition: background-color .2s ease, color .2s ease;
}
.btn-ins26 .elementor-button .elementor-button-content-wrapper { justify-content: center; }
/* El texto del boton y su flecha van en la misma linea, como en el Figma. */
.btn-ins26 .elementor-button-text { white-space: nowrap; }

.btn-ins26-oro .elementor-button {
	background-color: #FDD688 !important;
	color: #000000 !important;
	border: 0 !important;
}
.btn-ins26-oro .elementor-button:hover { background-color: #E8BE68 !important; }

.btn-ins26-blanco .elementor-button {
	background-color: #FFFFFF !important;
	color: #000000 !important;
	border: 0 !important;
}
.btn-ins26-blanco .elementor-button:hover { background-color: #EEE9DB !important; }

.btn-ins26-linea-blanca .elementor-button {
	background-color: transparent !important;
	color: #FFFFFF !important;
	border: 1px solid #FFFFFF !important;
}
.btn-ins26-linea-blanca .elementor-button:hover {
	background-color: #FFFFFF !important;
	color: #000000 !important;
}

.btn-ins26-linea-fina .elementor-button {
	background-color: transparent !important;
	color: #000000 !important;
	border: 1px solid #9F9B9B !important;
}
.btn-ins26-linea-fina .elementor-button:hover {
	background-color: #000000 !important;
	color: #FFFFFF !important;
	border-color: #000000 !important;
}

.btn-ins26-linea-negra .elementor-button {
	background-color: transparent !important;
	color: #000000 !important;
	border: 1px solid #000000 !important;
}
.btn-ins26-linea-negra .elementor-button:hover {
	background-color: #000000 !important;
	color: #FFFFFF !important;
}

/* Anchos del diseno. Los dos botones del hero miden lo mismo y van uno junto
   a otro; con columnas de ancho fijo se pisaban cuando la columna de texto es
   estrecha, asi que la botonera es un flex que envuelve. */
.ins26-botonera > .elementor-widget-wrap {
	/* Elementor mete 10px de padding en el wrap: con dos botones de 296px y
	   16px de hueco, esos 20px eran justo los que faltaban para que cupieran. */
	padding: 0 !important;
	display: flex !important;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: flex-start;
	gap: 16px;
}
.ins26-botonera > .elementor-widget-wrap > .elementor-widget {
	width: auto !important;
	max-width: 100%;
	margin: 0 !important;
}
.btn-ins26 .elementor-button { min-width: 296px; max-width: 100%; }
.btn-ins26-ancho .elementor-button { min-width: 338px; max-width: 100%; }

/* Boton centrado bajo un bloque: el widget con _element_width:auto se pega a
   la izquierda y ni text-align ni margin:auto le afectan. */
.btn-ins26-centro {
	width: 100% !important;
	max-width: 100% !important;
}
.btn-ins26-centro .elementor-widget-container { text-align: center; }
.btn-ins26-centro .elementor-button { margin: 0 auto; float: none; }

@media (max-width: 767px) {
	.btn-ins26 .elementor-button,
	.btn-ins26-ancho .elementor-button { min-width: 0; width: 100%; }
	.ins26-botonera .elementor-column { width: 100%; }
}

/* ---- Hero -------------------------------------------------------------
   La foto se ancla a la derecha con su proporcion intacta (`auto 100%`): con
   `cover` sobre 1456px de ancho la imagen se amplia tanto que el encuadre no
   se parece al Figma. Encima va el degradado negro de Elementor. */
.ins26-hero {
	background-size: auto 100% !important;
	background-position: center right !important;
}
/* El texto arranca donde arranca el contenedor de 1200 del resto de la pagina. */
.ins26-hero-texto > .elementor-widget-wrap {
	padding-left: max(24px, calc((100vw - 1200px) / 2)) !important;
	padding-right: 40px !important;
}
/* El ancho del titular lo fija cada pagina (viene del Figma); aqui solo se
   garantiza que nunca desborde la columna. */
.ins26-hero-titulo { max-width: 100%; }

@media (max-width: 1024px) {
	/* Por debajo del escritorio la foto ya no cabe al lado del texto: pasa a
	   cubrir el fondo con un velo, que es lo unico legible a ese ancho. */
	.ins26-hero { background-size: cover !important; }
	.ins26-hero > .elementor-background-overlay {
		background-image: none !important;
		background-color: rgba(0, 0, 0, .62) !important;
	}
}
@media (max-width: 767px) {
	.ins26-hero { height: auto !important; min-height: 0 !important; }
	.ins26-hero-texto > .elementor-widget-wrap {
		padding: 52px 24px !important;
	}
	.ins26-hero-titulo { width: 100% !important; }
}

/* ---- Tarjetas con foto de fondo y velo (tipos de cliente) --------------
   Proporcion del Figma (783x498) para que las cuatro midan igual pese a que
   su texto tenga distinta longitud, y velo lo bastante oscuro para que el
   texto blanco se lea sobre cualquiera de las fotos. */
.ins26-foto-card { aspect-ratio: 783 / 498; }
.ins26-foto-card > .elementor-background-overlay {
	background-image: linear-gradient(180deg, rgba(0, 0, 0, .58) 0%, rgba(0, 0, 0, .84) 100%) !important;
	background-color: transparent !important;
}
.ins26-foto-card > .elementor-widget-wrap { justify-content: flex-end; }
@media (max-width: 767px) {
	.ins26-foto-card {
		aspect-ratio: auto;
		width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}

/* ---- Fila de capacidades con reglas verticales ------------------------ */
@media (max-width: 767px) {
	/* En movil las columnas se apilan: la regla pasa de vertical a horizontal. */
	.ins26-cap-col {
		border-left: 0 !important;
		border-top: 1px solid #9F9B9B !important;
	}
}

/* ---- Preguntas frecuentes a dos columnas ------------------------------ */
.faq-ins26 .elementor-tab-title { padding: 34px 0 !important; }
@media (max-width: 767px) {
	.faq-ins26 .elementor-tab-title { padding: 20px 0 !important; }
}

/* ---- Bloque final "Hablemos" ------------------------------------------
   Dos medios a sangre completa: el negro y el beige llegan al borde de la
   pantalla, como en el Figma. */
.ins26-hablemos > .elementor-container {
	max-width: 100% !important;
	width: 100% !important;
}
@media (max-width: 767px) {
	.ins26-hablemos .elementor-column { width: 100% !important; }
}

/* ---- Formulario de Gravity Forms dentro del panel beige --------------- */
.ins26-form .gform_wrapper { margin: 0 !important; }
.ins26-form .gform_wrapper .gform_fields { grid-row-gap: 18px !important; }
.ins26-form .gform_wrapper .gfield_label {
	font-family: Montserrat, sans-serif !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	letter-spacing: 2px !important;
	text-transform: uppercase;
	color: #000000 !important;
	margin-bottom: 8px !important;
}
.ins26-form .gform_wrapper input[type="text"],
.ins26-form .gform_wrapper input[type="email"],
.ins26-form .gform_wrapper input[type="tel"],
.ins26-form .gform_wrapper textarea {
	font-family: Montserrat, sans-serif !important;
	font-size: 14px !important;
	background: #FAFAF7 !important;
	border: 1px solid #E2DDCF !important;
	border-radius: 0 !important;
	padding: 12px 14px !important;
	width: 100% !important;
}
/* El comentario del diseno es una caja de una linea, no un area gigante. */
.ins26-form .gform_wrapper textarea { height: 104px !important; min-height: 0 !important; }
.ins26-form-oscuro .gform_wrapper textarea { height: 160px !important; min-height: 0 !important; }
.ins26-form .gform_wrapper .gform_footer { margin: 22px 0 0 !important; padding: 0 !important; }
.ins26-form .gform_wrapper .gform_button {
	font-family: Montserrat, sans-serif !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	background: #FDD688 !important;
	color: #000000 !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 12px 26px !important;
	min-width: 185px;
	cursor: pointer;
}
.ins26-form .gform_wrapper .gform_button:hover { background: #E8BE68 !important; }
.ins26-form .gform_wrapper .gfield_consent_label,
.ins26-form .gform_wrapper .gfield_description {
	font-family: Montserrat, sans-serif !important;
	font-size: 11px !important;
	font-weight: 300 !important;
	color: #000000 !important;
}

/* Nota legal bajo el boton (en el Figma es texto suelto, no parte del form). */
.ins26-nota-form p {
	font-size: 9px;
	line-height: 1.5;
	font-weight: 300;
}

/* ======================================================================
   Fotos: proporcion fija por bloque, tomada del Figma
   ====================================================================== */
.ins26-foto-alta img    { aspect-ratio: 617 / 799; object-fit: cover; width: 100%; display: block; }
.ins26-foto-cuarto img  { aspect-ratio: 401 / 601; object-fit: cover; width: 100%; display: block; }
.ins26-foto-equipo img  { aspect-ratio: 779 / 519; object-fit: cover; width: 100%; display: block; }
.ins26-foto-ancha img   { aspect-ratio: 1520 / 485; object-fit: cover; width: 100%; display: block; }
.ins26-foto-bloque img  { width: 100%; display: block; }
.ins26-arch-img img     { aspect-ratio: 572 / 337; object-fit: cover; width: 100%; display: block; }
.ins26-x360-foto img    { aspect-ratio: 821 / 763; object-fit: cover; width: 100%; display: block; }

/* ======================================================================
   INS_PROYECTOS
   ====================================================================== */
/* Las tres tarjetas del archivo, a la misma altura y con los distintivos
   pegados abajo aunque el texto de cada una sea mas corto. */
.ins26-arch-col > .elementor-widget-wrap {
	display: flex !important;
	flex-direction: column;
	flex-wrap: nowrap !important;
	height: 100%;
}
.ins26-arch-col > .elementor-widget-wrap > .elementor-widget:last-child {
	margin-top: auto !important;
}
/* Fichas de proyecto destacado: el texto va abajo, sobre la foto.
   La altura viene de la proporcion del Figma (820x776 la grande, 688x370 las
   dos pequenas): una columna de Elementor no admite `custom_height`, asi que
   si no se fija aqui cada ficha mide lo que ocupe su texto. */
.ins26-proy-grande { aspect-ratio: 820 / 776; }
.ins26-proy-peq { aspect-ratio: 688 / 370; }
.ins26-proy-grande > .elementor-widget-wrap,
.ins26-proy-peq > .elementor-widget-wrap { justify-content: flex-end; }
.ins26-proy-grande > .elementor-background-overlay,
.ins26-proy-peq > .elementor-background-overlay {
	background-image: linear-gradient(180deg, rgba(0, 0, 0, .18) 38%, rgba(0, 0, 0, .82) 100%) !important;
	background-color: transparent !important;
}
@media (max-width: 767px) {
	.ins26-proy-grande, .ins26-proy-peq { aspect-ratio: 16 / 11; }
}
/* Las cuatro tarjetas negras de "proyectos segun tu equipo", a la misma altura */
.ins26-equipo-col > .elementor-widget-wrap,
.ins26-equipo-col > .elementor-widget-wrap > .elementor-section { height: 100%; }
.ins26-equipo-col > .elementor-widget-wrap > .elementor-section > .elementor-container,
.ins26-equipo-col > .elementor-widget-wrap > .elementor-section .elementor-column { width: 100%; }

/* ======================================================================
   INS_SERVICIOS
   ====================================================================== */
/* El "+" de cada celda del indice se apoya en la base de la celda. */
.ins26-idx-col > .elementor-widget-wrap {
	display: flex !important;
	flex-direction: column;
	flex-wrap: nowrap !important;
	height: 100%;
}
.ins26-idx-col > .elementor-widget-wrap > .elementor-widget:last-child {
	margin-top: auto !important;
}
/* Tarjeta de servicio: texto y foto a la misma altura, la foto recortada. */
.ins26-serv-col {
	display: flex !important;
	flex-direction: column !important;
	height: 100% !important;
}
.ins26-serv-col > .elementor-widget-wrap {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 1 auto !important;
	height: 100% !important;
}
.ins26-serv-col > .elementor-widget-wrap > .elementor-section {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 1 auto !important;
	height: 100% !important;
}
.ins26-serv-col > .elementor-widget-wrap > .elementor-section > .elementor-container {
	display: flex !important;
	flex: 1 1 auto !important;
	height: 100% !important;
	align-items: stretch !important;
	border: 1px solid #D4D4D4;
}
.ins26-serv-col .elementor-column { border: 0; }
.ins26-serv-foto, .ins26-serv-foto-col { min-height: 320px; }
.ins26-serv-foto > .elementor-widget-wrap,
.ins26-serv-foto-col > .elementor-widget-wrap { min-height: inherit; width: 100%; }

/* Tarjeta de servicio: columna de texto estirada al 100%, contenidos arriba y boton pegado abajo */
.ins26-serv-col .elementor-column:first-child,
.ins26-serv-col .ins26-serv-texto-col {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 1 auto !important;
	height: 100% !important;
}
.ins26-serv-col .elementor-column:first-child > .elementor-widget-wrap,
.ins26-serv-col .ins26-serv-texto-col > .elementor-widget-wrap {
	display: flex !important;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	justify-content: flex-start !important;
	align-content: flex-start !important;
	flex: 1 1 auto !important;
	height: 100% !important;
}
.ins26-serv-col .elementor-column:first-child > .elementor-widget-wrap > .elementor-widget-button,
.ins26-serv-col .ins26-serv-texto-col > .elementor-widget-wrap > .elementor-widget-button {
	margin-top: auto !important;
	padding-top: 24px !important;
}

@media (max-width: 767px) {
	.ins26-idx-col { border-left: 0 !important; border-top: 1px solid #9F9B9B !important; }
	/* Las cuatro celdas vacias de la segunda fila solo existen para colocar el
	   servicio 04 en su columna; apiladas serian cuatro huecos en blanco. */
	.ins26-idx-col:has(> .elementor-widget-wrap:empty) { display: none !important; }
	.ins26-serv-foto, .ins26-serv-foto-col { min-height: 220px; }
}

/* ======================================================================
   INS_X360
   ====================================================================== */
/* Eje vertical del que cuelgan las cinco fases, como la linea del Figma. */
.ins26-fases-eje { position: relative; }
/* Las fases se solapan en vertical: en el Figma cada tarjeta arranca a ~70%
   de la anterior, que es lo que da la sensacion de zigzag continuo. */
.ins26-fase-fila + .ins26-fase-fila { margin-top: -100px; }
.ins26-fases-eje::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 3px;
	margin-left: -1.5px;
	background: #EEE9DB;
}
/* Cada fase se conecta al eje con un trazo corto por su lado interior.
   La caja no ocupa la mitad entera: en el Figma mide 608 de 1920 y deja aire
   contra el eje. */
.ins26-fase-caja {
	position: relative;
	width: 32% !important;
}
.ins26-fase-vacia { width: 68% !important; }
.ins26-fase-fila > .elementor-container > .ins26-fase-caja:first-child { margin-right: 18%; }
.ins26-fase-fila > .elementor-container > .ins26-fase-caja:last-child { margin-left: 18%; }
.ins26-fase-fila > .elementor-container > .ins26-fase-caja::after {
	content: "";
	position: absolute;
	top: 46px;
	width: 28px;
	height: 3px;
	background: #EEE9DB;
}
.ins26-fase-fila > .elementor-container > .ins26-fase-caja:first-child::after { right: -30px; width: 30px; }
.ins26-fase-fila > .elementor-container > .ins26-fase-caja:last-child::after { left: -30px; width: 30px; }
/* Caja de la nota final: 1297 de 1920 en el Figma, centrada. */
.ins26-x360-nota { max-width: 68%; margin: 0 auto; }

.ins26-form-oscuro .gform_wrapper .gfield_label,
.ins26-form-oscuro .gform_wrapper .gfield_consent_label,
.ins26-form-oscuro .gform_wrapper .gfield_description { color: #FFFFFF !important; }
.ins26-form-oscuro .gform_wrapper input[type="text"],
.ins26-form-oscuro .gform_wrapper input[type="email"],
.ins26-form-oscuro .gform_wrapper input[type="tel"],
.ins26-form-oscuro .gform_wrapper textarea {
	background: transparent !important;
	border: 2px solid #FFFFFF !important;
	color: #FFFFFF !important;
	border-radius: 0 !important;
	padding: 14px !important;
}
.ins26-form-oscuro .gform_wrapper .gform_button {
	background: #FFFFFF !important;
	color: #000000 !important;
}
.ins26-form-oscuro .gform_wrapper .gform_fields { grid-column-gap: 22px !important; }

/* Botones en pildora del bloque "7 errores" */
.ins26-pildoras .btn-ins26 .elementor-button { border-radius: 13px !important; }

@media (max-width: 767px) {
	/* Apilado en una sola columna, el eje vertical ya no significa nada. */
	.ins26-fases-eje::before { display: none; }
	.ins26-fase-fila > .elementor-container > .ins26-fase-caja::after { display: none; }
	.ins26-fase-vacia { display: none !important; }
	.ins26-fase-fila + .ins26-fase-fila { margin-top: 18px; }
	.ins26-fase-caja { width: 100% !important; margin: 0 !important; }
	.ins26-x360-nota { max-width: 100%; }
	.ins26-fase-caja .elementor-widget-container,
	.ins26-fase-caja .elementor-heading-title { text-align: left !important; }
	.ins26-cta-col { width: 100% !important; padding: 0 0 14px !important; }
}