/* Widget: Llamada a la acción con formulario (.srw-cta) */
.srw.srw-cta { padding-top: 40px; padding-bottom: 40px; }
.srw-cta .srw-cta__box {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: grid;
	grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
	align-items: center;
	gap: 30px 20px;
	padding: 60px;
	background-color: var(--srw-color-dark);
	color: var(--srw-color-on-dark-soft);
}
.srw-cta.srw-cta--no-form .srw-cta__box { grid-template-columns: minmax(0, 1fr); }
.srw-cta .srw-cta__bg { position: absolute; inset: 0; z-index: -2; margin: 0; }
.srw-cta .srw-cta__bg img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; border: 0; border-radius: 0; box-shadow: none; }
.srw-cta .srw-cta__box::before { content: ""; position: absolute; inset: 0; z-index: -1; background-color: var(--srw-color-overlay); opacity: var(--srw-overlay-opacity); }

.srw-cta .srw-cta__content { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding-right: 20px; }
.srw-cta .srw-cta__kicker { margin: 0; font-size: var(--srw-fs-h3); font-weight: 400; line-height: 1.2; text-transform: uppercase; color: var(--srw-color-primary); }
.srw-cta .srw-cta__title { font-size: var(--srw-fs-h2); line-height: 1.2; color: var(--srw-color-on-dark); margin: 0; }
.srw-cta .srw-cta__text { color: var(--srw-color-on-dark-soft); }
.srw-cta .srw-cta__text a { color: var(--srw-color-primary); }
.srw-cta .srw-cta__text a:hover { color: var(--srw-color-link-hover); }
.srw-cta .srw-list { color: var(--srw-color-on-dark-soft); margin: 0; gap: 10px; }
.srw-cta .srw-list > li::before { top: .16em; background-color: var(--srw-color-on-dark-soft); }

.srw-cta .srw-cta__contact { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.srw-cta .srw-cta__contact li { margin: 0; padding: 0; }
.srw-cta .srw-cta__contact a, .srw-cta .srw-cta__contact span.srw-cta__contact-item {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: var(--srw-fs-text);
	line-height: 1.3;
	color: var(--srw-color-on-dark-muted);
	text-decoration: none;
	transition: color .2s;
}
.srw-cta .srw-cta__contact a:hover { color: var(--srw-color-primary); }
.srw-cta .srw-cta__contact svg { width: 16px; height: 16px; flex: none; fill: var(--srw-color-primary); }
.srw-cta .srw-cta__contact-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 16px; font-size: 16px; line-height: 1; color: var(--srw-color-primary); }
.srw-cta .srw-cta__contact-icon svg { width: 1em; height: 1em; fill: currentColor; }

/*
 * Diseño «Solo texto» (.srw-cta--inner): el widget va dentro de un contenedor de Elementor
 * (recuadro oscuro con foto) y el formulario de la página va en otro contenedor (tarjeta blanca).
 */
.srw.srw-cta.srw-cta--inner { padding: 0; background-color: transparent; color: var(--srw-color-on-dark-soft); }
/* Foto por defecto del recuadro oscuro (contenedor .srw-cta-box) mientras no se elija otra en Estilo › Fondo. */
.srw-cta-box { background-image: url(../img/bano-reformado-hero.webp); background-position: center center; background-repeat: no-repeat; background-size: cover; }
/* Clase de la tarjeta blanca (contenedor): el ancla #presupuesto queda por debajo de la cabecera fija. */
.srw-cta-card { scroll-margin-top: var(--srw-scroll-offset); }
.srw-cta-card .elementor-widget-text-editor p:last-child { margin-bottom: 0; }

/* Tarjeta blanca del formulario */
.srw-cta .srw-cta__form {
	background-color: var(--srw-color-surface);
	color: var(--srw-color-text);
	border-radius: var(--srw-radius-lg);
	padding: 30px;
	scroll-margin-top: var(--srw-scroll-offset);
}
.srw-cta .srw-cta__form-intro { margin-bottom: 20px; }
.srw-cta .srw-cta__form-intro a { color: var(--srw-color-dark); }
.srw-cta .srw-cta__form-intro strong { font-weight: 600; }
.srw-cta .srw-cta__form-intro u { text-underline-offset: 3px; }
.srw-cta .srw-cta__placeholder { border: 1px dashed var(--srw-color-border); border-radius: var(--srw-radius); padding: 24px; font-size: .9em; text-align: center; }

/*
 * Clase opcional para el widget Formulario de Elementor Pro: srw-form
 * (Avanzado › Clases CSS). Da el aspecto base del diseño; los ajustes de estilo
 * que tenga el propio formulario en Elementor siguen mandando.
 */
.srw-form .elementor-field-group .elementor-field,
.srw-form .elementor-field-group .elementor-select-wrapper select {
	font-family: var(--srw-font);
	border-color: var(--srw-color-border);
	border-radius: 0;
}
.srw-form .elementor-button[type="submit"] {
	font-family: var(--srw-font);
	background-color: var(--srw-color-primary);
	color: var(--srw-color-on-primary);
	border-radius: var(--srw-radius);
}
.srw-form .elementor-button[type="submit"]:hover { background-color: var(--srw-color-primary-hover); color: var(--srw-color-on-primary-hover); }

@media (max-width: 1024px) {
	.srw-cta .srw-cta__box { padding: 30px; }
}
@media (max-width: 900px) {
	.srw-cta .srw-cta__box { grid-template-columns: minmax(0, 1fr); }
	.srw-cta .srw-cta__content { padding-right: 0; }
}
@media (max-width: 767px) {
	.srw.srw-cta { padding: 0; }
	.srw-cta .srw-cta__box { padding: 64px var(--srw-section-px-tablet) var(--srw-section-px-tablet); gap: 40px; }
	.srw-cta .srw-cta__title { font-size: var(--srw-fs-h2-mobile); }
	.srw-cta .srw-cta__kicker { font-size: 1.05em; }
	.srw-cta .srw-cta__content .srw-buttons { width: 100%; }
	.srw-cta .srw-cta__content .srw-buttons .srw-btn { width: 100%; }
	.srw-cta .srw-cta__form { padding: 20px; }
}