.rsgc {
	--rsgc-blue: #0b6cb3;
	--rsgc-navy: #0a3f6e;
	--rsgc-gold: #c8a96a;
	--rsgc-tint: #e9f2f9;
	--rsgc-line: #cfdeeb;
	--rsgc-muted: #526b80;
	--rsgc-sticky-top: 16px;
	color: var(--rsgc-navy);
	font-family: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 16px;
	line-height: 1.5;
	max-width: 1280px;
	margin: 0 auto;
	padding: 32px 16px 56px;
	box-sizing: border-box;
}
.rsgc *, .rsgc *::before, .rsgc *::after { box-sizing: border-box; }


.rsgc-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.75fr) minmax(320px, 1fr);
	gap: 40px;
	align-items: start;
}
.rsgc-stage {
	position: sticky;
	top: var(--rsgc-sticky-top);
	background: var(--rsgc-tint);
	border-radius: 20px;
	padding: clamp(14px, 3vw, 40px);
	z-index: 5;
}
.rsgc-canvas {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1011 / 638;
	border-radius: 3.7% / 5.9%;   /* esquinas reales de una tarjeta CR80 */
	background: #fff;
	box-shadow: 0 2px 4px rgba(10, 63, 110, .12), 0 22px 44px -14px rgba(10, 63, 110, .38);
	touch-action: none;
}
.rsgc-canvas:focus-visible { outline: 3px solid var(--rsgc-gold); outline-offset: 4px; }
.rsgc-canvas.is-over { cursor: grab; }
.rsgc-canvas.is-drag { cursor: grabbing; }
.rsgc .rsgc-tip { margin: 14px 0 0; color: var(--rsgc-muted); font-size: 14px; text-align: center; }

.rsgc .rsgc-group { border: 0; border-top: 1px solid var(--rsgc-line); margin: 0; padding: 18px 0 20px; min-width: 0; }
.rsgc .rsgc-group:first-child { border-top: 0; padding-top: 0; }
.rsgc .rsgc-group legend { float: left; width: 100%; padding: 0; margin: 0 0 10px; font-size: 16px; font-weight: 600; color: var(--rsgc-navy); }
.rsgc .rsgc-group legend + * { clear: both; }
.rsgc .rsgc-group legend label { font: inherit; color: inherit; margin: 0; }
.rsgc .rsgc-note { margin: 8px 0 0; font-size: 13px; color: var(--rsgc-muted); }

.rsgc .rsgc-services { display: grid; gap: 6px; }
.rsgc .rsgc-service {
	display: flex; align-items: center; gap: 10px;
	min-height: 44px; padding: 8px 12px; margin: 0;
	border: 1.5px solid var(--rsgc-line); border-radius: 10px;
	font-size: 15px; font-weight: 500; color: var(--rsgc-navy); cursor: pointer;
}
.rsgc .rsgc-service:has(input:checked) { border-color: var(--rsgc-blue); background: var(--rsgc-tint); }
.rsgc .rsgc-service:has(input:focus-visible) { outline: 3px solid var(--rsgc-gold); outline-offset: 2px; }
.rsgc .rsgc-service input { accent-color: var(--rsgc-blue); margin: 0; width: 18px; height: 18px; }
.rsgc .rsgc-service input { flex: none; }
.rsgc .rsgc-service-name { flex: 1; min-width: 0; }
.rsgc .rsgc-price { flex: none; margin-left: 8px; font-weight: 600; color: var(--rsgc-blue); font-variant-numeric: tabular-nums; white-space: nowrap; }

.rsgc .rsgc-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rsgc button.rsgc-tile, .rsgc label.rsgc-tile {
	display: block; position: relative; margin: 0; padding: 0;
	background: #fff; color: var(--rsgc-navy); text-align: center;
	border: 0; border-radius: 10px; box-shadow: none; cursor: pointer;
	font: 500 13px/1.3 Poppins, system-ui, sans-serif; text-transform: none; letter-spacing: 0;
}
.rsgc .rsgc-tile > span {
	display: flex; align-items: center; justify-content: center;
	aspect-ratio: 1; width: 100%; overflow: hidden; border-radius: 10px;
	border: 1.5px solid var(--rsgc-line); background: var(--rsgc-tint) center/cover no-repeat;
	color: var(--rsgc-blue); font-size: 28px; font-weight: 400;
}
.rsgc .rsgc-tile em { display: block; font-style: normal; margin-top: 6px; }
.rsgc .rsgc-tile[aria-pressed="true"] > span { border-color: var(--rsgc-blue); box-shadow: 0 0 0 2px var(--rsgc-blue); }
.rsgc .rsgc-upload > span { border-style: dashed; border-color: var(--rsgc-blue); background: #fff; }
.rsgc .rsgc-tile:hover, .rsgc .rsgc-tile:focus { background: #fff; color: var(--rsgc-navy); }
.rsgc .rsgc-tile:focus-visible, .rsgc label:has(input[type="file"]:focus-visible) { outline: 3px solid var(--rsgc-gold); outline-offset: 2px; }
.rsgc input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }

.rsgc .rsgc-range { display: flex; align-items: center; gap: 12px; margin: 14px 0 0; font-size: 14px; color: var(--rsgc-navy); }
.rsgc .rsgc-range input { flex: 1; min-width: 0; accent-color: var(--rsgc-blue); margin: 0; height: 28px; }

.rsgc .rsgc-swatches { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rsgc button.rsgc-swatch, .rsgc label.rsgc-swatch {
	display: block; position: relative; width: 40px; height: 40px; margin: 0; padding: 0; overflow: hidden;
	border-radius: 50%; border: 1px solid rgba(10, 63, 110, .28); box-shadow: none; cursor: pointer;
}
.rsgc .rsgc-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--rsgc-blue); }
.rsgc .rsgc-swatch:focus-visible, .rsgc label.rsgc-swatch:has(input:focus-visible) { outline: 3px solid var(--rsgc-gold); outline-offset: 4px; }
.rsgc label.rsgc-swatch { background: conic-gradient(#e0555a, #e8c34f, #5bbd72, #4a9fd8, #8a64c9, #e0555a); }
.rsgc label.rsgc-swatch input { position: absolute; inset: -4px; width: 48px; height: 48px; padding: 0; border: 0; opacity: 0; cursor: pointer; }

.rsgc .rsgc-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 12px; }
.rsgc .rsgc-group > .rsgc-row:first-of-type:not(.rsgc-swatches + .rsgc-row) { margin-top: 0; }
.rsgc .rsgc-btn-line {
	display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: 8px 16px;
	border: 1.5px solid var(--rsgc-blue); border-radius: 10px;
	color: var(--rsgc-blue); font-size: 14px; font-weight: 600; cursor: pointer; background: #fff; position: relative;
}
.rsgc .rsgc-btn-line:hover { background: var(--rsgc-tint); }
.rsgc button.rsgc-link {
	background: none; border: 0; box-shadow: none; padding: 8px 0; margin: 0; min-height: 40px;
	color: var(--rsgc-blue); font: 500 14px/1.3 Poppins, system-ui, sans-serif; text-transform: none; letter-spacing: 0;
	text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.rsgc button.rsgc-link:hover, .rsgc button.rsgc-link:focus { background: none; color: var(--rsgc-navy); }
.rsgc button.rsgc-link:focus-visible { outline: 3px solid var(--rsgc-gold); outline-offset: 2px; }
.rsgc [hidden] { display: none !important; }

.rsgc input.rsgc-text {
	display: block; width: 100%; height: 46px; margin: 0; padding: 8px 12px;
	border: 1.5px solid var(--rsgc-line); border-radius: 10px; background: #fff;
	color: var(--rsgc-navy); font: 500 16px/1.3 Poppins, system-ui, sans-serif;
}
.rsgc input.rsgc-text:focus { border-color: var(--rsgc-blue); outline: 2px solid var(--rsgc-blue); outline-offset: 0; }
.rsgc input.rsgc-text::placeholder { color: #6b8295; opacity: 1; }

.rsgc .rsgc-error { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: #fdecec; color: #8f1d1d; font-size: 14px; }

.rsgc .rsgc-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 12px; color: var(--rsgc-navy); font-size: 15px; }
.rsgc .rsgc-total strong { flex: none; color: var(--rsgc-blue); font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rsgc .rsgc-actions { border-top: 1px solid var(--rsgc-line); padding-top: 20px; }
.rsgc a.rsgc-cta {
	display: flex; align-items: center; justify-content: center; min-height: 54px; padding: 12px 20px;
	border-radius: 12px; background: var(--rsgc-blue); color: #fff; text-decoration: none;
	font: 600 17px/1.2 Poppins, system-ui, sans-serif;
}
.rsgc a.rsgc-cta:hover, .rsgc a.rsgc-cta:focus { background: var(--rsgc-navy); color: #fff; }
.rsgc a.rsgc-cta:focus-visible { outline: 3px solid var(--rsgc-gold); outline-offset: 3px; }
.rsgc .rsgc-actions .rsgc-row { margin-top: 8px; }

/* Sin container queries: dentro de un contenedor flex de Elementor inflaban la altura de la página en móvil. */
@media (max-width: 900px) {
	.rsgc-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.rsgc-stage { margin: 0 -16px; border-radius: 0; padding: 10px 16px; }
	.rsgc .rsgc-tip { margin-top: 8px; font-size: 13px; }
	.rsgc .rsgc-swatches { gap: 6px; }
	.rsgc button.rsgc-swatch, .rsgc label.rsgc-swatch { width: 36px; height: 36px; }
}

@media (max-width: 900px) {
	.rsgc { padding: 20px 16px 40px; }
}