/* Widgets de Dulce Momento. Solo var(--token): la marca vive en el kit. */

/* ══════════════════════════════════════════════════════════════════
   Carrusel del hero — components: caja cuadrada + píldora + flechas + puntos
   Réplica de la sección hero de "Dulce Momento Home.dc.html".
   ══════════════════════════════════════════════════════════════════ */

.elementor-widget-dm-hero-media .dm-hero-media { position: relative; }

.elementor-widget-dm-hero-media .dm-hero-media__stage {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var(--radius-2xl, 44px);
	background: var(--dm-menta-100);
	box-shadow: var(--shadow-m, 0 8px 20px rgba(199, 46, 125, .10));
}

.elementor-widget-dm-hero-media .dm-hero-media__slides {
	list-style: none;
	margin: 0;
	padding: 0;
	position: absolute;
	inset: 0;
}

.elementor-widget-dm-hero-media .dm-hero-media__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
}

.elementor-widget-dm-hero-media .dm-hero-media__slide.is-active {
	opacity: 1;
	visibility: visible;
}

.elementor-widget-dm-hero-media .dm-hero-media__slide img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: 100%;
	border-radius: 0;   /* la caja ya recorta; anula el radio global de img del kit */
	object-fit: contain;
	padding: var(--sp-8, 32px);
	box-sizing: border-box;
	display: block;
}

/* Píldora con el nombre del slide — abajo a la izquierda, dentro de la caja. */
.elementor-widget-dm-hero-media .dm-hero-media__label {
	position: absolute;
	left: var(--sp-6, 24px);
	bottom: var(--sp-6, 24px);
	display: inline-flex;
	align-items: center;
	padding: 7px 14px;
	border-radius: var(--radius-pill, 999px);
	background: rgba(255, 255, 255, .9);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	font: 600 13px/1.2 var(--font-body, "Poppins", sans-serif);
	color: var(--dm-rosa-700);
	white-space: nowrap;
}

/* Flechas — abajo a la derecha, dentro de la caja. */
.elementor-widget-dm-hero-media .dm-hero-media__nav {
	position: absolute;
	right: var(--sp-6, 24px);
	bottom: var(--sp-6, 24px);
	display: flex;
	align-items: center;
	gap: var(--sp-2, 8px);
}

.elementor-widget-dm-hero-media .dm-hero-media__arrow {
	-webkit-appearance: none;
	appearance: none;
	width: 38px;
	height: 38px;
	border-radius: var(--radius-pill, 999px);
	border: none;
	padding: 0;
	background: var(--dm-papel);
	box-shadow: var(--shadow-s, 0 2px 8px rgba(43, 27, 42, .07));
	color: var(--dm-tinta-900);
	cursor: pointer;
	display: grid;
	place-items: center;
	font: 700 16px/1 var(--font-body, "Poppins", sans-serif);
	transition: background var(--dur-base, 200ms) var(--ease-out, ease);
}

.elementor-widget-dm-hero-media .dm-hero-media__arrow:hover { background: var(--dm-rosa-100); }

/* Puntos — FUERA de la caja, centrados debajo. */
.elementor-widget-dm-hero-media .dm-hero-media__dots {
	display: flex;
	justify-content: center;
	gap: var(--sp-2, 8px);
	margin-top: var(--sp-4, 16px);
}

.elementor-widget-dm-hero-media .dm-hero-media__dot {
	-webkit-appearance: none;
	appearance: none;
	width: 10px;
	height: 10px;
	border-radius: var(--radius-pill, 999px);
	border: none;
	padding: 0;
	cursor: pointer;
	background: var(--dm-rosa-200);
	transition: all var(--dur-base, 200ms) var(--ease-out, ease);
}

.elementor-widget-dm-hero-media .dm-hero-media__dot.is-active {
	width: 28px;
	background: var(--dm-rosa-500);
}

@media (prefers-reduced-motion: reduce) {
	.dm-hero-media__dot { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════
   Sticker — réplica de components/core/Sticker.jsx
   ══════════════════════════════════════════════════════════════════ */

.elementor-widget-dm-sticker .dm-sticker,
.elementor-widget-dm-product-configurator .dm-sticker {
	--dm-sticker-rot: -6deg;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	text-align: center;
	background: var(--dm-sticker-bg);
	color: var(--dm-sticker-fg);
	letter-spacing: var(--tracking-caps, .06em);
	text-transform: uppercase;
	border: 2.5px solid var(--dm-papel);
	box-shadow: var(--shadow-s, 0 2px 8px rgba(43, 27, 42, .07));
	transform: rotate(var(--dm-sticker-rot));
	transform-origin: center;
}

.elementor-widget-dm-sticker .dm-sticker--peel,
.elementor-widget-dm-product-configurator .dm-sticker--peel {
	box-shadow: 0 4px 0 var(--dm-sticker-edge), var(--shadow-m, 0 8px 20px rgba(199, 46, 125, .10));
}

/* Tonos — bg / fg / canto, tal cual el objeto T del componente original. */
.elementor-widget-dm-sticker .dm-sticker--rosa,
.elementor-widget-dm-product-configurator .dm-sticker--rosa      { --dm-sticker-bg: var(--dm-rosa-500);      --dm-sticker-fg: #fff;                --dm-sticker-edge: var(--dm-rosa-700); }
.elementor-widget-dm-sticker .dm-sticker--limon,
.elementor-widget-dm-product-configurator .dm-sticker--limon     { --dm-sticker-bg: var(--dm-limon-500);     --dm-sticker-fg: var(--dm-tinta-900); --dm-sticker-edge: var(--dm-limon-700); }
.elementor-widget-dm-sticker .dm-sticker--menta,
.elementor-widget-dm-product-configurator .dm-sticker--menta     { --dm-sticker-bg: var(--dm-menta-500);     --dm-sticker-fg: #06373A;             --dm-sticker-edge: var(--dm-menta-700); }
.elementor-widget-dm-sticker .dm-sticker--uva,
.elementor-widget-dm-product-configurator .dm-sticker--uva       { --dm-sticker-bg: var(--dm-uva-500);       --dm-sticker-fg: #fff;                --dm-sticker-edge: var(--dm-uva-700); }
.elementor-widget-dm-sticker .dm-sticker--mandarina,
.elementor-widget-dm-product-configurator .dm-sticker--mandarina { --dm-sticker-bg: var(--dm-mandarina-500); --dm-sticker-fg: #fff;                --dm-sticker-edge: var(--dm-mandarina-700); }
.elementor-widget-dm-sticker .dm-sticker--tinta,
.elementor-widget-dm-product-configurator .dm-sticker--tinta     { --dm-sticker-bg: var(--dm-tinta-900);     --dm-sticker-fg: #fff;                --dm-sticker-edge: #000; }
.elementor-widget-dm-sticker .dm-sticker--crema,
.elementor-widget-dm-product-configurator .dm-sticker--crema     { --dm-sticker-bg: var(--dm-crema);         --dm-sticker-fg: var(--dm-tinta-900); --dm-sticker-edge: var(--dm-rosa-300); }

/* Tamaños — objeto SZ del original. */
.elementor-widget-dm-sticker .dm-sticker--sm,
.elementor-widget-dm-product-configurator .dm-sticker--sm { font: 700 11px/1.2  var(--font-body, "Poppins", sans-serif); }
.elementor-widget-dm-sticker .dm-sticker--md,
.elementor-widget-dm-product-configurator .dm-sticker--md { font: 700 14px/1.2  var(--font-body, "Poppins", sans-serif); }
.elementor-widget-dm-sticker .dm-sticker--lg,
.elementor-widget-dm-product-configurator .dm-sticker--lg { font: 700 18px/1.15 var(--font-display, "Bricolage Grotesque", sans-serif); }

.elementor-widget-dm-sticker .dm-sticker--pill.dm-sticker--sm { padding: 8px 14px; }
.elementor-widget-dm-sticker .dm-sticker--pill.dm-sticker--md { padding: 12px 20px; }
.elementor-widget-dm-sticker .dm-sticker--pill.dm-sticker--lg { padding: 16px 28px; }
.elementor-widget-dm-sticker .dm-sticker--pill,
.elementor-widget-dm-product-configurator .dm-sticker--pill { border-radius: var(--radius-pill, 999px); }

/* Formas cerradas: cuadradas, en columna, padding 8. */
.elementor-widget-dm-sticker .dm-sticker--circle,
.elementor-widget-dm-sticker .dm-sticker--blob,
.elementor-widget-dm-product-configurator .dm-sticker--blob { flex-direction: column; padding: 8px; }
.elementor-widget-dm-sticker .dm-sticker--circle.dm-sticker--sm, .elementor-widget-dm-sticker .dm-sticker--blob.dm-sticker--sm { width: 64px;  height: 64px; }
.elementor-widget-dm-sticker .dm-sticker--circle.dm-sticker--md, .elementor-widget-dm-sticker .dm-sticker--blob.dm-sticker--md { width: 92px;  height: 92px; }
.elementor-widget-dm-sticker .dm-sticker--circle.dm-sticker--lg, .elementor-widget-dm-sticker .dm-sticker--blob.dm-sticker--lg { width: 128px; height: 128px; }
.elementor-widget-dm-sticker .dm-sticker--circle,
.elementor-widget-dm-product-configurator .dm-sticker--circle { border-radius: var(--radius-pill, 999px); }
.elementor-widget-dm-sticker .dm-sticker--blob   { border-radius: 32% 68% 62% 38% / 42% 34% 66% 58%; }

.elementor-widget-dm-sticker .dm-sticker__icon { display: inline-flex; }
.elementor-widget-dm-sticker .dm-sticker--sm .dm-sticker__icon svg, .elementor-widget-dm-sticker .dm-sticker--sm .dm-sticker__icon i { font-size: 14px; width: 14px; height: 14px; }
.elementor-widget-dm-sticker .dm-sticker--md .dm-sticker__icon svg, .elementor-widget-dm-sticker .dm-sticker--md .dm-sticker__icon i { font-size: 18px; width: 18px; height: 18px; }
.elementor-widget-dm-sticker .dm-sticker--lg .dm-sticker__icon svg, .elementor-widget-dm-sticker .dm-sticker--lg .dm-sticker__icon i { font-size: 22px; width: 22px; height: 22px; }
.elementor-widget-dm-sticker .dm-sticker__icon svg { fill: currentColor; }

/* Balanceo acoplado al ángulo, como el keyframe que generaba el componente. */
@keyframes dm-sticker-wobble {
	0%, 100% { transform: rotate(var(--dm-sticker-rot)) translateY(0); }
	50%      { transform: rotate(calc(var(--dm-sticker-rot) + 4deg)) translateY(-3px); }
}

.elementor-widget-dm-sticker .dm-sticker--wobble { animation: dm-sticker-wobble 3.2s var(--ease-pop, cubic-bezier(.34, 1.56, .64, 1)) infinite; }

@media (prefers-reduced-motion: reduce) {
	.dm-sticker--wobble { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════
   Titular rotatorio — réplica del h2 de la sección de categorías
   ══════════════════════════════════════════════════════════════════ */

.elementor-widget-dm-rotating-headline .dm-rot-headline {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .35em;
	margin: 0;
	letter-spacing: var(--tracking-tight, -.02em);
}

.elementor-widget-dm-rotating-headline .dm-rot-headline__word {
	--dm-rot-duration: 340ms;
	display: inline-block;
	color: var(--dm-rosa-600);
	animation: dm-word-in var(--dm-rot-duration) var(--ease-pop, cubic-bezier(.34, 1.56, .64, 1)) both;
}

/* Curva y valores exactos del keyframe original. */
@keyframes dm-word-in {
	from { opacity: 0; transform: translateY(14px) rotate(-2deg); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.elementor-widget-dm-rotating-headline .dm-rot-headline__word { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════
   Etiqueta (badge)
   ══════════════════════════════════════════════════════════════════ */

.elementor-widget-dm-badge .dm-badge {
	display: inline-block;
	padding: 5px 12px;
	border-radius: var(--radius-pill, 999px);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .01em;
	background: var(--dm-rosa-600);
	color: var(--dm-papel);
	white-space: nowrap;
}

.elementor-widget-dm-badge .dm-badge-uva   { background: var(--dm-uva-500); }
.elementor-widget-dm-badge .dm-badge-limon { background: var(--dm-limon-500); color: var(--dm-tinta-900); }
.elementor-widget-dm-badge .dm-badge-nuevo { background: var(--dm-menta-500); }

/* ══════════════════════════════════════════════════════════════════
   Marquesina
   ══════════════════════════════════════════════════════════════════ */

.elementor-widget-dm-marquee .dm-marquee {
	--dm-marquee-gap: 40px;
	background: var(--dm-rosa-500);
	color: var(--dm-papel);
	overflow: hidden;
	white-space: nowrap;
	padding-block: 11px;
}

.elementor-widget-dm-marquee .dm-marquee__track {
	display: inline-flex;
	gap: var(--dm-marquee-gap);
	animation: dm-marquee 26s linear infinite;
	will-change: transform;
}

.elementor-widget-dm-marquee .dm-marquee__item {
	display: inline-flex;
	align-items: center;
	gap: var(--dm-marquee-gap);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .01em;
}

.elementor-widget-dm-marquee .dm-marquee__sep { font-style: normal; opacity: .7; }

@keyframes dm-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.elementor-widget-dm-marquee .dm-marquee__track { animation: none; }
}

/* Listas que salen de los campos del producto (etiquetas dinámicas). */
.dm-field-list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-3, 12px); }
.dm-field-list li { display: flex; gap: var(--sp-2, 8px); align-items: baseline; }
.dm-field-list li::before { content: "•"; color: var(--dm-rosa-500); font-weight: 700; }

.dm-field-pairs { margin: 0; display: grid; gap: var(--sp-3, 12px); }
.dm-field-pairs__row { display: flex; justify-content: space-between; gap: var(--sp-4, 16px); border-bottom: 1px solid var(--dm-tinta-200); padding-bottom: var(--sp-3, 12px); }
.dm-field-pairs dt { color: var(--dm-tinta-500, #7A6779); margin: 0; }
.dm-field-pairs dd { margin: 0; font-weight: 600; color: var(--dm-tinta-900); text-align: right; }

/* ══════════════════════════════════════════════════════════════════
   Configurador de producto
   ══════════════════════════════════════════════════════════════════ */

.elementor-widget-dm-product-configurator .dm-config {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: var(--sp-12, 48px);
	align-items: start;
}

@media (max-width: 1024px) {
	.elementor-widget-dm-product-configurator .dm-config { grid-template-columns: 1fr; gap: var(--sp-8, 32px); }
}

/* ───── Vista previa ───── */

.elementor-widget-dm-product-configurator .dm-config__left { position: sticky; top: 96px; }
@media (max-width: 1024px) {
	.elementor-widget-dm-product-configurator .dm-config__left { position: static; }
}

.elementor-widget-dm-product-configurator .dm-config__preview {
	position: relative;
	aspect-ratio: 1 / 1;
	border-radius: var(--radius-2xl, 44px);
	background: var(--dm-rosa-100);
	box-shadow: var(--shadow-m);
	overflow: hidden;
	display: grid;
	place-items: center;
	transition: background var(--dur-base, 200ms) var(--ease-out, ease);
}

.elementor-widget-dm-product-configurator .dm-config__preview-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: var(--sp-10, 40px);
	box-sizing: border-box;
	border-radius: 0;
}

/* El nombre y la edad van encima del producto, como el impreso real. */
.elementor-widget-dm-product-configurator .dm-config__preview-text {
	position: relative;
	z-index: 2;
	text-align: center;
	padding: var(--sp-4, 16px);
	max-width: 82%;
}

.elementor-widget-dm-product-configurator .dm-config__preview-name {
	font-size: clamp(22px, 4.2vw, 40px);
	line-height: 1;
	color: var(--dm-rosa-600);
	word-break: break-word;
	text-shadow: 0 2px 0 rgba(255, 255, 255, .55);
}

.elementor-widget-dm-product-configurator .dm-config__preview-age {
	margin-top: var(--sp-2, 8px);
	font: 600 15px/1.2 var(--font-body, "Poppins"), sans-serif;
	color: var(--dm-rosa-600);
	opacity: .85;
}

.elementor-widget-dm-product-configurator .dm-config__preview-label {
	position: absolute;
	left: var(--sp-5, 20px);
	top: var(--sp-5, 20px);
	z-index: 3;
	padding: 6px 12px;
	border-radius: var(--radius-pill, 999px);
	background: rgba(255, 255, 255, .9);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	font: 700 10px/1.2 var(--font-body, "Poppins"), sans-serif;
	letter-spacing: var(--tracking-eyebrow, .14em);
	color: var(--dm-tinta-900);
}

/* La caja recorta su contenido, así que el sticker cuelga de la columna, no de
   la caja. No hace falta declararla `relative`: el `sticky` de arriba ya crea
   el bloque contenedor, y sobrescribirlo convertía su top:96px en un salto de
   96px hacia abajo. */
.elementor-widget-dm-product-configurator .dm-config__preview-sticker {
	position: absolute;
	right: -8px;
	top: -14px;
	z-index: 4;
}

/* ───── Vistas ───── */

/* Rejilla fija de 5: al envolver en flex, la última vista se estiraba a lo ancho. */
.elementor-widget-dm-product-configurator .dm-config__views {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--sp-2, 8px);
	margin-top: var(--sp-4, 16px);
}

.elementor-widget-dm-product-configurator .dm-config__view {
	min-width: 0;
	aspect-ratio: 1 / 1;
	display: grid;
	place-content: center;
	gap: 6px;
	justify-items: center;
	padding: var(--sp-2, 8px);
	border: 1.5px solid var(--dm-tinta-200);
	border-radius: var(--radius-m, 16px);
	background: var(--dm-papel);
	color: var(--dm-tinta-500);
	font: 700 9px/1.25 var(--font-body, "Poppins"), sans-serif;
	letter-spacing: .06em;
	text-align: center;
	cursor: pointer;
	transition: border-color var(--dur-base, 200ms) var(--ease-out, ease), color var(--dur-base, 200ms) var(--ease-out, ease);
}

.elementor-widget-dm-product-configurator .dm-config__view:hover {
	border-color: var(--dm-tinta-900);
	color: var(--dm-tinta-900);
}

.elementor-widget-dm-product-configurator .dm-config__view .dm-icon { font-size: 20px; }

/* ───── Cabecera del formulario ───── */

.elementor-widget-dm-product-configurator .dm-config__title {
	font-family: var(--font-display, "Bricolage Grotesque"), sans-serif;
	font-size: clamp(26px, 3vw, 38px);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: var(--tracking-tight, -.02em);
	color: var(--dm-tinta-900);
	margin: 0 0 var(--sp-3, 12px);
}

.elementor-widget-dm-product-configurator .dm-config__price {
	display: flex;
	align-items: baseline;
	gap: var(--sp-3, 12px);
	margin-top: var(--sp-3, 12px);
}

.elementor-widget-dm-product-configurator .dm-config__price-now {
	font: 800 32px/1.1 var(--font-display, "Bricolage Grotesque"), sans-serif;
	color: var(--dm-tinta-900);
}

.elementor-widget-dm-product-configurator .dm-config__price-was {
	font-size: 16px;
	color: var(--dm-tinta-500);
	text-decoration: line-through;
	opacity: .55;
}

.elementor-widget-dm-product-configurator .dm-config__pack {
	margin-top: 4px;
	font-size: 14px;
	color: var(--dm-tinta-500);
}

/* ───── Pasos ───── */

.elementor-widget-dm-product-configurator .dm-config__step {
	border: none;
	border-top: 1px solid var(--dm-tinta-200);
	margin: var(--sp-6, 24px) 0 0;
	padding: var(--sp-6, 24px) 0 0;
	min-width: 0;
	overflow: hidden;   /* contiene el float del legend */
}

.elementor-widget-dm-product-configurator .dm-config__step:first-of-type { border-top: none; padding-top: var(--sp-5, 20px); }

.elementor-widget-dm-product-configurator .dm-config__step-label {
	/* Un <legend> se pinta encima del borde del fieldset; con float sale de ese
	   flujo especial y se comporta como un bloque normal. */
	float: left;
	width: 100%;
	padding: 0;
	margin: 0 0 var(--sp-4, 16px);
	font: 700 11px/1.2 var(--font-body, "Poppins"), sans-serif;
	letter-spacing: var(--tracking-eyebrow, .14em);
	text-transform: uppercase;
	color: var(--dm-rosa-600);
}

/* El legend flotado dejaría a sus hermanos a su lado con ancho 0. */
.elementor-widget-dm-product-configurator .dm-config__step > *:not(legend) {
	clear: both;
}

/* Tamaños */
.elementor-widget-dm-product-configurator .dm-config__sizes { display: grid; gap: var(--sp-2, 8px); }

.elementor-widget-dm-product-configurator .dm-config__size {
	display: grid;
	grid-template-columns: 20px 1fr auto;
	grid-template-areas: "radio label price" "radio dims price";
	align-items: center;
	gap: 4px var(--sp-3, 12px);
	line-height: 1.3;
	width: 100%;
	padding: var(--sp-4, 16px);
	border: 1.5px solid var(--dm-tinta-200);
	border-radius: var(--radius-m, 16px);
	background: var(--dm-papel);
	cursor: pointer;
	text-align: left;
	transition: border-color var(--dur-base, 200ms) var(--ease-out, ease), background var(--dur-base, 200ms) var(--ease-out, ease);
}

.elementor-widget-dm-product-configurator .dm-config__size.is-active {
	border-color: var(--dm-tinta-900);
	background: var(--dm-rosa-50);
}

.elementor-widget-dm-product-configurator .dm-config__radio {
	grid-area: radio;
	width: 18px; height: 18px;
	border-radius: var(--radius-pill, 999px);
	border: 2px solid var(--dm-tinta-300);
	display: block;
}

.elementor-widget-dm-product-configurator .dm-config__size.is-active .dm-config__radio {
	border-color: var(--dm-tinta-900);
	background: var(--dm-rosa-500);
	box-shadow: inset 0 0 0 3px var(--dm-papel);
}

.elementor-widget-dm-product-configurator .dm-config__size-label { grid-area: label; font: 600 15px/1.3 var(--font-body, "Poppins"), sans-serif; color: var(--dm-tinta-900); }
.elementor-widget-dm-product-configurator .dm-config__size-dims  { grid-area: dims;  font-size: 13px; color: var(--dm-tinta-500); }
.elementor-widget-dm-product-configurator .dm-config__size-price { grid-area: price; font: 800 17px/1.1 var(--font-display, "Bricolage Grotesque"), sans-serif; color: var(--dm-tinta-900); }

.elementor-widget-dm-product-configurator .dm-config__table-toggle {
	margin-top: var(--sp-3, 12px);
	padding: 0;
	background: none;
	border: none;
	font: 600 14px/1.2 var(--font-body, "Poppins"), sans-serif;
	color: var(--dm-rosa-700);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.elementor-widget-dm-product-configurator .dm-config__table {
	margin-top: var(--sp-3, 12px);
	border-radius: var(--radius-m, 16px);
	background: var(--dm-crema);
	padding: var(--sp-4, 16px);
}

.elementor-widget-dm-product-configurator .dm-config__table-row {
	display: grid;
	grid-template-columns: 1fr 1fr 1.2fr;
	gap: var(--sp-2, 8px);
	padding: 8px 0;
	font-size: 13px;
	color: var(--dm-tinta-700);
	border-bottom: 1px solid var(--dm-tinta-200);
}
.elementor-widget-dm-product-configurator .dm-config__table-row:last-child { border-bottom: none; }
.elementor-widget-dm-product-configurator .dm-config__table-row--head {
	font: 700 10px/1.2 var(--font-body, "Poppins"), sans-serif;
	letter-spacing: var(--tracking-eyebrow, .14em);
	color: var(--dm-tinta-500);
}

/* Cantidad */
.elementor-widget-dm-product-configurator .dm-config__qtys { display: flex; flex-wrap: wrap; gap: var(--sp-2, 8px); }

.elementor-widget-dm-product-configurator .dm-config__qty {
	min-width: 60px;
	padding: 11px 16px;
	border: 1.5px solid var(--dm-tinta-200);
	border-radius: var(--radius-pill, 999px);
	background: var(--dm-papel);
	color: var(--dm-tinta-700);
	font: 600 15px/1.2 var(--font-body, "Poppins"), sans-serif;
	cursor: pointer;
	transition: all var(--dur-base, 200ms) var(--ease-out, ease);
}

.elementor-widget-dm-product-configurator .dm-config__qty.is-active {
	background: var(--dm-tinta-900);
	border-color: var(--dm-tinta-900);
	color: var(--dm-papel);
}

.elementor-widget-dm-product-configurator .dm-config__hint {
	margin: var(--sp-3, 12px) 0 0;
	font-size: 13px;
	color: var(--dm-menta-700);
}

/* Campos */
.elementor-widget-dm-product-configurator .dm-config__field { display: block; position: relative; margin-bottom: var(--sp-4, 16px); }
.elementor-widget-dm-product-configurator .dm-config__field--short { max-width: 140px; }

.elementor-widget-dm-product-configurator .dm-config__field-label {
	display: block;
	margin-bottom: 6px;
	font: 600 13px/1.2 var(--font-body, "Poppins"), sans-serif;
	color: var(--dm-tinta-700);
}

.elementor-widget-dm-product-configurator .dm-config__field input[type="text"],
.elementor-widget-dm-product-configurator .dm-config__field textarea,
.elementor-widget-dm-product-configurator .dm-config__zip input {
	width: 100%;
	padding: 12px 16px;
	border: 1.5px solid var(--dm-tinta-200);
	border-radius: var(--radius-m, 16px);
	background: var(--dm-papel);
	font: 400 15px/1.4 var(--font-body, "Poppins"), sans-serif;
	color: var(--dm-tinta-900);
	box-sizing: border-box;
}

.elementor-widget-dm-product-configurator .dm-config__field input:focus,
.elementor-widget-dm-product-configurator .dm-config__field textarea:focus,
.elementor-widget-dm-product-configurator .dm-config__zip input:focus {
	border-color: var(--dm-rosa-500);
	outline: none;
}

.elementor-widget-dm-product-configurator .dm-config__count {
	position: absolute;
	right: 14px;
	bottom: 13px;
	font-size: 12px;
	color: var(--dm-tinta-300);
}

/* Tipografías y colores */
.elementor-widget-dm-product-configurator .dm-config__fonts,
.elementor-widget-dm-product-configurator .dm-config__colors { display: flex; flex-wrap: wrap; gap: var(--sp-2, 8px); }

.elementor-widget-dm-product-configurator .dm-config__font {
	width: 52px; height: 44px;
	/* La muestra iba apoyada en la línea base, arriba del recuadro. */
	display: grid;
	place-items: center;
	line-height: 1;
	padding: 0;
	border: 1.5px solid var(--dm-tinta-200);
	border-radius: var(--radius-m, 16px);
	background: var(--dm-papel);
	color: var(--dm-tinta-900);
	font-size: 18px;
	cursor: pointer;
}
.elementor-widget-dm-product-configurator .dm-config__font.is-active { border-color: var(--dm-tinta-900); border-width: 2px; }

.elementor-widget-dm-product-configurator .dm-config__color {
	width: 36px; height: 36px;
	border-radius: var(--radius-pill, 999px);
	border: 2.5px solid var(--dm-papel);
	box-shadow: 0 0 0 1.5px var(--dm-tinta-200);
	cursor: pointer;
}
.elementor-widget-dm-product-configurator .dm-config__color.is-active { box-shadow: 0 0 0 2.5px var(--dm-tinta-900); }

/* Entrega */
.elementor-widget-dm-product-configurator .dm-config__eta { margin: 0 0 var(--sp-3, 12px); font-size: 14px; color: var(--dm-tinta-700); }
.elementor-widget-dm-product-configurator .dm-config__zip { display: flex; gap: var(--sp-2, 8px); }
.elementor-widget-dm-product-configurator .dm-config__zip input { max-width: 160px; border-radius: var(--radius-pill, 999px); }

.elementor-widget-dm-product-configurator .dm-config__zip-btn {
	padding: 12px 22px;
	border: 1.5px solid var(--dm-tinta-900);
	border-radius: var(--radius-pill, 999px);
	background: transparent;
	color: var(--dm-tinta-900);
	font: 600 14px/1.2 var(--font-body, "Poppins"), sans-serif;
	cursor: pointer;
	white-space: nowrap;
}

/* CTA */
.elementor-widget-dm-product-configurator .dm-config__cta { margin-top: var(--sp-6, 24px); }

.elementor-widget-dm-product-configurator .dm-config__submit {
	width: 100%;
	padding: 17px 28px;
	border: none;
	border-radius: var(--radius-pill, 999px);
	background: var(--dm-rosa-500);
	color: var(--dm-papel);
	font: 600 16px/1.2 var(--font-body, "Poppins"), sans-serif;
	cursor: pointer;
	transition: background var(--dur-base, 200ms) var(--ease-out, ease);
}
.elementor-widget-dm-product-configurator .dm-config__submit:hover { background: var(--dm-rosa-600); }

.elementor-widget-dm-product-configurator .dm-config__trust {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-4, 16px);
	margin-top: var(--sp-4, 16px);
	font-size: 13px;
	color: var(--dm-tinta-500);
}
.elementor-widget-dm-product-configurator .dm-config__trust span { display: inline-flex; align-items: center; gap: 6px; }
.elementor-widget-dm-product-configurator .dm-config__trust .dm-icon { font-size: 16px; color: var(--dm-rosa-500); }

.elementor-widget-dm-product-configurator .dm-config__help {
	display: inline-block;
	margin-top: var(--sp-3, 12px);
	font-size: 14px;
	color: var(--dm-rosa-700);
}

/* La valoración de Woo dentro de la cabecera. */
.elementor-widget-dm-product-configurator .dm-config__rating .star-rating { color: var(--dm-limon-500); }
.elementor-widget-dm-product-configurator .dm-config__rating .woocommerce-review-link { color: var(--dm-tinta-500); font-size: 13px; }

/* Selector de diseño (Paso 2 cuando el producto tiene ese atributo). */
.elementor-widget-dm-product-configurator .dm-config__designs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2, 8px);
}

.elementor-widget-dm-product-configurator .dm-config__design {
	padding: 9px 16px;
	border: 1.5px solid var(--dm-tinta-200);
	border-radius: var(--radius-pill, 999px);
	background: var(--dm-papel);
	color: var(--dm-tinta-700);
	font: 600 14px/1.2 var(--font-body, "Poppins"), sans-serif;
	cursor: pointer;
	transition: all var(--dur-base, 200ms) var(--ease-out, ease);
}

.elementor-widget-dm-product-configurator .dm-config__design.is-active {
	background: var(--dm-rosa-100);
	border-color: var(--dm-tinta-900);
	color: var(--dm-rosa-700);
}

.elementor-widget-dm-product-configurator .dm-config__submit:disabled {
	background: var(--dm-tinta-200);
	color: var(--dm-tinta-500);
	cursor: not-allowed;
}

/* El kit estiliza `button:hover` con el rosa de marca y su especificidad (0,2,1)
   gana a la de estos controles. Hay que igualarla o el hover los pinta de rosa. */
.elementor-widget-dm-product-configurator .dm-config__size:hover,
.elementor-widget-dm-product-configurator .dm-config__size:focus {
	background: var(--dm-rosa-50);
	border-color: var(--dm-tinta-900);
	color: inherit;
}
.elementor-widget-dm-product-configurator .dm-config__size.is-active:hover {
	background: var(--dm-rosa-50);
}
.elementor-widget-dm-product-configurator .dm-config__qty:hover,
.elementor-widget-dm-product-configurator .dm-config__design:hover,
.elementor-widget-dm-product-configurator .dm-config__font:hover,
.elementor-widget-dm-product-configurator .dm-config__view:hover {
	background: var(--dm-rosa-50);
	color: var(--dm-tinta-900);
}
.elementor-widget-dm-product-configurator .dm-config__qty.is-active:hover {
	background: var(--dm-tinta-900);
	color: var(--dm-papel);
}
.elementor-widget-dm-product-configurator .dm-config__design.is-active:hover {
	background: var(--dm-rosa-100);
	color: var(--dm-rosa-700);
}
.elementor-widget-dm-product-configurator .dm-config__table-toggle:hover,
.elementor-widget-dm-product-configurator .dm-config__zip-btn:hover {
	background: transparent;
	color: var(--dm-rosa-700);
}

/* Las medidas necesitan su propia línea; con el radio a la izquierda se
   aplastaban contra el nombre en la fila activa. */
.elementor-widget-dm-product-configurator .dm-config__size-dims {
	align-self: start;
	opacity: .8;
}

/* Descripción del producto, justo debajo del precio. */
.elementor-widget-dm-product-configurator .dm-config__desc {
	margin-top: var(--sp-4, 16px);
	max-width: 52ch;
	color: var(--dm-tinta-700);
	font-size: 15px;
	line-height: 1.6;
}
.elementor-widget-dm-product-configurator .dm-config__desc p { margin: 0 0 var(--sp-3, 12px); }
.elementor-widget-dm-product-configurator .dm-config__desc p:last-child { margin-bottom: 0; }

/* ───── Fotos reales del catálogo (12-importar-imagenes.php) ─────
   Cada diseño trae sus vistas; la píldora del Paso 2 muestra la del
   frente y las miniaturas de abajo cambian la vista previa. */
.elementor-widget-dm-product-configurator .dm-config__design--foto {
	display: flex;
	align-items: center;
	gap: var(--sp-2, 8px);
	padding: 5px 14px 5px 5px;
}

.elementor-widget-dm-product-configurator .dm-config__design-thumb {
	width: 30px;
	height: 30px;
	flex: none;
	border-radius: var(--radius-pill, 999px);
	object-fit: cover;
	background: var(--dm-rosa-50);
}

.elementor-widget-dm-product-configurator .dm-config__view-thumb {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--radius-s, 10px);
	background: var(--dm-rosa-50);
}

/* Con foto, la miniatura manda: el botón deja de centrar contenido. */
.elementor-widget-dm-product-configurator .dm-config__view:has(.dm-config__view-thumb) {
	display: block;
	padding: 5px;
	align-content: start;
}

.elementor-widget-dm-product-configurator .dm-config__view:has(.dm-config__view-thumb) span {
	display: block;
	margin-top: 5px;
}

.elementor-widget-dm-product-configurator .dm-config__view.is-active {
	border-color: var(--dm-tinta-900);
	color: var(--dm-tinta-900);
}

/* ───── Personalización por zonas ─────
   El escenario toma la proporción exacta de la foto (la fija el JS): así un
   `left: 31%` es el 31 % de la foto y no de una caja con bandas, que es lo que
   hace que el recuadro caiga donde se dibujó en el admin. */
.elementor-widget-dm-product-configurator .dm-config__stage {
	position: relative;
	max-width: 100%;
	max-height: 100%;
	margin: auto;
	border-radius: var(--radius-l, 24px);
	overflow: hidden;
}

.elementor-widget-dm-product-configurator .dm-config__stage-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;   /* el escenario ya tiene la proporción: no deforma */
}

.elementor-widget-dm-product-configurator .dm-config__zonas-preview {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.elementor-widget-dm-product-configurator .dm-config__zona-txt {
	position: absolute;
	display: flex;
	align-items: center;
	line-height: 1;
	white-space: nowrap;
	text-shadow: 0 1px 2px rgba(255, 255, 255, .45);
	transition: outline-color var(--dur-base, 200ms) var(--ease-out, ease);
	outline: 2px dashed transparent;
	outline-offset: 3px;
}

.elementor-widget-dm-product-configurator .dm-config__zona-txt.is-vacia { opacity: .38; }

/* Al enfocar el campo se marca su recuadro, para saber cuál se está escribiendo. */
.elementor-widget-dm-product-configurator .dm-config__zona-txt.is-focus {
	outline-color: var(--dm-rosa-600, #E8479B);
}

/* ── Interruptor «personalizar sí / no» ── */
.elementor-widget-dm-product-configurator .dm-config__perso {
	display: flex;
	gap: var(--sp-2, 8px);
	flex-wrap: wrap;
}

.elementor-widget-dm-product-configurator .dm-config__perso-opt {
	flex: 1 1 140px;
	padding: 11px 18px;
	border: 1.5px solid var(--dm-tinta-200);
	border-radius: var(--radius-pill, 999px);
	background: var(--dm-papel);
	color: var(--dm-tinta-700);
	font: 600 14px/1.2 var(--font-body, "Poppins"), sans-serif;
	cursor: pointer;
	transition: all var(--dur-base, 200ms) var(--ease-out, ease);
}

.elementor-widget-dm-product-configurator .dm-config__perso-opt.is-active {
	background: var(--dm-tinta-900);
	border-color: var(--dm-tinta-900);
	color: var(--dm-papel);
}

/* El kit pinta `button:hover` de rosa con especificidad (0,2,1); hay que
   igualarla o se lleva por delante estos controles. */
.elementor-widget-dm-product-configurator .dm-config__perso-opt:hover {
	background: var(--dm-rosa-50);
	color: var(--dm-tinta-900);
}
.elementor-widget-dm-product-configurator .dm-config__perso-opt.is-active:hover {
	background: var(--dm-tinta-900);
	color: var(--dm-papel);
}

.elementor-widget-dm-product-configurator .dm-config__perso-hint {
	display: block;
	margin-top: 6px;
	color: var(--dm-tinta-500);
	font: 400 13px/1.5 var(--font-body, "Poppins"), sans-serif;
}

.elementor-widget-dm-product-configurator .dm-config__zonas {
	display: flex;
	flex-direction: column;
	gap: var(--sp-4, 16px);
}

/* ── Color del texto: paleta + selector libre ── */
.elementor-widget-dm-product-configurator .dm-config__tintas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2, 8px);
	align-items: center;
}

.elementor-widget-dm-product-configurator .dm-config__tinta {
	width: 30px;
	height: 30px;
	padding: 0;
	border: 2px solid var(--dm-tinta-200);
	border-radius: var(--radius-pill, 999px);
	cursor: pointer;
	transition: transform var(--dur-base, 200ms) var(--ease-out, ease), border-color var(--dur-base, 200ms) var(--ease-out, ease);
}
.elementor-widget-dm-product-configurator .dm-config__tinta:hover { transform: scale(1.1); }
.elementor-widget-dm-product-configurator .dm-config__tinta.is-active {
	border-color: var(--dm-tinta-900);
	transform: scale(1.1);
}

.elementor-widget-dm-product-configurator .dm-config__tinta-libre {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--dm-tinta-500);
	font: 500 13px/1.2 var(--font-body, "Poppins"), sans-serif;
	cursor: pointer;
}
.elementor-widget-dm-product-configurator .dm-config__tinta-libre input[type="color"] {
	width: 30px;
	height: 30px;
	padding: 0;
	border: 2px solid var(--dm-tinta-200);
	border-radius: var(--radius-pill, 999px);
	background: none;
	cursor: pointer;
}

/* ───── Chips de temas del blog ───── */
.elementor-widget-dm-blog-chips .dm-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2, 8px);
}

.elementor-widget-dm-blog-chips .dm-chip {
	padding: 9px 18px;
	border: 1.5px solid var(--dm-tinta-200);
	border-radius: var(--radius-pill, 999px);
	background: var(--dm-papel);
	color: var(--dm-tinta-700);
	font: 600 14px/1.2 var(--font-body, "Poppins"), sans-serif;
	text-decoration: none;
	white-space: nowrap;
	transition: all var(--dur-base, 200ms) var(--ease-out, ease);
}

.elementor-widget-dm-blog-chips .dm-chip:hover {
	border-color: var(--dm-tinta-900);
	color: var(--dm-tinta-900);
	background: var(--dm-rosa-50);
}

.elementor-widget-dm-blog-chips .dm-chip.is-active {
	background: var(--dm-tinta-900);
	border-color: var(--dm-tinta-900);
	color: var(--dm-papel);
}
.elementor-widget-dm-blog-chips .dm-chip.is-active:hover {
	background: var(--dm-tinta-900);
	color: var(--dm-papel);
}

/* ───── Miniaturas de vista, ya sin texto ─────
   Con la foto cargada la etiqueta sobraba, así que el botón pasa a ser solo el
   recuadro de la imagen. El estado activo se marca con un rosa muy tenue: el
   contorno oscuro solo no se distinguía y un rosa fuerte se comía la foto. */
.elementor-widget-dm-product-configurator .dm-config__view {
	padding: 5px;
	aspect-ratio: 1 / 1;
}

.elementor-widget-dm-product-configurator .dm-config__view.is-active,
.elementor-widget-dm-product-configurator .dm-config__view.is-active:hover {
	background: var(--dm-rosa-50);
	border-color: var(--dm-rosa-300);
}

.elementor-widget-dm-product-configurator .dm-config__view-thumb {
	height: 100%;
}

/* La píldora del diseño activo llevaba rosa-100 con texto rosa fuerte y
   destacaba más que la propia foto. Mismo criterio: fondo apenas teñido. */
.elementor-widget-dm-product-configurator .dm-config__design.is-active,
.elementor-widget-dm-product-configurator .dm-config__design.is-active:hover {
	background: var(--dm-rosa-50);
	border-color: var(--dm-rosa-300);
	color: var(--dm-tinta-900);
}