/* ---------------------------------------------------------------------------
 * Tarjeta regalo · estilos del configurador
 *
 * PRINCIPIOS DE ESTA HOJA
 *
 * 1. Nada depende del ancho de la PANTALLA, solo del ancho del CONTENEDOR.
 *    Las media queries miden la ventana, no la columna donde vive el
 *    shortcode. En un tema que mete el contenido en una columna estrecha, una
 *    media query de 900px dice «pantalla ancha» y se aplica un diseño de tres
 *    columnas dentro de 400px. El resultado es lo que rompía la página: un
 *    titular de 80px en una columna de 20px, con una letra por línea.
 *    Por eso todo va con @container y el diseño base es de una columna.
 *
 * 2. No se rompe el contenedor del tema. Los márgenes negativos con 50vw
 *    provocan desbordes y barras horizontales cuando el tema ya tiene su
 *    propio padding. Si se quiere fondo a todo el ancho, se pone en el bloque
 *    de WordPress que envuelve al shortcode.
 *
 * 3. Todo va prefijado con .cs-gc y con min-width:0 en los elementos de
 *    rejilla, que es lo que evita que un texto largo estire una columna.
 * ------------------------------------------------------------------------- */

.cs-gc,
.cs-gc * { box-sizing: border-box; }

.cs-gc {
	--bone: #fbf7f3;
	--bone-2: #f7ecef;
	--ink: #2a1620;
	--ink-2: #6b5560;
	--ink-3: #9d8b93;
	--line: #ecdde3;
	--magenta: #e31c79;
	--magenta-deep: #b81462;
	--grad-brand: linear-gradient(110deg, #f8d4e4 0%, #f06fa6 45%, #e31c79 100%);
	--font-mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;

	container-type: inline-size;
	container-name: csgc;

	color: var(--ink);
	font-family: inherit;
	width: 100%;
	max-width: 100%;
	margin: 0;
	overflow-wrap: break-word;
}

/* Aire arriba y abajo.
 *
 * Arriba porque casi todos los temas llevan cabecera fija: sin margen, el
 * antetítulo y la primera línea del titular quedan por debajo del logo y del
 * menú. El valor sale de una cabecera típica de unos 90px más un respiro.
 *
 * Se usa margin y no padding para que, si el shortcode va dentro de un grupo
 * con fondo, el color no se extienda por el hueco. */
/* Anchura máxima del contenido. Los fondos van a todo el ancho de la
   pantalla, pero el texto no: una línea de 1900px es imposible de leer. */
.cs-gc { --gc-max: 1400px; }

.cs-gc--page {
	margin-top: var(--gc-top, 56px);
	margin-bottom: 72px;
	padding-left: max(24px, calc((100% - var(--gc-max)) / 2));
	padding-right: max(24px, calc((100% - var(--gc-max)) / 2));
}

/* Los bloques con fondo NO llevan margen: encajan a hueso con la sección de
   arriba y la de abajo.
 *
 * El margen dejaba una franja del color de la página entre dos secciones de
 * color, y eso se lee como un fallo de maquetación, no como respiración. El
 * aire va DENTRO, en el relleno del propio bloque. */
.cs-gc--promo,
.cs-gc-band {
	margin-top: 0;
	margin-bottom: 0;
}

/* Si es lo primero de la página sí hace falta margen arriba: ahí es donde la
   cabecera fija del tema tapa el contenido. */
.cs-gc--promo:first-child,
.cs-gc-band:first-child,
.cs-gc--page:first-child { margin-top: var(--gc-top-first, 72px); }

/* ── Tipografía ─────────────────────────────────────────────────────────── */

.cs-gc-eyebrow {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--magenta);
	margin: 0 0 12px;
	line-height: 1.4;
}
.cs-gc-eyebrow--muted { color: var(--ink-3); }

/* Tamaños en cqi (ancho del contenedor), no en vw: así el titular encoge
   cuando la columna es estrecha, aunque la pantalla sea grande. */
.cs-gc-title {
	font-weight: 300;
	letter-spacing: -.02em;
	line-height: 1.08;
	margin: 0 0 16px;
	color: var(--ink);
	overflow-wrap: break-word;
	hyphens: auto;
}
.cs-gc-title em {
	font-family: Georgia, 'Times New Roman', serif;
	font-style: italic;
	font-weight: 400;
}

.cs-gc-title--hero    { font-size: clamp(28px, 7cqi, 64px); }
.cs-gc-title--section { font-size: clamp(26px, 6.5cqi, 58px); }
.cs-gc-title--how     { font-size: clamp(24px, 5cqi, 44px); }
.cs-gc-title--block   { font-size: clamp(22px, 4.5cqi, 40px); }

.cs-gc-title--hero em { display: block; }

/* ── Encabezado ─────────────────────────────────────────────────────────── */

.cs-gc-hero {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding-bottom: 28px;
	margin-bottom: 32px;
	border-bottom: 1px solid var(--line);
}
.cs-gc-hero-left,
.cs-gc-hero-right { min-width: 0; }

.cs-gc-hero-intro {
	font-size: 16px;
	line-height: 1.6;
	color: var(--ink-2);
	margin: 0 0 20px;
}

.cs-gc-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 20px 28px;
	padding-top: 18px;
	border-top: 1px solid var(--line);
}
.cs-gc-stat { min-width: 90px; flex: 0 1 auto; }
.cs-gc-stat-value {
	display: block;
	font-size: 26px;
	font-weight: 300;
	line-height: 1.1;
	color: var(--magenta-deep);
	margin-bottom: 4px;
}
.cs-gc-stat-label {
	display: block;
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ink-3);
	line-height: 1.45;
}

/* Encabezado de la sección promo. */
.cs-gc-sechead {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-bottom: 24px;
	margin-bottom: 32px;
	border-bottom: 1px solid var(--line);
}
.cs-gc-sechead-meta {
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--ink-2);
	margin: 0;
}
.cs-gc-nowrap { display: block; }

/* ── Rejilla principal ──────────────────────────────────────────────────── */

.cs-gc-grid {
	display: flex;
	flex-direction: column;
	gap: 32px;
}
.cs-gc-cardwrap,
.cs-gc-form { min-width: 0; }

/* La tarjeta, centrada en su columna.
 *
 * Tiene un ancho máximo de 460px, así que en una columna más ancha se quedaba
 * pegada a la izquierda con un hueco a la derecha. Centrándola queda
 * equilibrada con el configurador de al lado. */
.cs-gc-cardwrap {
	display: flex;
	/* En columna, no en fila.
	 *
	 * Dentro van la tarjeta Y su pie («Así se verá tu Tarjeta Regalo…»). Con
	 * el flex por defecto se colocarían uno al lado del otro y el pie
	 * aparecería a la derecha de la tarjeta, estrujándola. */
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

/* El pie acompaña a la tarjeta: misma anchura y centrado debajo. */
.cs-gc-cardwrap .cs-gc-caption {
	text-align: center;
	width: 100%;
	max-width: 460px;
}

/* ── La tarjeta ─────────────────────────────────────────────────────────── */

.cs-gc-card {
	position: relative;
	width: 100%;
	max-width: 460px;
	aspect-ratio: 1.6 / 1;
	border-radius: 18px;
	padding: 7% 8%;
	color: #fff;
	background: var(--grad-brand);
	box-shadow: 0 20px 46px rgba(227, 28, 121, .24);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	overflow: hidden;
}
.cs-gc-card::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(120% 90% at 85% 15%, rgba(255,255,255,.28), transparent 55%),
		radial-gradient(80% 80% at 10% 90%, rgba(80,23,51,.32), transparent 60%);
	pointer-events: none;
}

/* Marca de agua: grande y desbordando por la derecha, como en el diseño.
 *
 * La proporción cuadrada evita que un logo apaisado —un lockup con el nombre
 * al lado, por ejemplo— se estire a lo ancho de la tarjeta y se lea. Aquí no
 * se busca leer nada: es una textura. */
.cs-gc-watermark {
	position: absolute;
	right: -12%;
	bottom: -22%;
	width: 62%;
	aspect-ratio: 1;
	opacity: .18;
	z-index: 0;
	pointer-events: none;
	line-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.cs-gc-watermark img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	/* En blanco puro, sea cual sea el color original del logo. */
	filter: brightness(0) invert(1);
}

.cs-gc-card-top,
.cs-gc-card-bot {
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: space-between;
	gap: 10px;
}
.cs-gc-card-top { align-items: flex-start; }
.cs-gc-card-bot {
	align-items: flex-end;
	font-family: var(--font-mono);
	font-size: clamp(8px, 2.2cqi, 11px);
	letter-spacing: .08em;
	opacity: .9;
}

/* El punto de la marca va pegado a la última letra.
 *
 * Antes esto era un flex con el punto como hijo: al partirse el nombre en dos
 * líneas, el punto se iba al extremo derecho y quedaba flotando solo. Con
 * display normal y el punto como pseudoelemento en línea, sigue al texto
 * aunque el nombre ocupe varias líneas. */
/* El nombre encoge si es largo, en vez de partirse en tres líneas.
   «Consulta Dermoestética» no cabe en una línea a 24px, y partido queda
   peor que reducido: la tarjeta es una pieza gráfica, no un párrafo. */
.cs-gc-brand {
	display: block;
	font-size: clamp(12px, 3.4cqi, 22px);
	font-weight: 500;
	letter-spacing: -.02em;
	line-height: 1.15;
	min-width: 0;
	max-width: 62%;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}
.cs-gc-brand::after {
	content: '';
	display: inline-block;
	width: .28em;
	height: .28em;
	margin-left: .12em;
	border-radius: 50%;
	background: #fff;
	vertical-align: baseline;
}

.cs-gc-kind {
	font-family: var(--font-mono);
	font-size: clamp(8px, 2.2cqi, 11px);
	letter-spacing: .16em;
	text-transform: uppercase;
	opacity: .85;
	white-space: nowrap;
	flex-shrink: 0;
}

.cs-gc-card-mid { position: relative; z-index: 1; min-width: 0; }
.cs-gc-label {
	font-size: clamp(8px, 2.2cqi, 11px);
	letter-spacing: .18em;
	text-transform: uppercase;
	opacity: .8;
	margin-bottom: 4px;
}
.cs-gc-amount {
	font-size: clamp(30px, 11cqi, 66px);
	font-weight: 300;
	letter-spacing: -.03em;
	line-height: .95;
}
.cs-gc-serial { letter-spacing: .12em; }

.cs-gc-caption {
	margin: 14px 0 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--ink-3);
	max-width: 460px;
}

/* ── Configurador ───────────────────────────────────────────────────────── */

.cs-gc-desc {
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--ink-2);
	margin: 0 0 18px;
}

.cs-gc-step { margin-bottom: 20px; }

.cs-gc-steplabel {
	display: block;
	font-family: var(--font-mono);
	font-size: 10.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ink-3);
	margin-bottom: 9px;
	line-height: 1.5;
}
.cs-gc-stepnum { color: var(--magenta); }

.cs-gc-amounts { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-gc-amt {
	flex: 0 1 auto;
	padding: 11px 18px;
	border: 1.5px solid var(--line);
	border-radius: 999px;
	background: var(--bone);
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--ink);
	cursor: pointer;
	white-space: nowrap;
	transition: background .18s, border-color .18s, color .18s;
}
.cs-gc-amt:hover { border-color: var(--magenta); }
.cs-gc-amt.is-on {
	background: var(--magenta);
	border-color: var(--magenta);
	color: #fff;
}

.cs-gc-custom { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.cs-gc-custom input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 12px 16px;
	border: 1.5px solid var(--line);
	border-radius: 999px;
	font-family: inherit;
	font-size: 16px;
	background: var(--bone);
	color: var(--ink);
}
.cs-gc-custom span { color: var(--ink-3); font-size: 15px; flex-shrink: 0; }

/* Formato de entrega: apilado por defecto, en dos columnas si cabe. */
.cs-gc-modes { display: flex; flex-direction: column; gap: 8px; }
.cs-gc-mode {
	text-align: left;
	padding: 13px 16px;
	border: 1.5px solid var(--line);
	border-radius: 12px;
	background: var(--bone);
	font-family: inherit;
	cursor: pointer;
	min-width: 0;
	transition: background .18s, border-color .18s;
}
.cs-gc-mode strong { display: block; font-size: 14.5px; font-weight: 500; color: var(--ink); }
.cs-gc-mode span   { display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.cs-gc-mode.is-on  { border-color: var(--magenta); background: #fdf2f8; }

.cs-gc-row { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }

.cs-gc-form input[type="text"],
.cs-gc-form input[type="email"],
.cs-gc-form input[type="number"],
.cs-gc-form textarea {
	width: 100%;
	min-width: 0;
	padding: 13px 16px;
	border: 1.5px solid var(--line);
	border-radius: 12px;
	font-family: inherit;
	/* 16px: por debajo, iOS amplía la pantalla al enfocar el campo. */
	font-size: 16px;
	background: var(--bone);
	color: var(--ink);
	transition: border-color .18s, background .18s;
}
.cs-gc-form input::placeholder,
.cs-gc-form textarea::placeholder { color: var(--ink-3); opacity: 1; }
.cs-gc-form input:focus,
.cs-gc-form textarea:focus {
	outline: none;
	border-color: var(--magenta);
	background: #fff;
}
.cs-gc-form textarea { resize: vertical; line-height: 1.5; min-height: 88px; }

/* ── Garantías ──────────────────────────────────────────────────────────── */

.cs-gc-facts { list-style: none; padding: 0; margin: 22px 0; }
.cs-gc-facts li {
	position: relative;
	padding-left: 24px;
	font-size: 14px;
	color: var(--ink-2);
	line-height: 1.55;
	margin-bottom: 8px;
}
.cs-gc-facts li::marker { content: none; }
.cs-gc-facts li::before {
	content: '';
	position: absolute;
	left: 2px;
	top: 6px;
	width: 9px;
	height: 5px;
	border-left: 2px solid var(--magenta);
	border-bottom: 2px solid var(--magenta);
	transform: rotate(-45deg);
}

/* ── Total y botón ──────────────────────────────────────────────────────── */

.cs-gc-total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	padding: 16px 0;
	border-top: 1px solid var(--line);
	margin-bottom: 16px;
}
.cs-gc-total span {
	font-family: var(--font-mono);
	font-size: 10.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ink-3);
}
.cs-gc-total strong { font-size: 26px; font-weight: 400; color: var(--ink); }

.cs-gc-cta {
	display: block;
	width: 100%;
	padding: 16px 22px;
	border: 0;
	border-radius: 999px;
	background: var(--magenta);
	color: #fff;
	font-family: var(--font-mono);
	font-size: 11.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	line-height: 1.5;
	cursor: pointer;
	transition: background .18s;
}
.cs-gc-cta:hover,
.cs-gc-cta:focus { background: var(--magenta-deep); color: #fff; text-decoration: none; }
.cs-gc-cta[disabled] { opacity: .5; cursor: default; }

.cs-gc-error { margin: 10px 0 0; font-size: 13.5px; color: var(--magenta-deep); text-align: center; }
.cs-gc-alt   { margin: 12px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--ink-3); text-align: center; }
.cs-gc-alt a { color: var(--magenta); text-decoration: underline; }

/* ── Cómo funciona ──────────────────────────────────────────────────────── */

/* Fondo propio, como en el diseño: la sección se separa del configurador con
   color, no solo con una línea. Las fichas de dentro van en hueso para que
   contrasten sobre el rosa. */
.cs-gc-how { margin-top: 0; border-top: 0; }
.cs-gc-how-head { margin-bottom: 26px; }
.cs-gc-how-head .cs-gc-eyebrow { margin-bottom: 8px; }

.cs-gc-steps { display: flex; flex-direction: column; gap: 10px; }
.cs-gc-howstep {
	padding: 20px 18px;
	background: var(--bone);
	border-radius: 12px;
	min-width: 0;
}
.cs-gc-howstep-num {
	display: block;
	font-family: var(--font-mono);
	font-size: 11.5px;
	letter-spacing: .1em;
	color: var(--magenta);
	margin-bottom: 10px;
}
.cs-gc-howstep-title {
	font-size: 18px;
	font-weight: 500;
	margin: 0 0 8px;
	color: var(--ink);
	line-height: 1.3;
}
.cs-gc-howstep-text { font-size: 14px; line-height: 1.6; color: var(--ink-2); margin: 0; }

/* ── Banda de llamada a la acción ───────────────────────────────────────── */

/* La banda va a hueso y sin esquinas: encaja con lo que tenga encima y debajo
   como una franja más de la página. */
.cs-gc-band {
	background: var(--bone-2);
	border-radius: 0;
	padding-top: 36px;
	padding-bottom: 36px;
	padding-left: max(24px, calc((100% - var(--gc-max)) / 2));
	padding-right: max(24px, calc((100% - var(--gc-max)) / 2));
}
.cs-gc-band-inner { display: flex; flex-direction: column; gap: 18px; }
.cs-gc-band-text  { min-width: 0; }

.cs-gc-band-card {
	position: relative;
	width: 132px;
	flex-shrink: 0;
	aspect-ratio: 1.6 / 1;
	border-radius: 11px;
	padding: 12px 14px;
	color: #fff;
	background: var(--grad-brand);
	box-shadow: 0 12px 26px rgba(227, 28, 121, .24);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	overflow: hidden;
}
.cs-gc-band-card::after {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(120% 90% at 85% 15%, rgba(255,255,255,.28), transparent 55%);
}
.cs-gc-band-card .cs-gc-watermark { right: -14%; bottom: -26%; width: 66%; opacity: .2; }
.cs-gc-band-brand  { position: relative; z-index: 1; font-size: 13px; font-weight: 500; }
.cs-gc-band-amount { position: relative; z-index: 1; font-size: 24px; font-weight: 300; line-height: 1; }

.cs-gc-band-title {
	font-size: clamp(20px, 4cqi, 28px);
	font-weight: 300;
	line-height: 1.2;
	margin: 0 0 8px;
	color: var(--ink);
}
.cs-gc-band-desc { font-size: 14px; line-height: 1.55; color: var(--ink-2); margin: 0; }
.cs-gc-band-cta  { width: 100%; }

/* ── Convivencia con el tema ────────────────────────────────────────────── */

.cs-gc h1, .cs-gc h2, .cs-gc h3 { font-family: inherit; text-transform: none; }
.cs-gc h1.cs-gc-title,
.cs-gc h2.cs-gc-title,
.cs-gc h3.cs-gc-title--block,
.cs-gc .cs-gc-howstep-title,
.cs-gc .cs-gc-band-title { margin-top: 0; }

.cs-gc button {
	font-family: inherit;
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
	line-height: 1.4;
}
.cs-gc button.cs-gc-cta,
.cs-gc a.cs-gc-cta {
	font-family: var(--font-mono);
	text-transform: uppercase;
	letter-spacing: .1em;
}
.cs-gc ul { list-style: none; margin-left: 0; padding-left: 0; }
.cs-gc img { max-width: 100%; height: auto; }

/* ═══════════════════════════════════════════════════════════════════════════
 * A partir de aquí, mejoras según el ancho REAL del contenedor.
 *
 * Se usa @container y no @media a propósito: si el tema mete el shortcode en
 * una columna de 500px, aquí no se aplica nada aunque la pantalla mida 1900.
 * Eso es justo lo que evita que el diseño de tres columnas se meta donde no
 * cabe y acabe partiendo el titular letra a letra.
 * ═══════════════════════════════════════════════════════════════════════════ */

@container csgc (min-width: 560px) {
	.cs-gc-modes { flex-direction: row; }
	.cs-gc-modes .cs-gc-mode { flex: 1 1 0; }
	.cs-gc-row { flex-direction: row; }
	.cs-gc-row > * { flex: 1 1 0; }
	.cs-gc-cta { width: auto; min-width: 280px; }
	.cs-gc-band-inner { flex-direction: row; align-items: center; gap: 24px; }
	.cs-gc-band-text { flex: 1 1 auto; }
	.cs-gc-band-cta { width: auto; flex-shrink: 0; }
}

@container csgc (min-width: 820px) {
	.cs-gc-hero {
		display: grid;
		grid-template-columns: 1.1fr 1fr;
		gap: 44px;
		align-items: start;
	}
	.cs-gc-sechead {
		display: grid;
		grid-template-columns: minmax(120px, 180px) minmax(0, 1fr) minmax(160px, 220px);
		gap: 24px;
		align-items: end;
	}
	.cs-gc-sechead-meta { text-align: right; }

	.cs-gc-grid {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 48px;
		align-items: start;
	}
	.cs-gc-grid--promo { align-items: center; }
	/* En la promo la tarjeta va a la derecha, como en el diseño. */
	.cs-gc-grid--promo .cs-gc-cardwrap { order: 2; }
	.cs-gc-grid--promo .cs-gc-form     { order: 1; }

	.cs-gc-how-head {
		display: grid;
		grid-template-columns: minmax(120px, 180px) minmax(0, 1fr);
		gap: 24px;
		align-items: end;
	}

	.cs-gc-steps {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1px;
		background: var(--line);
		border-radius: 12px;
		overflow: hidden;
	}
	/* Un píxel de hueco sobre el color de línea hace de separador entre
	   fichas sin tener que cuadrar bordes que se doblan en las esquinas. */
	.cs-gc-howstep {
		padding: 26px 24px;
		border-radius: 0;
		background: var(--bone);
	}
}

/* Respaldo para navegadores sin @container: se quedan con el diseño de una
   columna, que es correcto aunque menos lucido. Nada se rompe. */
@supports not (container-type: inline-size) {
	@media (min-width: 1100px) {
		.cs-gc-grid {
			display: grid;
			grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
			gap: 48px;
			align-items: start;
		}
		.cs-gc-modes, .cs-gc-row { flex-direction: row; }
		.cs-gc-modes .cs-gc-mode, .cs-gc-row > * { flex: 1 1 0; }
	}
}

/* ---------------------------------------------------------------------------
 * Fondo de la sección promo
 *
 * Dentro del contenedor, no rompiéndolo. Si se quiere a sangre completa, se
 * pone el color en el bloque «Grupo» de WordPress que envuelve al shortcode y
 * se marca «Ancho completo»: eso lo hace el tema, que sí sabe cómo hacerlo sin
 * provocar desbordes ni barras horizontales.
 * ------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
 * Fondos a todo el ancho
 *
 * El color lo pinta un pseudoelemento, NO el propio bloque.
 *
 * La técnica habitual —márgenes negativos con 50vw más relleno lateral— da por
 * hecho que el bloque puede crecer hasta ocupar la pantalla. Eso solo es cierto
 * si su contenedor es un bloque normal. Si el tema lo mete en un flex o en una
 * rejilla, el ancho lo decide el contenedor y el bloque NO crece: entonces el
 * relleno lateral (que en una pantalla de 1920 son 260px por lado) se come el
 * espacio y deja el contenido en una columna de pocos píxeles. Cuanto más
 * grande la pantalla, más relleno y peor queda.
 *
 * Con un pseudoelemento absoluto el color se extiende sin tocar la maquetación:
 * el bloque sigue en su sitio, con su ancho normal, y solo el fondo se sale.
 * ------------------------------------------------------------------------- */

.cs-gc--promo,
.cs-gc-how {
	position: relative;
	isolation: isolate;

	/* El contenido se centra con RELLENO, no con ancho máximo.
	 *
	 * Con max-width y márgenes automáticos, el bloque depende de que su
	 * contenedor se comporte como un bloque normal. Si el tema lo mete en un
	 * flex o una rejilla, los márgenes automáticos no centran y el ancho
	 * máximo se ignora: el contenido se va a la izquierda ocupando toda la
	 * pantalla, que es justo lo que pasaba.
	 *
	 * Con relleno lateral calculado, el bloque ocupa lo que le den y el
	 * contenido queda centrado en 1400 sin depender de nada. El max() evita
	 * que en pantallas estrechas el cálculo se vuelva negativo. */
	max-width: none;
	margin-left: 0;
	margin-right: 0;
	padding-top: 64px;
	padding-bottom: 64px;
	padding-left: max(24px, calc((100% - var(--gc-max)) / 2));
	padding-right: max(24px, calc((100% - var(--gc-max)) / 2));

	border-radius: 0;
	background: transparent;
}

/* El fondo lo pinta un pseudoelemento que sí se sale a toda la pantalla.
   Al ser absoluto no afecta a la maquetación del bloque ni provoca scroll
   horizontal, que es lo que ocurría al sacar el bloque entero. */
.cs-gc--promo::before,
.cs-gc-how::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	background: var(--bone-2);
	z-index: 0;
	pointer-events: none;
}

/* El contenido, por encima del fondo. */
.cs-gc--promo > *,
.cs-gc-how > * { position: relative; z-index: 1; }

@container csgc (min-width: 820px) {
	.cs-gc--promo,
	.cs-gc-how   { padding-top: 88px; padding-bottom: 88px; }
	.cs-gc--promo,
	.cs-gc-band  { margin-top: 72px; margin-bottom: 72px; }
	.cs-gc--page { margin-top: 64px; margin-bottom: 96px; }
	.cs-gc-how   { margin-top: 72px; }
}

/* Si el tema ya pone un fondo alrededor, se puede quitar el propio con
   [cantik_tarjeta_regalo_promo] dentro de un grupo con la clase
   .cs-gc-plain, para no ver un recuadro sobre otro. */
.cs-gc-plain .cs-gc--promo {
	background: transparent;
	border-radius: 0;
	padding-left: 0;
	padding-right: 0;
}

/* Dentro de la sección promo, «cómo funciona» no repite el fondo: quedarían
   dos rosas idénticos pegados y se perdería la separación entre bloques. */
/* Dentro de la sección promo, «cómo funciona» ni repite el fondo ni vuelve a
   salirse: la promo ya está a sangre completa, y aplicar los márgenes
   negativos otra vez lo sacaría el doble y provocaría desbordes. */
.cs-gc--promo .cs-gc-how {
	border-top: 1px solid var(--line);
	padding-left: 0;
	padding-right: 0;
	padding-top: 44px;
}
/* Dentro de la promo el fondo ya está puesto: repetirlo sería el mismo rosa
   sobre sí mismo y se perdería la separación entre bloques. */
.cs-gc--promo .cs-gc-how::before { display: none; }