/* ==========================================================================
   PORTADA · estilos de page-portada.php
   Se añade al final de assets/css/custom.css. Usa los tokens de marca ya
   definidos arriba: ni un hex nuevo.
   ========================================================================== */

.dst-contenedor {
	max-width: 1360px;
	margin-inline: auto;
	padding-inline: clamp(16px, 2.4vw, 36px);
}

.dst-kicker {
	font-size: 10.5px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--dst-rosa-texto);
	font-weight: 600;
	margin: 0 0 12px;
}

.dst-titulo-seccion {
	font-family: 'Prata', Georgia, serif;
	font-weight: 400;
	font-size: clamp(24px, 3.2vw, 44px);
	line-height: 1.14;
	color: var(--dst-oscuro);
	margin: 0 0 14px;
	max-width: 24ch;
}

/* --- Hero: a ancho completo sobre el mismo fondo, sin tarjeta --- */

.dst-hero {
	background:
		radial-gradient(60% 70% at 88% 12%, var(--dst-nude) 0%, rgba(249, 216, 210, 0) 62%),
		var(--dst-crema);
}

.dst-hero__grid,
.dst-nosotras__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: clamp(26px, 3.6vw, 56px);
	align-items: center;
}

.dst-hero__titulo {
	font-family: 'Prata', Georgia, serif;
	font-weight: 400;
	font-size: clamp(32px, 5.4vw, 68px);
	line-height: 1.08;
	color: var(--dst-oscuro);
	margin: 0 0 18px;
	max-width: 20ch;
}

.dst-hero__entradilla {
	font-size: clamp(16px, 1.5vw, 19px);
	line-height: 1.62;
	color: var(--dst-humo);
	margin: 0 0 26px;
	max-width: 44ch;
}

.dst-hero__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 26px;
}

.dst-hero__pastillas {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dst-hero__pastillas li {
	background: var(--dst-papel);
	border: 1px solid var(--dst-arena);
	border-radius: 9999px;
	padding: 8px 14px;
	font-size: 12.5px;
	color: var(--dst-humo);
}

.dst-hero__foto {
	position: relative;
	display: block;
	border-radius: 32px;
	overflow: hidden;
	box-shadow: 0 30px 60px rgba(44, 36, 39, 0.16);
}

.dst-hero__foto img {
	display: block;
	width: 100%;
	height: auto;
}

.dst-hero__etiqueta {
	position: absolute;
	left: 16px;
	bottom: 16px;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 12px;
	background: var(--dst-papel);
	border-radius: 20px;
	padding: 12px 16px;
	box-shadow: 0 16px 32px rgba(44, 36, 39, 0.18);
}

.dst-hero__nombre {
	font-size: 14px;
	font-weight: 500;
	color: var(--dst-oscuro);
}

.dst-hero__precio {
	font-size: 15px;
	font-weight: 600;
	color: var(--dst-rosa-texto);
}

/* --- Beneficios --- */

.dst-beneficios {
	background: var(--dst-crema-2);
}

.dst-beneficios__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: clamp(20px, 2.6vw, 40px);
}

.dst-beneficio__dato {
	font-family: 'Prata', Georgia, serif;
	font-size: clamp(30px, 3.6vw, 46px);
	line-height: 1;
	color: var(--dst-rosa-texto);
	margin: 0 0 10px;
}

.dst-beneficio--no .dst-beneficio__dato {
	color: var(--dst-oscuro);
}

.dst-beneficio__texto {
	font-size: 15.5px;
	line-height: 1.62;
	color: var(--dst-humo);
	margin: 0;
	max-width: 34ch;
}

/* --- Catálogo --- */

.dst-catalogo__cabecera {
	display: flex;
	flex-wrap: wrap;
	gap: 18px 32px;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: clamp(26px, 3.2vw, 40px);
}

/* --- Escalera de packs --- */

.dst-packs {
	background: var(--dst-crema-2);
}

.dst-packs__entradilla {
	font-size: 16px;
	color: var(--dst-humo);
	margin: 0 0 clamp(22px, 2.8vw, 34px);
	max-width: 52ch;
}

.dst-packs__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	gap: clamp(12px, 1.6vw, 18px);
}

.dst-pack {
	position: relative;
	background: var(--dst-papel);
	border: 1px solid var(--dst-arena);
	border-radius: 24px;
	padding: 22px;
}

.dst-pack--destacado {
	border: 2px solid var(--dst-rosa);
}

.dst-pack .dst-badge {
	position: absolute;
	right: 14px;
	top: -11px;
}

.dst-pack__titulo {
	font-size: 14px;
	font-weight: 500;
	color: var(--dst-humo);
	margin: 0 0 8px;
}

.dst-pack__precio {
	font-family: 'Prata', Georgia, serif;
	font-size: clamp(22px, 2.4vw, 30px);
	line-height: 1.1;
	color: var(--dst-oscuro);
	margin: 0;
}

.dst-pack__unidad {
	font-size: 13px;
	color: var(--dst-rosa-texto);
	font-weight: 500;
	margin: 4px 0 0;
}

.dst-pack__ahorro {
	font-size: 12.5px;
	color: var(--dst-humo);
	margin: 8px 0 0;
}

.dst-pack__aviso {
	font-size: 11.5px;
	color: var(--dst-humo);
	margin: 10px 0 0;
	padding-top: 10px;
	border-top: 1px solid var(--dst-arena);
}

/* --- Cómo funciona --- */

.dst-pasos__lista {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: clamp(14px, 1.8vw, 22px);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.dst-pasos__lista li {
	background: var(--dst-papel);
	border: 1px solid var(--dst-arena);
	border-radius: 24px;
	padding: 22px;
}

.dst-pasos__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 9999px;
	background: var(--dst-rosa);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 12px;
}

.dst-pasos__lista strong {
	display: block;
	font-size: 16.5px;
	font-weight: 500;
	color: var(--dst-oscuro);
	margin-bottom: 4px;
}

.dst-pasos__lista span:last-child {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--dst-humo);
}

/* --- Nosotras --- */

.dst-nosotras p {
	font-size: 16px;
	line-height: 1.7;
	color: var(--dst-humo);
	max-width: 52ch;
}

.dst-nosotras__foto img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 32px;
}

/* --- Logotipo en HTML (shortcode [destellos_logo]) --- */

.dst-logo {
	display: inline-flex;
	align-items: baseline;
	font-family: 'Outfit', sans-serif;
	font-weight: 200;
	line-height: 1;
	letter-spacing: 0.01em;
	color: var(--dst-rosa);
	text-decoration: none;
}

.dst-logo__e svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Aquí había una segunda definición de .dst-logo__e y .dst-logo__descriptor
   que peleaba con la de custom.css con el mismo peso, y ganaba por ir después.
   La del descriptor daba font-size:0.11em, pensada para ir DENTRO de .dst-logo,
   donde la letra es grande. Pero el descriptor nunca va dentro: el shortcode
   lo pinta como hermano, dentro de .dst-logo-bloque (functions.php:405). Así
   que 0.11em se calculaba sobre los 14 px del pie y salían 1,54 px: el
   "CANDLES" del pie era invisible. En la cabecera no se veía porque allí gana
   .header-logo__svg .dst-logo__descriptor, con más peso.

   Se borra el duplicado y manda la de custom.css, que es la que va en tamaño
   absoluto, como dice la referencia. Lo mismo con .dst-logo__e: las medidas
   buenas son las de custom.css, sacadas del viewBox (114/100). */

/* ── Escalera de packs: foto y botón ────────────────────────────────
   La escalera enseñaba precios pero no tenía ni un solo enlace: se veía
   la oferta y no había forma de comprarla. */
.dst-pack__foto{
	margin:-4px 0 14px;border-radius:18px;overflow:hidden;background:var(--dst-crema,#FBF6F2);
}
.dst-pack__foto img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}

.dst-pack__cta{
	display:block;margin-top:16px;text-align:center;
	background:var(--dst-rosa,#B96B70);color:#fff;
	border-radius:999px;padding:13px 18px;
	font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
	text-decoration:none;transition:transform .25s,background .25s;
}
.dst-pack__cta:hover{transform:translateY(-2px);background:var(--dst-oscuro,#2C2427);color:#fff}
.dst-pack__cta--agotado{background:transparent;color:var(--dst-rosa,#B96B70);border:1px solid var(--dst-nude,#E8D8D2)}
.dst-pack__cta--agotado:hover{background:var(--dst-nude,#E8D8D2);color:var(--dst-oscuro,#2C2427)}

/* ── Cajas especiales: otoño y sorpresa ─────────────────────────── */
.dst-especiales__grid{
	display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
	gap:clamp(18px,2.4vw,30px);margin-top:clamp(22px,3vw,36px);
}
.dst-especial{
	display:block;text-decoration:none;color:inherit;
	background:var(--dst-crema,#FBF6F2);border-radius:26px;overflow:hidden;
	transition:transform .3s,box-shadow .3s;
}
.dst-especial:hover{transform:translateY(-5px);box-shadow:0 22px 40px rgba(44,36,39,.12)}
.dst-especial__foto{position:relative;aspect-ratio:1/1;overflow:hidden}
.dst-especial__foto img{display:block;width:100%;height:100%;object-fit:cover}
.dst-especial__estado{
	position:absolute;top:14px;left:14px;background:#fff;color:var(--dst-oscuro,#2C2427);
	border-radius:999px;padding:6px 13px;font-size:.72rem;font-weight:600;letter-spacing:.05em;
}
.dst-especial__texto{padding:20px 22px 24px}
.dst-especial__texto h3{
	font-family:var(--em-heading-font);font-weight:400;
	font-size:clamp(1.15rem,1.8vw,1.4rem);line-height:1.2;margin:0 0 6px;
}
.dst-especial__precio{margin:0;font-weight:600;color:var(--dst-rosa,#B96B70)}

/* Las tarjetas de la escalera no tienen todas foto: el nivel de 2 aromas no es
   una caja, se monta eligiendo cantidad. Sin esto, cada tarjeta empezaba a una
   altura distinta y la fila de botones quedaba en escalera. */
.dst-packs__grid > .dst-pack{
	display:flex;
	flex-direction:column;
}
.dst-pack__cta{margin-top:auto}
.dst-pack .dst-pack__aviso{margin-bottom:2px}

/* ═══════════════════════════════════════════════════════════════════
   SECCIONES DEL PROTOTIPO
   Tokens tomados de docs/referencia-visual/1-tienda-y-portada.dc.html:
   rosa #B96B70 · rosa oscuro #9E4F55 · rosa claro #E7A9AD · nude #E8D8D2
   crema #FBF6F2 · crema 2 #F5EBE6 · oscuro #2C2427 · texto #6E5A60
   apagado #7A666D · radios de 999px para píldoras y 26–32px para cajas
   ═══════════════════════════════════════════════════════════════════ */

/* ── Aparición al hacer scroll ─────────────────────────────────── */
[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.16,.8,.3,1),transform .7s cubic-bezier(.16,.8,.3,1)}
[data-reveal].dst-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
	[data-reveal]{opacity:1;transform:none;transition:none}
}

/* ── Piezas compartidas ────────────────────────────────────────── */
.dst-etiqueta{
	display:inline-flex;align-items:center;gap:7px;border-radius:999px;
	padding:5px 13px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
}
.dst-etiqueta--clara{background:var(--dst-crema,#FBF6F2);color:var(--dst-oscuro,#2C2427)}
.dst-etiqueta--rosa{background:#E7A9AD;color:var(--dst-oscuro,#2C2427)}
.dst-etiqueta--otono{background:#E8C9A8;color:#5A3B22}

.dst-boton--rosa{background:#E7A9AD;color:var(--dst-oscuro,#2C2427)}
/* Al pasar por encima oscurece, no aclara. Aclarar a crema sobre una
   tarjeta blanca hacía que el botón pareciera desactivado. */
.dst-boton--rosa:hover,.dst-boton--rosa:focus-visible{background:var(--dst-rosa-oscuro,#9E4F55);color:#FFFFFF}
.dst-boton--sobre-oscuro{background:var(--dst-crema,#FBF6F2);color:var(--dst-oscuro,#2C2427)}
.dst-boton--ancho{display:block;text-align:center;width:100%}

.dst-enlace-flecha{
	display:inline-flex;align-items:center;gap:9px;margin-top:8px;
	color:var(--dst-rosa,#B96B70);font-weight:500;text-decoration:none;
	transition:gap .25s;
}
.dst-enlace-flecha:hover{gap:15px;color:var(--dst-rosa-oscuro,#9E4F55)}

.dst-titulo-seccion--claro{color:var(--dst-crema,#FBF6F2)}
.dst-kicker--claro{color:#E7A9AD}

.dst-trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ── Sello giratorio del hero ──────────────────────────────────── */
.dst-sello{
	position:absolute;top:clamp(-14px,-1vw,-10px);left:clamp(-14px,-1vw,-10px);z-index:3;
	width:clamp(104px,9.5vw,132px);aspect-ratio:1;display:grid;place-items:center;pointer-events:none;
	filter:drop-shadow(0 6px 16px rgba(44,36,39,.18));
}
.dst-sello__anillo{
	position:absolute;inset:0;width:100%;height:100%;
	animation:dst-girar 22s linear infinite;
}
.dst-sello__texto{
	font-family:var(--em-font__main,'Outfit',sans-serif);
	font-size:8.6px;font-weight:600;letter-spacing:.1em;
	fill:var(--dst-oscuro,#2C2427);text-transform:uppercase;
}
.dst-sello::before{
	content:"";position:absolute;inset:0;border-radius:999px;
	background:var(--dst-crema,#FBF6F2);
	box-shadow:0 8px 22px rgba(44,36,39,.16);
}
.dst-sello__centro{
	position:relative;width:34%;aspect-ratio:1;border-radius:999px;
	background:var(--dst-rosa,#B96B70);
}
.dst-sello__centro::after{
	content:"";position:absolute;inset:26%;
	background:var(--dst-crema,#FBF6F2);
	clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);
}
@keyframes dst-girar{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.dst-sello__anillo{animation:none}}

/* La chispa del kicker del hero */
.dst-hero__kicker{display:inline-flex;align-items:center;gap:9px}
.dst-hero__chispa{
	width:13px;height:13px;flex-shrink:0;
	background:var(--dst-rosa,#B96B70);
	clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);
	animation:dst-latido 3.4s ease-in-out infinite;
}
@keyframes dst-latido{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.22);opacity:1}}
@media (prefers-reduced-motion:reduce){.dst-hero__chispa{animation:none}}

/* ── 2 · Pack personalizado ────────────────────────────────────── */
.dst-personalizado__caja{
	display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
	/* align-items:stretch es obligatorio. La tarjeta pasó de <a> a <button>
	   para abrir el asistente, y con ello heredó el align-items:center que el
	   tema le pone a todos los botones: la foto se quedaba en sus 240 px de
	   alto mínimo dentro de una tarjeta de 533 y sobraban 258 px de hueco,
	   repartidos arriba y abajo. Medido antes de tocarlo. */
	align-items:stretch;
	background:linear-gradient(130deg,#9E4F55 0%,#2C2427 62%);
	border-radius:32px;overflow:hidden;color:var(--dst-crema,#FBF6F2);
	text-decoration:none;box-shadow:0 14px 34px rgba(44,36,39,.22);
	transition:transform .34s cubic-bezier(.16,.8,.3,1),box-shadow .34s;
	/* La foto de dentro se agranda al pasar por encima. Con overflow:hidden y
	   border-radius, esa transformación hace que algunos navegadores suelten
	   el recorte redondeado y la esquina salga cuadrada un instante. Aislar la
	   tarjeta en su propia capa lo evita, y además el recorte se repite abajo
	   sobre la propia foto, por si acaso. */
	isolation:isolate;
}
.dst-personalizado__caja:hover{transform:translateY(-5px);box-shadow:0 26px 52px rgba(44,36,39,.34);color:var(--dst-crema,#FBF6F2)}
.dst-personalizado__texto{padding:clamp(26px,3.4vw,46px)}
.dst-personalizado__texto h2{
	font-family:var(--em-heading-font);font-weight:400;
	font-size:clamp(24px,3.2vw,40px);line-height:1.12;margin:15px 0 12px;max-width:20ch;
	color:var(--dst-crema,#FBF6F2);
}
.dst-personalizado__texto p{font-size:15px;line-height:1.62;color:#D6BEC2;margin:0 0 22px;max-width:46ch}
/* Los tres pasos, cada uno con la foto de lo que se elige. Antes eran
   pastillas numeradas y había que leerlas para entender de qué iban. */
.dst-personalizado__pasos{
	list-style:none;margin:0 0 26px;padding:0;
	display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;
}
.dst-paso{
	display:flex;flex-direction:column;gap:9px;
	background:rgba(251,246,242,.10);border:1px solid rgba(251,246,242,.20);
	border-radius:18px;padding:12px;position:relative;
	transition:background .28s ease,border-color .28s ease,transform .28s ease;
}
.dst-personalizado__caja:hover .dst-paso{background:rgba(251,246,242,.15)}
.dst-paso__numero{
	position:absolute;top:-8px;left:12px;z-index:2;
	width:22px;height:22px;border-radius:999px;
	background:#E7A9AD;color:var(--dst-oscuro,#2C2427);
	display:grid;place-items:center;font-size:11px;font-weight:700;
	box-shadow:0 3px 8px rgba(44,36,39,.28);
}
.dst-paso__foto{
	display:block;border-radius:12px;overflow:hidden;
	background:rgba(251,246,242,.14);aspect-ratio:1;
}
.dst-paso__foto img{width:100%;height:100%;object-fit:cover;display:block}
.dst-paso__texto{display:block;min-width:0}
.dst-paso__titulo{
	display:block;font-size:14px;font-weight:600;line-height:1.25;
	color:var(--dst-crema,#FBF6F2);
}
.dst-paso__pie{
	display:block;font-size:11.5px;line-height:1.35;margin-top:2px;
	color:rgba(251,246,242,.78);
}
@media (max-width:420px){
	.dst-personalizado__pasos{gap:8px}
	.dst-paso{padding:9px}
	.dst-paso__titulo{font-size:12.5px}
	.dst-paso__pie{font-size:10.5px}
}
.dst-personalizado__foto{
	position:relative;min-height:240px;overflow:hidden;
	/* Mismo radio que la esquina de la tarjeta que toca, para que el redondeo
	   no dependa sólo del recorte del padre. */
	border-radius:0 32px 32px 0;
}
/* En una sola columna la foto va abajo, así que las esquinas cambian de lado.
   El punto de corte es donde la rejilla deja de tener dos columnas. */
@media (max-width:620px){
	.dst-personalizado__foto{
		border-radius:0 0 32px 32px;
		/* Y más vertical: en el móvil una franja de 343×240 no enseña nada de
		   la foto, que es de 1122×1402. */
		min-height:0;aspect-ratio:4/5;
	}
}
/* El tema le pone radio a todas las imágenes; aquí el que manda es el del
   marco, que ya recorta. */
.dst-personalizado__foto > img{border-radius:inherit}
.dst-personalizado__foto img{
	position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
	transition:transform .7s cubic-bezier(.2,.7,.2,1);
}
.dst-personalizado__caja:hover .dst-personalizado__foto img{transform:scale(1.05)}

/* ── 3 · Las cuatro puertas ────────────────────────────────────── */
.dst-puertas__grid{
	display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
	gap:clamp(12px,1.6vw,18px);
}
/* En un móvil de 375 el minmax dejaba las cuatro puertas en una sola columna:
   cuatro cuadrados a pantalla completa, 1.520 px sólo para elegir categoría.
   En dos columnas se ven las cuatro de un vistazo y ocupan la mitad. */
@media (max-width:575px){
	.dst-puertas__grid{grid-template-columns:1fr 1fr;gap:12px}
	.dst-puerta{aspect-ratio:4/5}
}
.dst-puerta{
	position:relative;display:block;border-radius:26px;overflow:hidden;
	aspect-ratio:1;color:#fff;text-decoration:none;
	transition:transform .34s cubic-bezier(.16,.8,.3,1),box-shadow .34s;
}
.dst-puerta:hover{transform:translateY(-4px);box-shadow:0 20px 38px rgba(44,36,39,.18);color:#fff}
.dst-puerta__fondo{position:absolute;inset:0;background:var(--dst-nude,#E8D8D2)}
.dst-puerta__fondo img{
	width:100%;height:100%;object-fit:cover;display:block;
	transition:transform .7s cubic-bezier(.2,.7,.2,1);
}
.dst-puerta:hover .dst-puerta__fondo img{transform:scale(1.06)}
.dst-puerta__velo{
	position:absolute;inset:0;
	background:linear-gradient(0deg,rgba(44,36,39,.78) 0%,rgba(44,36,39,.08) 62%);
}
.dst-puerta__texto{position:absolute;left:16px;right:16px;bottom:16px;display:block}
.dst-puerta__nombre{display:block;font-size:19px;font-weight:500;letter-spacing:-.02em}
.dst-puerta__dato{display:block;font-size:12.5px;opacity:.85;margin-top:2px}

/* ── 5 y 11 · Cajas destacadas (sorpresa y otoño) ──────────────── */
.dst-destacada{
	display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
	border-radius:32px;overflow:hidden;text-decoration:none;
	box-shadow:0 14px 34px rgba(44,36,39,.22);
	transition:transform .34s cubic-bezier(.16,.8,.3,1),box-shadow .34s;
}
.dst-destacada:hover{transform:translateY(-5px);box-shadow:0 26px 52px rgba(44,36,39,.34)}
.dst-destacada--oscura{background:linear-gradient(120deg,#2C2427 0%,#4A3A3E 62%,#6B4A4E 100%);color:var(--dst-crema,#FBF6F2)}
.dst-destacada--oscura:hover{color:var(--dst-crema,#FBF6F2)}
.dst-destacada--otono{background:linear-gradient(120deg,#FBF6F2 0%,#F3E3D2 58%,#E8C9A8 100%);color:var(--dst-oscuro,#2C2427)}
.dst-destacada--otono:hover{color:var(--dst-oscuro,#2C2427)}
.dst-destacada__texto{display:block;padding:clamp(26px,3.4vw,46px)}
.dst-destacada__titulo{
	display:block;font-family:var(--em-heading-font);font-weight:400;
	font-size:clamp(24px,3.2vw,40px);line-height:1.12;margin-top:15px;max-width:20ch;
}
.dst-destacada--oscura .dst-destacada__titulo{color:var(--dst-crema,#FBF6F2)}
.dst-destacada__entrada{display:block;font-size:15px;line-height:1.62;margin-top:12px;max-width:44ch}
.dst-destacada--oscura .dst-destacada__entrada{color:#D6BEC2}
.dst-destacada--otono .dst-destacada__entrada{color:#6E5A60}
.dst-destacada__precio{
	display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 14px;margin-top:clamp(18px,2.2vw,26px);
}
.dst-destacada__cifra{font-family:var(--em-heading-font);font-size:clamp(26px,3vw,36px)}
.dst-destacada--oscura .dst-destacada__cifra,
.dst-destacada--oscura .dst-destacada__cifra .amount{color:#E7A9AD}
.dst-destacada--otono .dst-destacada__cifra,
.dst-destacada--otono .dst-destacada__cifra .amount{color:#9E4F55}
.dst-destacada__nota{font-size:12px}
.dst-destacada--oscura .dst-destacada__nota{color:#D6BEC2}
.dst-destacada--otono .dst-destacada__nota{color:var(--dst-apagado)}
.dst-destacada__texto .dst-boton{margin-top:clamp(18px,2.2vw,26px)}
.dst-destacada__foto{position:relative;display:block;min-height:260px;overflow:hidden}
.dst-destacada__foto img{
	position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
	transition:transform .7s cubic-bezier(.2,.7,.2,1);
}
.dst-destacada:hover .dst-destacada__foto img{transform:scale(1.05)}
.dst-destacada--otono{order:0}
.dst-destacada--otono .dst-destacada__foto{order:-1}

/* ── 6 · Lo que no lleva ───────────────────────────────────────── */
.dst-sinlista{background:#F5EBE6;border-top:1px solid var(--dst-nude,#E8D8D2);border-bottom:1px solid var(--dst-nude,#E8D8D2)}
.dst-sinlista__grid{
	display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
	gap:clamp(32px,4.6vw,72px);align-items:start;
}
.dst-sinlista .dst-titulo-seccion em{font-style:normal;color:var(--dst-rosa,#B96B70)}
.dst-sinlista__entrada{font-size:17px;line-height:1.75;color:var(--dst-texto,#6E5A60);margin:0 0 26px;max-width:48ch}
.dst-sinlista__chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.dst-sinlista__chips li{
	display:inline-flex;align-items:center;gap:8px;
	background:var(--dst-crema,#FBF6F2);border:1px solid var(--dst-nude,#E8D8D2);
	border-radius:999px;padding:9px 16px;font-size:14px;color:var(--dst-texto,#6E5A60);
}
.dst-sinlista__chips svg{color:#9E4F55;flex-shrink:0}
.dst-sinlista__cifras{display:grid;gap:20px}
.dst-cifra{
	background:var(--dst-crema,#FBF6F2);border:1px solid var(--dst-nude,#E8D8D2);
	border-radius:22px;padding:20px 22px;
}
.dst-cifra__dato{
	display:block;font-family:var(--em-heading-font);font-size:clamp(26px,3vw,34px);
	color:var(--dst-rosa,#B96B70);line-height:1;
}
.dst-cifra__texto{display:block;font-size:14px;line-height:1.6;color:var(--dst-texto,#6E5A60);margin-top:8px}
.dst-sinlista__cita{
	font-family:var(--em-heading-font);font-size:clamp(17px,2vw,21px);line-height:1.4;
	color:var(--dst-oscuro,#2C2427);margin:6px 0 0;
}

/* ── 9 · Opiniones ─────────────────────────────────────────────── */
.dst-opiniones__grid{
	display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
	gap:clamp(28px,4vw,60px);align-items:start;
}
.dst-opiniones__entrada{font-size:16px;line-height:1.75;color:var(--dst-texto,#6E5A60);margin:0 0 24px;max-width:52ch}
.dst-opiniones__reglas{
	background:var(--dst-crema,#FBF6F2);border:1px solid var(--dst-nude,#E8D8D2);
	border-radius:26px;padding:clamp(22px,2.6vw,32px);
}
.dst-opiniones__reglas h3{
	font-family:var(--em-heading-font);font-weight:400;font-size:1.25rem;margin:0 0 16px;
}
.dst-opiniones__reglas ul{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.dst-opiniones__reglas li{
	position:relative;padding-left:26px;font-size:14.5px;line-height:1.6;color:var(--dst-texto,#6E5A60);
}
.dst-opiniones__reglas li::before{
	content:"";position:absolute;left:0;top:.55em;width:11px;height:11px;border-radius:999px;
	background:var(--dst-rosa,#B96B70);opacity:.5;
}

/* ── 12 · Club ─────────────────────────────────────────────────── */
/* Mismos colores del prototipo, pero girado. A 150° el rosa claro caía justo
   detrás del título y del texto: crema sobre #F9D8D2 no se lee. Girado, la
   parte clara queda al fondo derecho, donde va la tarjeta blanca, que la tapa
   igualmente, y el texto se apoya en el extremo oscuro. */
.dst-club{
  background:
    /* Velo que solo cubre la mitad del texto y se desvanece antes de la
       tarjeta blanca. Sin él la entradilla se queda en 3,7 de contraste;
       con él pasa de 4,5 sin cambiar ni un color del prototipo. */
    linear-gradient(90deg,rgba(44,36,39,.34) 0%,rgba(44,36,39,.26) 34%,rgba(44,36,39,0) 60%),
    linear-gradient(320deg,#F9D8D2 0%,#C07C81 40%,#B96B70 70%,#9E4F55 100%);
}
@media (max-width:767px){
  /* En columna el texto ocupa todo el ancho, así que el velo también. */
  .dst-club{
    background:
      linear-gradient(180deg,rgba(44,36,39,.34) 0%,rgba(44,36,39,.26) 42%,rgba(44,36,39,0) 66%),
      linear-gradient(320deg,#F9D8D2 0%,#C07C81 40%,#B96B70 70%,#9E4F55 100%);
  }
}
.dst-club__entrada{color:#FFFFFF;opacity:1}
.dst-club .dst-titulo-seccion{color:#FFFFFF}

/* La entradilla del prototipo es una pastilla oscura, no texto rosa suelto.
   Escrita en rosa claro sobre rosa se quedaba en 1,97 de contraste. */
.dst-club .dst-kicker{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(44,36,39,0.62);color:#FFFFFF;
  border-radius:999px;padding:7px 15px;
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  margin:0 0 16px;
}
.dst-club__grid{
	display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
	gap:clamp(28px,4vw,60px);align-items:center;
}
.dst-club__entrada{font-size:16.5px;line-height:1.72;max-width:46ch}
.dst-club__tarjeta{
	background:var(--dst-crema,#FBF6F2);border-radius:28px;
	padding:clamp(24px,3vw,36px);box-shadow:0 20px 44px rgba(44,36,39,.22);
}
.dst-club__etiqueta{
	display:inline-block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
	color:#9E4F55;font-weight:600;
}
.dst-club__precio{display:flex;align-items:baseline;gap:6px;margin:10px 0 20px}
.dst-club__precio span{font-family:var(--em-heading-font);font-size:clamp(32px,4vw,44px);color:var(--dst-oscuro,#2C2427);line-height:1}
.dst-club__precio small{font-size:14px;color:var(--dst-texto,#6E5A60)}
.dst-club__lista{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:12px}
.dst-club__lista li{
	position:relative;padding-left:26px;font-size:14.5px;line-height:1.55;color:var(--dst-texto,#6E5A60);
}
.dst-club__lista li::before{
	content:"";position:absolute;left:2px;top:.35em;width:8px;height:13px;
	border:solid var(--dst-rosa,#B96B70);border-width:0 2px 2px 0;transform:rotate(42deg);
}
.dst-club__nota{margin:12px 0 0;font-size:12.5px;color:var(--dst-apagado);text-align:center}

/* ── 13 · Eventos y empresa ────────────────────────────────────── */
.dst-eventos__grid{
	display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
	gap:clamp(18px,2.4vw,28px);
}
.dst-evento{
	background:var(--dst-crema,#FBF6F2);border:1px solid var(--dst-nude,#E8D8D2);
	border-radius:28px;padding:clamp(24px,3vw,38px);
	transition:transform .3s,box-shadow .3s;
}
.dst-evento:hover{transform:translateY(-4px);box-shadow:0 20px 38px rgba(44,36,39,.1)}
.dst-evento--empresa{background:#fff}
.dst-evento__titulo{
	font-family:var(--em-heading-font);font-weight:400;
	font-size:clamp(21px,2.6vw,30px);line-height:1.14;margin:10px 0 12px;max-width:22ch;
}
.dst-evento p{font-size:15px;line-height:1.7;color:var(--dst-texto,#6E5A60);margin:0 0 18px}
.dst-evento__datos{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-wrap:wrap;gap:9px}
.dst-evento__datos li{
	background:#fff;border:1px solid var(--dst-nude,#E8D8D2);border-radius:999px;
	padding:7px 14px;font-size:13px;color:var(--dst-texto,#6E5A60);
}
.dst-evento--empresa .dst-evento__datos li{background:var(--dst-crema,#FBF6F2)}

/* ── 14 · Dudas ────────────────────────────────────────────────── */
.dst-dudas__grid{
	display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));
	gap:clamp(28px,4vw,56px);align-items:start;
}
.dst-dudas__entrada{font-size:15.5px;line-height:1.7;color:var(--dst-texto,#6E5A60);margin:0 0 20px}
.dst-dudas__entrada a{color:var(--dst-rosa,#B96B70)}
.dst-dudas__lista{display:grid;gap:10px}
.dst-duda{
	background:var(--dst-crema,#FBF6F2);border:1px solid var(--dst-nude,#E8D8D2);
	border-radius:20px;padding:2px 20px;transition:border-color .25s;
}
.dst-duda[open]{border-color:var(--dst-rosa-claro,#E7A9AD)}
.dst-duda summary{
	list-style:none;cursor:pointer;padding:16px 0;font-weight:600;font-size:15px;
	color:var(--dst-oscuro,#2C2427);display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.dst-duda summary::-webkit-details-marker{display:none}
.dst-duda summary span{
	flex-shrink:0;width:19px;height:19px;position:relative;
}
.dst-duda summary span::before,
.dst-duda summary span::after{
	content:"";position:absolute;background:var(--dst-rosa,#B96B70);border-radius:2px;
	left:50%;top:50%;transform:translate(-50%,-50%);transition:transform .28s;
}
.dst-duda summary span::before{width:13px;height:2px}
.dst-duda summary span::after{width:2px;height:13px}
.dst-duda[open] summary span::after{transform:translate(-50%,-50%) rotate(90deg)}
.dst-duda p{margin:0 0 16px;font-size:14.5px;line-height:1.7;color:var(--dst-texto,#6E5A60)}

/* ── 15 · Aviso de aromas ──────────────────────────────────────── */
/* El degradado iba de marrón oscuro a marrón menos oscuro y quedaba apagado.
   Ahora entra el vino de la marca y termina en el rosa oscuro, que es el
   mismo camino de color del Club. Se comprueba el contraste del texto blanco
   contra el punto MÁS CLARO del degradado, que es donde peor se lee. */
.dst-aviso__caja{
	background:
		radial-gradient(120% 90% at 50% 0%,rgba(231,169,173,.16) 0%,rgba(231,169,173,0) 60%),
		linear-gradient(135deg,#2C2427 0%,#6B3F44 58%,#8A4048 100%);
	border-radius:32px;padding:clamp(30px,4vw,58px);text-align:center;
	box-shadow:0 18px 44px rgba(44,36,39,.26);
}
.dst-aviso__caja > *{position:relative}
/* El h2 lleva max-width:24ch de .dst-titulo-seccion y margin-left:0, así que
   dentro de una caja con text-align:center se quedaba pegado a la izquierda:
   medido, 0 px de hueco a un lado y 214 al otro. El texto sí iba centrado
   dentro de su propia caja, y por eso engañaba. Los párrafos ya se centran
   solos porque llevan margin auto; al título le faltaba. */
.dst-aviso__caja .dst-titulo-seccion{margin-inline:auto}
.dst-aviso__caja p{color:#F0DCDF;font-size:15.5px;line-height:1.7;margin:10px auto 24px;max-width:46ch}
.dst-aviso__fila{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:520px;margin:0 auto}
.dst-aviso__fila input[type=email]{
	flex:1 1 240px;min-width:0;border:1px solid rgba(251,246,242,.3);
	background:rgba(251,246,242,.1);color:var(--dst-crema,#FBF6F2);
	border-radius:999px;padding:14px 20px;font-family:inherit;font-size:14.5px;
}
.dst-aviso__fila input[type=email]::placeholder{color:rgba(251,246,242,.55)}
.dst-aviso__fila input[type=email]:focus{outline:2px solid #E7A9AD;outline-offset:1px}
.dst-aviso__fila button{
	background:#E7A9AD;color:var(--dst-oscuro,#2C2427);border:0;border-radius:999px;
	padding:14px 26px;font-family:inherit;font-size:12.5px;font-weight:600;
	letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:transform .25s,background .25s;
}
.dst-aviso__fila button:hover{transform:translateY(-2px);background:var(--dst-crema,#FBF6F2)}
.dst-aviso__consent{
	display:flex;gap:9px;align-items:flex-start;justify-content:center;
	margin:16px auto 0;max-width:440px;font-size:12.5px;line-height:1.55;color:#EBD5D8;text-align:left;
}
.dst-aviso__consent a{color:#F3C7CB}
.dst-aviso__letra{font-size:12px;color:#DCC6CA;margin:12px 0 0}
.dst-aviso__resultado{
	background:rgba(231,169,173,.16);border:1px solid rgba(231,169,173,.4);
	border-radius:18px;padding:13px 18px;color:var(--dst-crema,#FBF6F2);
	font-size:14.5px;margin:0 auto 18px;max-width:460px;
}
.dst-aviso__resultado--error{background:rgba(247,226,226,.14);border-color:rgba(247,226,226,.4)}

@media (max-width:640px){
	.dst-aviso__consent{text-align:left}
	.dst-destacada--otono .dst-destacada__foto{order:0}
}

/* ── Corrección: el sello necesita un ancestro posicionado ──────────
   Sin esto se anclaba al primer padre con position y aparecía sobre el
   logotipo de la cabecera en lugar de sobre la foto del hero. */
.dst-hero__media{position:relative;display:block}
.dst-hero__media .dst-hero__foto{display:block}

/* Variantes del botón. .dst-boton acompaña siempre a .button del tema:
   hereda su forma y solo cambia el color, para no duplicar estilos. */
.dst-boton--rosa{background:#E7A9AD;color:var(--dst-oscuro,#2C2427);border-color:#E7A9AD}
.dst-boton--rosa:hover,.dst-boton--rosa:focus-visible{background:var(--dst-rosa-oscuro,#9E4F55);color:#FFFFFF;border-color:var(--dst-rosa-oscuro,#9E4F55)}
.dst-boton--sobre-oscuro{background:var(--dst-crema,#FBF6F2);color:var(--dst-oscuro,#2C2427);border-color:var(--dst-crema,#FBF6F2)}
.dst-boton--sobre-oscuro:hover{background:#E7A9AD;color:var(--dst-oscuro,#2C2427);border-color:#E7A9AD}
.dst-boton--ancho{display:block;width:100%;text-align:center}

/* El botón dentro de una tarjeta que ya es un enlace: es un <span>, así que
   necesita el aspecto del botón sin depender de :hover propio. */
.dst-destacada .dst-boton,
.dst-personalizado__texto .dst-boton{pointer-events:none}

/* ═══════════════════════════════════════════════════════════════════
   HERO · reconstruido contra el prototipo
   docs/referencia-visual/1-tienda-y-portada.dc.html, primera <section>
   ═══════════════════════════════════════════════════════════════════ */

.dst-hero{
	position:relative;
	overflow:hidden;
	background:
		radial-gradient(60% 70% at 88% 12%, #F9D8D2 0%, rgba(249,216,210,0) 62%),
		radial-gradient(50% 60% at 6% 88%, #F0DCD6 0%, rgba(240,220,214,0) 60%),
		#FBF6F2;
	padding:0;
}
.dst-hero__grid{
	max-width:1360px;margin:0 auto;
	padding:clamp(32px,4.8vw,72px) clamp(16px,2.4vw,36px) clamp(48px,6vw,92px);
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
	gap:clamp(26px,3.6vw,56px);
	/* center: sin esto la columna de texto quedaba pegada arriba y la mitad
	   del titular se salía del primer golpe de vista. */
	align-items:center;
}

/* Distintivo sobre el titular: pastilla blanca con el visto en rosa */
.dst-hero__sello-texto{
	display:inline-flex;align-items:center;gap:9px;
	background:#FFFFFF;border:1px solid var(--dst-nude,#E8D8D2);
	border-radius:999px;padding:8px 16px;
	margin:0 0 clamp(18px,2.4vw,26px);
	color:var(--dst-rosa,#B96B70);
}
.dst-hero__sello-fuerte{font-size:12.5px;font-weight:500;color:var(--dst-oscuro,#2C2427)}
.dst-hero__sello-suave{font-size:12.5px;color:var(--dst-apagado,#7A666D)}

.dst-hero__titulo{
	font-family:var(--em-heading-font);font-weight:400;
	font-size:clamp(40px,6.6vw,88px);line-height:1.06;letter-spacing:0;
	margin:0 0 clamp(16px,2.2vw,24px);
	color:var(--dst-oscuro,#2C2427);
}
.dst-hero__titulo span{color:var(--dst-rosa,#B96B70)}

.dst-hero__entradilla{
	font-size:clamp(16px,1.5vw,19px);line-height:1.6;
	color:var(--dst-texto,#6E5A60);
	margin:0 0 clamp(24px,3vw,34px);max-width:42ch;
}

.dst-hero__acciones{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:clamp(24px,3vw,32px)}

/* CTA del prototipo. Clase propia para no depender de .button del tema, que
   arrastra su propio color negro en hover. */
.dst-cta{
	display:inline-flex;align-items:center;gap:10px;
	padding:17px 30px;border-radius:999px;
	font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
	text-decoration:none;border:1px solid transparent;
	transition:transform .28s,box-shadow .28s,border-color .28s,background .28s;
}
.dst-cta--rosa{
	background:var(--dst-rosa,#B96B70);color:#FFFFFF;
	box-shadow:0 12px 28px rgba(185,107,112,.34);
}
.dst-cta--rosa:hover{
	background:var(--dst-rosa-oscuro,#9E4F55);color:#FFFFFF;
	transform:translateY(-3px);box-shadow:0 18px 36px rgba(185,107,112,.44);
}
.dst-cta--linea{
	background:#FFFFFF;border-color:#D9CFC2;color:var(--dst-oscuro,#2C2427);
	padding:17px 28px;
}
.dst-cta--linea:hover{
	border-color:var(--dst-rosa,#B96B70);color:var(--dst-rosa-oscuro,#9E4F55);
	transform:translateY(-3px);
}

.dst-hero__pastillas{
	list-style:none;margin:0;padding:0 0 4px;
	display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;
}
.dst-hero__pastillas::-webkit-scrollbar{display:none}
.dst-hero__pastillas li{
	flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;
	background:#FFFFFF;border:1px solid var(--dst-nude,#E8D8D2);
	border-radius:999px;padding:8px 14px;
	font-size:12.5px;color:var(--dst-texto,#6E5A60);
}
.dst-hero__pastillas svg{color:var(--dst-rosa,#B96B70);flex-shrink:0}

/* Media */
.dst-hero__media{position:relative}
.dst-hero__marco{
	border-radius:36px;overflow:hidden;background:#F5EBE6;
	box-shadow:0 30px 60px rgba(44,36,39,.16);
}
.dst-hero__marco .dst-hero__img,
.dst-hero__marco img{
	display:block;width:100%;height:min(72vh,620px);object-fit:cover;
}

/* Sello: ARRIBA A LA DERECHA, disco oscuro, texto rosa claro */
.dst-sello{
	position:absolute;
	right:clamp(-6px,-1vw,4px);
	top:clamp(14px,2.4vw,30px);
	left:auto;bottom:auto;
	width:clamp(88px,11vw,118px);height:clamp(88px,11vw,118px);
	display:grid;place-items:center;pointer-events:none;
	filter:drop-shadow(0 10px 24px rgba(44,36,39,.28));
}
.dst-sello::before{content:none}
.dst-sello__disco{
	position:absolute;inset:0;width:100%;height:100%;
	animation:dst-girar 26s linear infinite;
}
.dst-sello__texto{
	font-family:var(--em-font__main,'Outfit',sans-serif);
	font-size:7.4px;font-weight:500;letter-spacing:2.5px;
	fill:#E7A9AD;
}
.dst-sello__destello{position:relative;width:26%;height:auto;display:block}
@keyframes dst-girar{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.dst-sello__disco{animation:none}}

/* Tarjeta flotante del producto */
.dst-hero__tarjeta{
	position:absolute;
	left:clamp(-8px,-1vw,0px);
	bottom:clamp(18px,3vw,42px);
	background:#FFFFFF;border-radius:22px;padding:14px 18px;
	box-shadow:0 18px 34px rgba(44,36,39,.18);
	display:flex;align-items:center;gap:13px;
	text-decoration:none;color:inherit;
	animation:dst-flotar 5.5s ease-in-out infinite;
	transition:transform .25s;
}
.dst-hero__tarjeta:hover{transform:translateY(-3px);color:inherit}
.dst-hero__tarjeta-foto{
	width:44px;height:44px;border-radius:14px;object-fit:cover;flex:0 0 auto;display:block;
}
.dst-hero__tarjeta-nombre{
	display:block;font-size:13.5px;font-weight:500;line-height:1.2;color:var(--dst-oscuro,#2C2427);
	max-width:16ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.dst-hero__tarjeta-dato{display:block;font-size:11.5px;color:var(--dst-apagado,#7A666D);margin-top:3px}
.dst-hero__tarjeta-precio,
.dst-hero__tarjeta-precio .amount{
	font-size:15px;font-weight:600;color:var(--dst-rosa-oscuro,#9E4F55);margin-left:6px;white-space:nowrap;
}
@keyframes dst-flotar{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@media (prefers-reduced-motion:reduce){.dst-hero__tarjeta{animation:none}}

@media (max-width:768px){
	.dst-hero__marco .dst-hero__img,
	.dst-hero__marco img{height:min(56vh,440px)}
	.dst-hero__tarjeta{left:8px;bottom:12px;padding:11px 14px;gap:10px}
	.dst-hero__tarjeta-foto{width:38px;height:38px;border-radius:12px}
	.dst-sello{right:6px;top:10px}
}


/* ═══════════════════════════════════════════════════════════════════
   CONSTRUCTOR DE PACKS
   ═══════════════════════════════════════════════════════════════════ */
.dst-constructor{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
	gap:clamp(26px,3.4vw,52px);
	align-items:start;
	margin-top:clamp(22px,3vw,34px);
}

/* Niveles */
/* Rejilla de tres, no flex: con flex-wrap la tercera tarjeta se descolgaba
   sola a todo lo ancho en cuanto la columna se estrechaba, y quedaban dos
   arriba y una gigante debajo. */
.dst-constructor__objetivos{
	display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
	gap:12px;margin-bottom:26px;
}
@media (max-width:520px){
	.dst-constructor__objetivos{grid-template-columns:minmax(0,1fr)}
}
/* Los niveles y los aromas son <button>, así que heredan todo lo que el tema
   pone a los botones: fondo rosa al pasar el ratón, texto blanco, radio de
   pastilla y overflow:hidden. Se apaga aquí, en todos los estados, porque
   son tarjetas, no botones. Sin esto la tarjeta seleccionada se ponía rosa
   oscuro y "20 % menos" desaparecía. */
.dst-objetivo{
	position:relative;min-width:0;
	background:#FFFFFF;border:1px solid var(--dst-nude,#E8D8D2);
	border-radius:20px;padding:12px 14px 14px;cursor:pointer;font-family:inherit;
	text-align:left;color:var(--dst-oscuro,#2C2427);
	overflow:visible;                 /* la insignia sobresale por arriba */
	transition:border-color .25s,transform .25s,box-shadow .25s,background .25s;
}
.dst-objetivo:hover,
.dst-objetivo:focus,
.dst-objetivo:focus-visible,
.dst-objetivo:active{
	background:#FFFFFF;color:var(--dst-oscuro,#2C2427);
	border-color:var(--dst-rosa,#B96B70);
}
.dst-objetivo:hover{transform:translateY(-3px)}
.dst-objetivo:focus-visible{outline:2px solid var(--dst-rosa-oscuro,#9E4F55);outline-offset:2px}

/* Seleccionado: se tiñe muy suave y se marca el borde. Nunca se oscurece el
   fondo, porque encima van tres textos de colores distintos. */
.dst-objetivo--activo,
.dst-objetivo--activo:hover,
.dst-objetivo--activo:focus{
	background:var(--dst-crema,#FBF6F2);
	border-color:var(--dst-rosa,#B96B70);
	box-shadow:0 0 0 3px rgba(185,107,112,.18);
}
.dst-objetivo__insignia{
	position:absolute;top:-9px;right:12px;
	background:var(--dst-rosa,#B96B70);color:#fff;
	border-radius:999px;padding:3px 10px;
	font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
}
.dst-objetivo__foto{
	display:block;border-radius:14px;overflow:hidden;
	background:var(--dst-crema-3,#F5EBE6);aspect-ratio:4/3;margin-bottom:10px;
}
.dst-objetivo__foto img{width:100%;height:100%;object-fit:cover;display:block}
.dst-objetivo__nombre{display:block;font-size:13.5px;font-weight:500;color:var(--dst-oscuro,#2C2427);line-height:1.3}
/* Jerarquía: manda el precio, que es lo que se paga; el porcentaje acompaña.
   Estaba al revés —18 px para el "10 % menos" y 11,5 para el precio—, así que
   la cifra concreta parecía una nota al pie. */
.dst-objetivo__ahorro{
	display:inline-block;
	background:var(--dst-crema-3,#F5EBE6);
	color:var(--dst-rosa-oscuro,#9E4F55);
	border-radius:999px;padding:3px 9px;
	font-size:11.5px;font-weight:600;letter-spacing:.01em;
	margin-top:6px;
}
.dst-objetivo__desde{
	display:flex;align-items:baseline;gap:5px;
	margin-top:6px;flex-wrap:wrap;
}
.dst-objetivo__desde-eti{
	font-size:11px;font-weight:400;color:var(--dst-texto,#6E5A60);
}
.dst-objetivo__precio{
	font-size:19px;font-weight:700;letter-spacing:-.02em;line-height:1.1;
	color:var(--dst-oscuro,#2C2427);
}

/* Rail de aromas */
.dst-constructor__cabecera{
	display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
	gap:8px 16px;margin-bottom:10px;
}
.dst-constructor__titulo{
	font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
	color:var(--dst-rosa-oscuro,#9E4F55);font-weight:500;
}
.dst-constructor__pista{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--dst-apagado,#7A666D)}
.dst-constructor__pista svg{color:var(--dst-rosa,#B96B70);animation:dst-empujar 1.9s ease-in-out infinite}
@keyframes dst-empujar{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
@media (prefers-reduced-motion:reduce){.dst-constructor__pista svg{animation:none}}

.dst-constructor__rail{
	display:flex;gap:12px;overflow-x:auto;
	padding:10px 2px 14px;scroll-snap-type:x proximity;scrollbar-width:thin;
}
.dst-aroma{
	position:relative;flex:0 0 auto;width:148px;scroll-snap-align:start;
	background:#FFFFFF;border:1px solid var(--dst-nude,#E8D8D2);
	border-radius:20px;padding:10px;
	transition:border-color .25s,box-shadow .25s,transform .25s,opacity .25s;
}
.dst-aroma--elegido{
	border-color:var(--dst-rosa,#B96B70);
	box-shadow:0 0 0 3px rgba(185,107,112,.14);
	transform:translateY(-2px);
}
.dst-aroma--bloqueado:not(.dst-aroma--elegido){opacity:.42}
.dst-aroma--bloqueado .dst-aroma__sumar{cursor:not-allowed}
.dst-aroma__sumar{
	display:block;width:100%;padding:0;
	font:inherit;text-align:left;cursor:pointer;
	background:transparent;border:0;border-radius:0;overflow:visible;
	color:var(--dst-oscuro,#2C2427);box-shadow:none;
}
.dst-aroma__sumar:hover,
.dst-aroma__sumar:focus,
.dst-aroma__sumar:focus-visible,
.dst-aroma__sumar:active{
	background:transparent;color:var(--dst-oscuro,#2C2427);
	border:0;border-radius:0;box-shadow:none;
}
.dst-aroma__sumar:focus-visible{outline:2px solid var(--dst-rosa-oscuro,#9E4F55);outline-offset:3px}
.dst-aroma__foto{display:block;border-radius:14px;overflow:hidden;background:var(--dst-crema-3,#F5EBE6);aspect-ratio:1}
.dst-aroma__foto img{width:100%;height:100%;object-fit:cover;display:block}
.dst-aroma__nombre{
	display:block;font-size:12.5px;font-weight:500;line-height:1.3;
	color:var(--dst-oscuro,#2C2427);margin-top:9px;
	display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em;
}
/* El botón − vive en la esquina inferior derecha. Al precio no le basta con
   un padding: su caja seguiría ocupando todo el ancho y pisándolo. Se acorta
   la caja para que termine antes de donde empieza el botón. */
.dst-aroma__dato{
	display:block;font-size:11.5px;color:var(--dst-apagado,#7A666D);
	margin-top:2px;width:calc(100% - 40px);
}
.dst-aroma__dato .amount{color:var(--dst-rosa-oscuro,#9E4F55);font-weight:600}
/* Contador: una etiqueta pequeña sobre la esquina de la foto, del mismo
   lenguaje que la insignia de los niveles. Antes era un círculo grande que
   se salía de la tarjeta y tapaba. */
.dst-aroma__veces{
	position:absolute;top:4px;right:4px;z-index:2;
	background:var(--dst-rosa,#B96B70);color:#fff;
	border-radius:999px;min-width:20px;height:20px;
	display:inline-flex;align-items:center;justify-content:center;
	font-size:10.5px;font-weight:600;letter-spacing:.02em;padding:0 6px;
	box-shadow:0 3px 8px rgba(44,36,39,.22);
}
/* padding:0 es obligatorio: el tema pone 17px 30px a todos los botones y,
   con box-sizing:border-box, eso ensanchaba este de 26 a 62 px y se comía
   la línea del precio. */
.dst-aroma__menos{
	position:absolute;right:10px;bottom:10px;z-index:2;
	width:26px;height:26px;padding:0;line-height:1;
	border:1px solid var(--dst-nude,#E8D8D2);
	border-radius:999px;overflow:visible;
	background:#FFFFFF;color:var(--dst-oscuro,#2C2427);
	font-size:15px;line-height:1;cursor:pointer;font-family:inherit;
	display:inline-flex;align-items:center;justify-content:center;
	transition:background .2s,color .2s,border-color .2s;
}
.dst-aroma__menos:hover,
.dst-aroma__menos:focus-visible{background:var(--dst-rosa-oscuro,#9E4F55);color:#fff;border-color:var(--dst-rosa-oscuro,#9E4F55)}

/* Resumen */
.dst-constructor__resumen{
	background:#FFFFFF;border:1px solid var(--dst-nude,#E8D8D2);
	border-radius:28px;padding:clamp(20px,2.6vw,32px);
	box-shadow:0 20px 44px rgba(44,36,39,.08);
	position:sticky;top:100px;
}
.dst-resumen__cabecera{
	display:flex;justify-content:space-between;align-items:baseline;gap:14px;
	padding-bottom:16px;border-bottom:1px solid #F2E4DF;
}
.dst-resumen__titulo{font-weight:600;font-size:18px;color:var(--dst-oscuro,#2C2427)}
.dst-resumen__contador{font-size:13px;color:var(--dst-apagado,#7A666D)}
.dst-resumen__contador--lleno{color:var(--dst-rosa-oscuro,#9E4F55);font-weight:600}

.dst-resumen__lista{
	list-style:none;margin:0;padding:16px 0 0;
	display:flex;flex-direction:column;gap:10px;
}
.dst-resumen__lista li{
	display:flex;align-items:center;justify-content:space-between;gap:12px;
	background:var(--dst-crema,#FBF6F2);border-radius:16px;padding:10px 14px;
	font-size:14px;font-weight:500;color:var(--dst-oscuro,#2C2427);
}
.dst-resumen__lista li span:last-child{font-size:13px;font-weight:400;color:var(--dst-apagado,#7A666D);flex:0 0 auto}
.dst-resumen__vacio{font-size:14px;color:var(--dst-apagado,#7A666D);padding:14px 0;margin:0;line-height:1.6}

.dst-resumen__cifras{
	display:flex;justify-content:space-between;align-items:baseline;gap:14px;
	padding:16px 0;margin-top:6px;border-top:1px solid #F2E4DF;
}
.dst-resumen__importe{
	margin:0;font-weight:600;font-size:28px;letter-spacing:-.03em;
	color:var(--dst-oscuro,#2C2427);
}
.dst-resumen__ahorro{margin:2px 0 0;font-size:13px;color:var(--dst-rosa-oscuro,#9E4F55)}
.dst-resumen__medidas{margin:0;font-size:13px;color:var(--dst-apagado,#7A666D);text-align:right;line-height:1.5}

.dst-resumen__cta{width:100%;justify-content:center;border:0;cursor:pointer;font-family:inherit}
/* Deshabilitado tiene que verse apagado PERO leerse. Con opacity:.45 sobre
   el rosa de marca el texto blanco se quedaba en 3,9 y encima medio
   transparente. Se cambia por un gris de marca: se lee (4,6) y nadie lo
   confunde con un botón activo. */
.dst-resumen__cta:disabled,
.dst-resumen__cta:disabled:hover{
	opacity:1;cursor:not-allowed;transform:none;box-shadow:none;
	background:var(--dst-nude,#E8D8D2);color:var(--dst-texto,#6E5A60);
	border-color:var(--dst-nude,#E8D8D2);
}
.dst-resumen__nota{
	display:flex;align-items:center;gap:8px;margin:14px 0 0;
	font-size:12.5px;color:var(--dst-apagado,#7A666D);
}
.dst-resumen__nota svg{color:var(--dst-rosa,#B96B70);flex-shrink:0}

@media (max-width:860px){
	.dst-constructor__resumen{position:static}
}

/* Ajustes del constructor, ya sin !important: la causa real de que la foto
   no se viera y de que el nombre no se recortara era el `button` global con
   radio de pastilla y overflow:hidden, corregido en custom.css. */
.dst-constructor .dst-objetivo{display:block;flex-direction:initial}
.dst-constructor .dst-objetivo > span{display:block;width:100%}
/* La insignia también es hija directa, así que la regla de arriba la estiraba
   a todo el ancho y quedaba una barra rosa en vez de una etiqueta. Hay que
   igualar la especificidad, no confiar en el orden. */
.dst-constructor .dst-objetivo > span.dst-objetivo__insignia,
.dst-constructor .dst-objetivo > span.dst-objetivo__ahorro{
	display:inline-block;width:auto;
}
.dst-constructor .dst-objetivo > span.dst-objetivo__desde{display:flex;width:auto}
.dst-constructor .dst-aroma__sumar{display:block;width:100%}

/* Sitio para el − sin que pise el nombre ni el precio. */
.dst-constructor .dst-aroma{padding:10px 12px 44px}

/* La insignia "La más pedida" sobresale por arriba: hay que dejarle hueco
   para que no choque contra el borde de la sección. */
.dst-constructor__objetivos{padding-top:14px}
.dst-constructor__rail{padding-top:6px}

/* ── Fotos en las tarjetas de eventos ─────────────────────────────
   La sección era solo texto: no enseñaba ni uno de los detalles de
   los que habla. */
.dst-evento__fotos{
	display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
	gap:8px;margin-bottom:20px;
}
.dst-evento__foto{
	display:block;border-radius:14px;overflow:hidden;
	background:var(--dst-crema-3,#F5EBE6);aspect-ratio:1;
}
.dst-evento__foto img{
	width:100%;height:100%;object-fit:cover;display:block;
	transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.dst-evento:hover .dst-evento__foto img{transform:scale(1.05)}
@media (max-width:420px){
	.dst-evento__fotos{gap:6px;margin-bottom:16px}
}

/* En la portada se enseñan 10 productos. En un móvil de 375 px eso son cinco
   filas de dos y 2.258 px de scroll sólo en esa sección: en el móvil se
   quedan seis, que siguen siendo tres filas, y el resto está a un toque en
   "Ver toda la tienda", que ya está arriba de la sección. Se ocultan por CSS
   y no por PHP porque el servidor no sabe el ancho de la pantalla; al ir con
   display:none el navegador tampoco descarga sus fotos, que van en lazy. */
@media (max-width:575px){
	.dst-catalogo ul.products > li.product:nth-child(n+7){display:none}
}

/* La caja de otoño se anuncia sin poder entrar todavía: el bloque es un div,
   no un enlace, así que no debe comportarse como si se pudiera pulsar. */
.dst-destacada--sin-enlace{cursor:default}
.dst-destacada--sin-enlace:hover{transform:none;box-shadow:none}
.dst-destacada__cifra--proximamente{
	font-family:var(--dst-cuerpo);font-weight:600;
	font-size:clamp(16px,2vw,20px);letter-spacing:.08em;text-transform:uppercase;
}

/* ============================================================
   ASISTENTE DEL PACK PERSONALIZADO
   ============================================================
   Recorrido de tres pasos del prototipo (1-tienda-y-portada.dc.html:225).
   Medidas y colores tomados de allí; los números de precio salen del
   catálogo, no de la maqueta.                                             */
.dst-asistente{
	position:fixed;inset:0;z-index:1200;
	display:flex;align-items:center;justify-content:center;padding:16px;
}
.dst-asistente[hidden]{display:none}
body.dst-asistente-abierto{overflow:hidden}

.dst-asistente__fondo{
	position:absolute;inset:0;
	background:rgba(44,36,39,.6);backdrop-filter:blur(4px);
}
.dst-asistente__caja{
	position:relative;z-index:1;
	background:var(--dst-crema,#FBF6F2);border-radius:28px;
	max-width:900px;width:100%;max-height:92vh;
	display:flex;flex-direction:column;overflow:hidden;
	box-shadow:0 40px 90px rgba(44,36,39,.42);
}

/* ---- Cabecera ---- */
.dst-asistente__cabecera{
	padding:20px clamp(20px,3vw,32px) 0;position:relative;flex:0 0 auto;
}
.dst-asistente__cerrar{
	position:absolute;right:18px;top:16px;
	width:34px;height:34px;border-radius:999px;border:0;
	background:var(--dst-crema-3,#F5EBE6);color:var(--dst-oscuro,#2C2427);
	font-family:inherit;font-size:16px;line-height:1;cursor:pointer;
}
.dst-asistente__cerrar:hover{background:var(--dst-nude,#E8D8D2)}
.dst-asistente__titulo{
	font-family:var(--dst-titulo,'Prata',Georgia,serif);font-weight:400;
	font-size:clamp(19px,2.2vw,26px);line-height:1.2;max-width:22ch;
	color:var(--dst-oscuro,#2C2427);margin:0 44px 0 0;
}
.dst-asistente__sub{font-size:13.5px;color:var(--dst-texto,#6E5A60);margin:6px 0 0}

.dst-asistente__pasos{
	list-style:none;margin:18px 0 4px;padding:0;
	display:flex;align-items:center;gap:10px;
}
.dst-asistente__paso{
	flex:1;display:flex;align-items:center;gap:9px;min-width:0;
}
.dst-asistente__numero{
	flex:0 0 auto;width:26px;height:26px;border-radius:999px;
	display:flex;align-items:center;justify-content:center;
	font-size:12px;font-weight:600;
	background:#EFE0DA;color:var(--dst-apagado,#7A666D);
	transition:background .25s,color .25s;
}
.dst-asistente__paso.esta-activo .dst-asistente__numero,
.dst-asistente__paso.esta-hecho .dst-asistente__numero{
	background:var(--dst-rosa,#B96B70);color:#FFFFFF;
}
.dst-asistente__etiqueta{
	font-size:12.5px;color:var(--dst-apagado,#7A666D);
	white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.dst-asistente__paso.esta-activo .dst-asistente__etiqueta{
	font-weight:600;color:var(--dst-oscuro,#2C2427);
}
.dst-asistente__pista{
	height:4px;border-radius:999px;background:#EFE0DA;overflow:hidden;margin-bottom:18px;
}
.dst-asistente__relleno{
	display:block;height:100%;border-radius:999px;
	background:linear-gradient(90deg,#C07C81,var(--dst-rosa,#B96B70));
	width:33%;transition:width .45s cubic-bezier(.16,.8,.3,1);
}

/* ---- Cuerpo ---- */
.dst-asistente__cuerpo{
	flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;
	padding:0 clamp(20px,3vw,32px) 8px;
}
.dst-asistente__rejilla{
	display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,140px),1fr));
	gap:12px;
}
.dst-asistente__rejilla--detalle{
	grid-template-columns:repeat(auto-fill,minmax(min(100%,160px),1fr));
}

/* display:block es obligatorio. El tema pone todos los <button> en
   display:flex con dirección fila (Ecomus), y eso aplastaba la foto de cada
   opción a 23×23 px con el texto al lado, en vez de la tarjeta con la foto
   arriba que pide el prototipo. Medido antes de tocarlo. El selector lleva
   .dst-asistente delante sólo para ganarle a esa regla del tema. */
.dst-asistente .dst-opcion{
	display:block;
	text-align:left;background:rgba(255,255,255,.6);
	border:1px solid var(--dst-nude,#E8D8D2);border-radius:20px;padding:10px;
	font-family:inherit;cursor:pointer;width:100%;
	transition:border-color .22s,transform .22s,box-shadow .22s;
}
.dst-asistente .dst-opcion:hover{border-color:var(--dst-rosa,#B96B70)}
.dst-asistente .dst-opcion.esta-elegido{
	background:#FFFFFF;border:2px solid var(--dst-rosa,#B96B70);
	padding:9px;transform:translateY(-3px);
	box-shadow:0 10px 22px rgba(185,107,112,.18);
}
.dst-opcion__foto{
	position:relative;display:block;border-radius:16px;overflow:hidden;
	aspect-ratio:1;background:var(--dst-crema-3,#F5EBE6);
}
.dst-opcion__foto img{width:100%;height:100%;object-fit:cover;display:block}
.dst-opcion__foto--vacia{
	display:flex;align-items:center;justify-content:center;color:var(--dst-rosa-oscuro,#9E4F55);
}
.dst-opcion__foto--vacia svg{width:34%;height:34%}
.dst-opcion__marca{
	position:absolute;right:7px;top:7px;
	width:24px;height:24px;border-radius:999px;
	background:var(--dst-rosa,#B96B70);color:#FFFFFF;
	display:none;align-items:center;justify-content:center;
	font-size:13px;font-weight:600;line-height:1;
}
.dst-opcion.esta-elegido .dst-opcion__marca{display:flex}
.dst-opcion__nombre{
	display:block;font-size:13px;font-weight:500;margin-top:8px;line-height:1.25;
	color:var(--dst-oscuro,#2C2427);
}
.dst-opcion__pie{
	display:block;font-size:12px;color:var(--dst-apagado,#7A666D);margin-top:2px;
}
.dst-opcion__pie .woocommerce-Price-amount{font-size:12px;color:inherit}

.dst-asistente__mensaje{display:block;margin:16px 0 4px}
.dst-asistente__mensaje[hidden]{display:none}
.dst-asistente__mensaje > span{
	display:block;font-size:12px;font-weight:500;
	color:var(--dst-texto,#6E5A60);margin-bottom:7px;
}
.dst-asistente__mensaje textarea{
	width:100%;border:1px solid var(--dst-nude,#E8D8D2);border-radius:18px;
	padding:12px 16px;font-family:inherit;font-size:14px;
	box-sizing:border-box;resize:vertical;line-height:1.5;
	background:#FFFFFF;color:var(--dst-oscuro,#2C2427);
}

/* ---- Pie ---- */
.dst-asistente__pie{
	flex:0 0 auto;
	border-top:1px solid var(--dst-nude,#E8D8D2);background:#FFFFFF;
	padding:16px clamp(20px,3vw,32px);
	display:flex;flex-wrap:wrap;align-items:center;gap:12px;
}
.dst-asistente__atras{
	background:none;border:1px solid #D9C6BF;border-radius:999px;
	padding:13px 22px;font-family:inherit;font-size:12px;font-weight:500;
	letter-spacing:.06em;text-transform:uppercase;
	color:var(--dst-oscuro,#2C2427);cursor:pointer;
}
.dst-asistente__atras[hidden]{visibility:hidden;display:block}
.dst-asistente__atras:hover{border-color:var(--dst-rosa,#B96B70)}
.dst-asistente__cifras{flex:1;text-align:center;min-width:120px;margin:0}
.dst-asistente__resumen{display:block;font-size:12px;color:var(--dst-apagado,#7A666D)}
.dst-asistente__total{
	display:block;font-family:var(--dst-titulo,'Prata',Georgia,serif);
	font-size:clamp(18px,2vw,24px);color:var(--dst-rosa-oscuro,#9E4F55);line-height:1.2;
}
.dst-asistente__adelante{
	background:var(--dst-rosa,#B96B70);color:#FFFFFF;border:0;border-radius:999px;
	padding:14px 26px;font-family:inherit;font-size:12px;font-weight:600;
	letter-spacing:.08em;text-transform:uppercase;cursor:pointer;
	transition:background .22s,transform .22s;
}
.dst-asistente__adelante:hover:not(:disabled){background:var(--dst-rosa-oscuro,#9E4F55)}
.dst-asistente__adelante:disabled{
	background:var(--dst-nude,#E8D8D2);color:#A08E92;cursor:not-allowed;
}

/* ---- Móvil ----------------------------------------------------------
   A pantalla completa: en 375 px una tarjeta flotante con 16 px de aire a
   cada lado deja 343 para elegir entre seis quemadores y catorce aromas, y
   obliga a hacer scroll dentro de un scroll. A pantalla completa se ve el
   doble de opciones y el pie queda fijo abajo, al alcance del pulgar.    */
@media (max-width:575px){
	.dst-asistente{padding:0;align-items:stretch}
	.dst-asistente__caja{
		max-width:none;max-height:none;height:100%;border-radius:0;
	}
	.dst-asistente__cabecera{padding:16px 16px 0}
	.dst-asistente__titulo{font-size:20px;margin-right:40px}
	.dst-asistente__cerrar{right:12px;top:12px}
	.dst-asistente__cuerpo{padding:0 16px 8px}
	.dst-asistente__pasos{gap:6px;margin:14px 0 4px}
	.dst-asistente__numero{width:22px;height:22px;font-size:11px}
	.dst-asistente__etiqueta{font-size:11.5px}
	.dst-asistente__paso{gap:6px}
	.dst-asistente__rejilla,
	.dst-asistente__rejilla--detalle{
		grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;
	}
	.dst-asistente .dst-opcion{padding:8px;border-radius:16px}
	.dst-asistente .dst-opcion.esta-elegido{padding:7px}
	.dst-opcion__nombre{font-size:12.5px;margin-top:7px}
	.dst-opcion__pie{font-size:11.5px}

	/* El pie manda: es donde está el precio y el botón de seguir. Se queda
	   pegado abajo y en una sola fila para no comerse la lista. */
	.dst-asistente__pie{
		padding:12px 16px calc(12px + env(safe-area-inset-bottom));
		gap:10px;flex-wrap:nowrap;
	}
	.dst-asistente__atras{padding:12px 14px;font-size:11px;letter-spacing:.04em}
	.dst-asistente__cifras{min-width:0}
	.dst-asistente__resumen{
		font-size:11px;line-height:1.3;
		display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
	}
	.dst-asistente__total{font-size:19px}
	.dst-asistente__adelante{padding:13px 16px;font-size:11px;letter-spacing:.05em}
}