/* DCH Cupones — catalogo, ventana y pagina. Colores de DealClubHub. */
.dchc-catalogo, .dchc-oferta, .dchc-ventana, .dchc-mas-ofertas {
	--dchc-acento: #6C4BD1;
	--dchc-acento-osc: #5638B5;
	--dchc-acento-suave: #EDE7FB;
	--dchc-tinta: #1B1726;
	--dchc-tinta2: #4A4359;
	--dchc-gris: #6B6380;
	--dchc-borde: #E4DFF0;
	--dchc-fondo: #FBFAFD;
	--dchc-hundido: #F4F1FA;
	--dchc-azul: #1159AF;
	--dchc-azul-suave: #EDF3FB;
	--dchc-verde: #13612E;
	--dchc-verde-ok: #1E6B45;
	--dchc-verde-suave: #EDF6F0;
	--dchc-ambar: #8A5A0B;
	--dchc-ambar-suave: #FBF2E0;
	--dchc-rojo: #B42318; /* Adults Only: insignia 18+ y etiqueta */
	--dchc-titulos: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--dchc-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
	color: var(--dchc-tinta);
	box-sizing: border-box;
}
.dchc-catalogo *, .dchc-oferta *, .dchc-ventana *, .dchc-mas-ofertas * { box-sizing: border-box; }
.dchc-ico { flex: none; vertical-align: middle; }

/* ---------- catalogo ---------- */
.dchc-divulgacion { font-size: 13px; line-height: 1.45; color: var(--dchc-gris); margin: 0 0 8px; }
.dchc-divulgacion--arriba { margin-bottom: 16px; }
.dchc-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.dchc-filtro {
	min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--dchc-borde);
	background: #fff !important; color: var(--dchc-tinta) !important; font-family: inherit; font-size: 14.5px !important; font-weight: 600; line-height: 1; cursor: pointer;
}
.dchc-filtro[aria-pressed="true"] { background: var(--dchc-acento) !important; border-color: var(--dchc-acento) !important; color: #fff !important; }
.dchc-vacio { color: var(--dchc-gris); }
/* grid-auto-rows:1fr iguala TODAS las filas, no solo las tarjetas de una misma
   fila: si no, una tarjeta con titulo largo hace su fila mas alta y el catalogo
   se ve desparejo. */
/* Cinco por fila cuando hay sitio, como el diseno de la portada. Se mide el
   ancho del BLOQUE, no el de la pantalla: el mismo catalogo puede ir en una
   pagina ancha o dentro de una columna estrecha, y con menos de ~180px por
   tarjeta el nombre del producto deja de leerse. */
.dchc-catalogo, .dchc-mas-ofertas { container-type: inline-size; }
.dchc-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); grid-auto-rows: 1fr; gap: 16px; }
@container (min-width: 560px)  { .dchc-rejilla { grid-template-columns: repeat(3, 1fr); gap: 12px; } }
@container (min-width: 800px)  { .dchc-rejilla { grid-template-columns: repeat(4, 1fr); gap: 12px; } }
@container (min-width: 1000px) { .dchc-rejilla { grid-template-columns: repeat(5, 1fr); gap: 12px; } }
/* Seis por fila en la pagina ancha, como Koupon (ficha 15). A 1366px quedan tarjetas de 204px y
   "Reveal code" + el trozo de codigo siguen enteros. Va antes de .dchc-rejilla--4, que sigue en 4. */
@container (min-width: 1280px) { .dchc-rejilla { grid-template-columns: repeat(6, 1fr); } }
/* "More deals today": cuatro como mucho, para que no compita con el catalogo. */
.dchc-rejilla--4 { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
@container (min-width: 560px) { .dchc-rejilla--4 { grid-template-columns: repeat(3, 1fr); } }
@container (min-width: 800px) { .dchc-rejilla--4 { grid-template-columns: repeat(4, 1fr); } }

.dchc-card { background: #fff; border: 1px solid var(--dchc-borde); border-radius: 14px; overflow: hidden; display: flex; }
.dchc-card[hidden] { display: none; }
.dchc-card__link { display: flex; flex-direction: column; width: 100%; color: inherit; text-decoration: none; }
.dchc-card__link:hover .dchc-btn { background: var(--dchc-acento-osc); }
.dchc-card__link:focus-visible { outline: 3px solid #C9B9F5; outline-offset: -3px; border-radius: 14px; }
/* flex:none para que la foto nunca se encoja: si se encoge, cada tarjeta
   empieza el texto a una altura distinta y deja un hueco raro antes del boton. */
.dchc-card__media { position: relative; flex: none; aspect-ratio: 1 / 1; background: var(--dchc-hundido); display: flex; align-items: center; justify-content: center; padding: 16px; }
.dchc-card__img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.dchc-sinfoto { color: var(--dchc-gris); display: flex; align-items: center; justify-content: center; }
.dchc-insignia { position: absolute; top: 12px; left: 12px; background: var(--dchc-acento); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 6px 10px; border-radius: 7px; line-height: 1; }
.dchc-card__body { display: flex; flex-direction: column; gap: 7px; padding: 13px 14px 14px; flex: 1; }
.dchc-card__name { font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--dchc-tinta); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(1.4em * 3); }
/* Con cinco columnas la tarjeta es estrecha: se ajusta el boton para que
   "Reveal code" no se parta a la mitad. */
@container (min-width: 1000px) {
	.dchc-btn { font-size: 14.5px; padding: 0 10px; }
	.dchc-btn--reveal > span:first-child { flex-basis: 64%; }
	.dchc-asoma { font-size: 13px; letter-spacing: .04em; }
}

.dchc-precio { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px; }
.dchc-precio strong { font-size: 20px; font-weight: 700; color: var(--dchc-tinta); }
.dchc-precio s { font-size: 14px; color: var(--dchc-gris); }
.dchc-precio--grande { gap: 10px; }
.dchc-precio--grande strong { font-family: var(--dchc-titulos); font-size: 34px; letter-spacing: -.02em; line-height: 1.1; }
.dchc-precio--grande s { font-size: 18px; }
.dchc-con { font-size: 12.5px; font-weight: 700; color: var(--dchc-acento-osc); }
.dchc-precio--grande .dchc-con { font-size: 16px; }
.dchc-con--coupon { color: var(--dchc-azul); }

.dchc-fila { display: flex; }
.dchc-etiqueta { background: var(--dchc-acento); color: #fff; font-size: 12.5px; font-weight: 700; padding: 4px 9px; border-radius: 7px; }
.dchc-etiqueta--coupon { background: var(--dchc-azul); }
.dchc-etiqueta--deal { background: var(--dchc-verde); }
.dchc-etiqueta--adultos { background: var(--dchc-rojo); }
.dchc-oferta .dchc-etiqueta { font-size: 15.5px; padding: 7px 13px; border-radius: 9px; }
.dchc-sello-corto { font-size: 12px; color: var(--dchc-gris); }

.dchc-btn {
	margin-top: auto; display: flex; align-items: center; justify-content: center; min-height: 46px;
	background: var(--dchc-acento); color: #fff; border-radius: 10px; font-size: 15px; font-weight: 700; padding: 0 16px;
	transition: background .15s ease;
}
.dchc-btn--reveal { padding: 0; border: 1.5px dashed var(--dchc-acento); background: #fff; overflow: hidden; color: var(--dchc-tinta); }
.dchc-btn--reveal > span:first-child { flex: 0 0 70%; align-self: stretch; display: flex; align-items: center; justify-content: center; background: var(--dchc-acento); color: #fff; }
.dchc-card__link:hover .dchc-btn--reveal { background: #fff; }
.dchc-card__link:hover .dchc-btn--reveal > span:first-child { background: var(--dchc-acento-osc); }
.dchc-asoma { flex: 1; text-align: center; font-family: var(--dchc-mono); font-weight: 700; letter-spacing: .08em; }
.dchc-fila--codigo { margin-top: auto; gap: 8px; }
.dchc-fila--codigo .dchc-btn { margin-top: 0; }
.dchc-codigo-visible { flex: 1; min-height: 46px; display: flex; align-items: center; justify-content: center; border: 1.5px dashed var(--dchc-acento); border-radius: 10px; font-family: var(--dchc-mono); font-weight: 700; letter-spacing: .08em; }

/* ---------- la oferta (ventana y pagina) ---------- */
.dchc-oferta__cols { display: flex; gap: 28px; align-items: flex-start; }
.dchc-oferta__izq { width: 300px; flex: none; display: flex; flex-direction: column; gap: 16px; }
.dchc-oferta__der { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.dchc-oferta__media { position: relative; aspect-ratio: 1 / 1; border-radius: 14px; background: var(--dchc-hundido); display: flex; align-items: center; justify-content: center; padding: 22px; }
.dchc-oferta__img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.dchc-tienda { margin: 0; font-size: 13.5px; color: var(--dchc-gris); }
.dchc-tienda b { color: var(--dchc-tinta2); }
.dchc-oferta__titulo { margin: 0; font-family: var(--dchc-titulos); font-weight: 600; font-size: 22px; line-height: 1.3; color: var(--dchc-tinta); }
.dchc-pastilla { font-size: 14px; font-weight: 700; padding: 6px 12px; border-radius: 8px; }
.dchc-pastilla--vencido { background: var(--dchc-ambar-suave); color: var(--dchc-ambar); }
.dchc-nota { margin: 0; font-size: 13px; line-height: 1.45; color: var(--dchc-gris); }
.dchc-sello { align-self: flex-start; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent !important; padding: 0 !important; font-family: inherit; font-size: 13px !important; font-weight: 400; line-height: 1.4; color: var(--dchc-gris) !important; cursor: pointer; text-align: left; box-shadow: none !important; }
.dchc-aviso-precio { margin: 0; background: var(--dchc-hundido); border-radius: 10px; padding: 10px 12px; font-size: 12.5px; line-height: 1.5; color: var(--dchc-tinta2); }

.dchc-caja { border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.dchc-caja p { margin: 0; font-size: 14.5px; line-height: 1.5; }
.dchc-caja--code { border: 2px dashed var(--dchc-acento); background: var(--dchc-fondo); }
.dchc-caja--coupon { border: 1px solid #C9DBF2; background: var(--dchc-azul-suave); }
.dchc-caja--deal { border: 1px solid #C8E3D2; background: var(--dchc-verde-suave); }
.dchc-caja--vencido { border: 1px solid #EEDDBD; background: #FBF5EA; }
.dchc-caja--code { position: relative; padding: 22px 16px; }
/* Tijera sobre la linea de puntos, como los cupones de recortar del periodico: el fondo tapa la linea (blanco fuera, el de la caja dentro). */
.dchc-tijera { position: absolute; top: -13px; right: 20px; height: 24px; padding: 0 4px; display: flex; align-items: center; color: var(--dchc-acento); background: linear-gradient(#fff 50%, var(--dchc-fondo) 50%); pointer-events: none; }
.dchc-tijera .dchc-ico { transform: scaleX(-1); }
/* Al pasar el raton por la caja, la tijera corta dos veces: cada mitad gira sobre el eje (el centro del dibujo). */
.dchc-tijera__a, .dchc-tijera__b { transform-box: view-box; transform-origin: 50% 50%; }
.dchc-caja--code:hover .dchc-tijera__a { animation: dchc-corte-a .3s ease-in-out 2; }
.dchc-caja--code:hover .dchc-tijera__b { animation: dchc-corte-b .3s ease-in-out 2; }
@keyframes dchc-corte-a { 50% { transform: rotate(-25deg); } }
@keyframes dchc-corte-b { 50% { transform: rotate(25deg); } }
@media (prefers-reduced-motion: reduce) {
	.dchc-caja--code:hover .dchc-tijera__a, .dchc-caja--code:hover .dchc-tijera__b { animation: none; }
}
.dchc-caja__fila { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; text-align: center; }
.dchc-codigo { font-family: var(--dchc-mono); font-size: 34px; line-height: 1.1; font-weight: 700; letter-spacing: .12em; color: var(--dchc-tinta); overflow-wrap: anywhere; }
.dchc-pronto { display: inline-flex; align-items: center; gap: 5px; background: var(--dchc-ambar-suave); color: var(--dchc-ambar); font-size: 12.5px; font-weight: 700; padding: 5px 10px; border-radius: 999px; }
.dchc-verif { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0; font-size: 13px !important; font-weight: 600; color: var(--dchc-verde-ok); }
.dchc-caja--coupon .dchc-verif { color: var(--dchc-azul); }
.dchc-verif__votos { font-weight: 400; color: var(--dchc-gris); }

.dchc-accion { display: flex; flex-direction: column; gap: 8px; }
.dchc-cta {
	min-height: 54px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 18px;
	background: var(--dchc-acento); color: #fff !important; border-radius: 12px; font-size: 16.5px; font-weight: 700; text-decoration: none;
	transition: background .15s ease;
}
.dchc-cta:hover { background: var(--dchc-acento-osc); }
.dchc-cta:focus-visible { outline: 3px solid #C9B9F5; outline-offset: 2px; }
.dchc-cta.is-copiado { background: var(--dchc-verde-ok); }
.dchc-cta--suave { background: #fff; color: var(--dchc-acento-osc) !important; border: 1.5px solid var(--dchc-acento); }
.dchc-cta--suave:hover { background: var(--dchc-acento-suave); }

.dchc-pasos__tit { margin: 0 0 8px; font-family: var(--dchc-titulos); font-weight: 600; font-size: 15px; }
.dchc-pasos ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.45; color: var(--dchc-tinta2); }
/* Pasos del codigo: en el movil Amazon lo pide dentro de "Pay with" (29 sep 2026). */
@media (max-width: 720px) { .dchc-pasos ol.dchc-pasos__escritorio { display: none; } }
@media (min-width: 721px) { .dchc-pasos ol.dchc-pasos__movil { display: none; } }
.dchc-pasos-texto { margin: 0; font-size: 14px; line-height: 1.5; color: var(--dchc-tinta2); }
.dchc-nota-variacion { margin: 0; background: var(--dchc-hundido); border-radius: 10px; padding: 10px 12px; font-size: 13px; line-height: 1.45; color: var(--dchc-tinta2); }
.dchc-mas { font-size: 14px; font-weight: 600; color: var(--dchc-acento-osc); }

.dchc-votos { border-top: 1px solid #EFEBF7; padding-top: 12px; }
.dchc-votos__paso { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; }
.dchc-votos__paso[hidden] { display: none; }
.dchc-votos__paso[data-paso="gracias"] { flex-direction: column; align-items: flex-start; }
.dchc-votos__preg { font-size: 14.5px; font-weight: 600; }
.dchc-voto { min-height: 44px; display: inline-flex; align-items: center; gap: 7px; background: #fff !important; border: 1px solid var(--dchc-borde) !important; border-radius: 999px !important; padding: 0 16px !important; font-family: inherit; font-size: 14px !important; font-weight: 600; line-height: 1; color: var(--dchc-tinta) !important; cursor: pointer; box-shadow: none !important; }
.dchc-voto:hover { border-color: var(--dchc-acento) !important; background: var(--dchc-acento-suave) !important; color: var(--dchc-tinta) !important; }
.dchc-gracias { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14.5px; font-weight: 600; color: var(--dchc-verde-ok); }
.dchc-aun { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid var(--dchc-acento); border-radius: 10px; padding: 0 16px; font-weight: 600; color: var(--dchc-acento-osc); text-decoration: none; }
.dchc-aun[hidden] { display: none; }

/* ---------- pagina del producto ---------- */
.dchc-oferta--pagina { background: #fff; border: 1px solid var(--dchc-borde); border-radius: 16px; padding: 26px; margin: 0 0 24px; }
.dchc-sobre { margin: 0 0 24px; }
.dchc-mas-ofertas h2 { font-family: var(--dchc-titulos); font-size: 20px; margin: 32px 0 14px; }

/* ---------- la ventana ---------- */
.dchc-velo { position: fixed; inset: 0; background: rgba(27, 23, 38, .55); z-index: 99998; }
.dchc-velo[hidden], .dchc-ventana[hidden] { display: none; }
.dchc-ventana {
	position: fixed; z-index: 99999; top: 50%; left: 50%; transform: translate(-50%, -50%);
	width: min(860px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow-y: auto;
	background: #fff; border-radius: 20px; box-shadow: 0 24px 64px rgba(27, 23, 38, .28); padding: 24px 28px 28px;
}
.dchc-cerrar { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border-radius: 22px; border: 0 !important; background: #F4F1FA !important; color: #4A4359 !important; padding: 0 !important; box-shadow: none !important; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 1; }
.dchc-ventana .dchc-oferta__der { padding-right: 36px; }
.dchc-cargando { padding: 60px 0; text-align: center; color: #6B6380; }
body.dchc-abierta { overflow: hidden; }

@media (max-width: 720px) {
	.dchc-oferta__cols { flex-direction: column; gap: 16px; }
	.dchc-oferta__izq { width: 100%; }
	.dchc-oferta__media { aspect-ratio: auto; height: 200px; }
	.dchc-oferta--pagina { padding: 16px; }
	.dchc-precio--grande strong { font-size: 28px; }
	.dchc-codigo { font-size: 28px; }
	.dchc-ventana {
		top: auto; bottom: 0; left: 0; transform: none; width: 100%;
		max-height: 92vh; max-height: 92dvh; border-radius: 20px 20px 0 0; padding: 18px 18px 24px;
	}
	/* En el movil 92vh es mas alto que la pantalla con las barras del navegador y la X quedaba
	   tapada arriba; 92dvh mide lo que se ve. La X va pegada arriba aunque se baje por la ventana. */
	.dchc-cerrar { position: sticky; top: 0; right: auto; margin: 0 0 -44px auto; }
	.dchc-ventana .dchc-oferta__der { padding-right: 0; }
	.dchc-ventana .dchc-oferta__izq { order: 2; }
	.dchc-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.dchc-card__body { padding: 10px 12px 12px; }
	.dchc-card__name { font-size: 13px; }
	.dchc-precio strong { font-size: 17px; }
}

/* ---------- categorias, destacado y descripcion del producto (v0.2.0) ---------- */
.dchc-filtros + .dchc-filtros--cat { margin-top: -8px; }
.dchc-filtros--cat .dchc-filtro { font-weight: 500 !important; }
/* Con "All categories" + 7 categorias (8 chips) el ancho de 1240px se quedaba
   corto por unos 49px y "Office & Business" caia a una segunda linea. */
.dchc-filtros--cat { gap: 6px; }
.dchc-filtros--cat .dchc-filtro { padding: 0 14px; }
.dchc-cuenta { display: inline-block; margin-left: 6px; font-size: 12px; opacity: .65; }
.dchc-insignia--top { background: var(--dchc-verde); }
.dchc-insignia--adultos { background: var(--dchc-rojo); }

.dchc-quien { margin: 6px 0 0; font-size: 15.5px; line-height: 1.5; color: var(--dchc-tinta2); }

.dchc-sobre-producto { margin: 34px 0 0; padding: 22px 24px; background: #fff; border: 1px solid var(--dchc-borde); border-radius: 14px; }
.dchc-sobre-producto h2 { font-family: var(--dchc-titulos); font-size: 21px; margin: 0 0 4px; color: var(--dchc-tinta); }
.dchc-sobre-producto h3 { font-family: var(--dchc-titulos); font-size: 16px; margin: 18px 0 6px; color: var(--dchc-tinta); }
.dchc-sobre-producto p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--dchc-tinta2); }
.dchc-sobre-producto ul { margin: 0; padding-left: 20px; }
.dchc-sobre-producto li { margin: 6px 0; font-size: 16px; line-height: 1.55; color: var(--dchc-tinta2); }
.dchc-aviso-ia { margin: 18px 0 0 !important; padding-top: 12px; border-top: 1px solid var(--dchc-borde); font-size: 12.5px !important; color: var(--dchc-gris) !important; }
.dchc-aviso-ia--ventana { margin: 4px 0 0 !important; padding-top: 0; border-top: 0; font-size: 12px !important; }

@media (max-width: 720px) {
	.dchc-sobre-producto { padding: 18px 16px; border-radius: 12px; }
	.dchc-sobre-producto h2 { font-size: 19px; }
}

/* ancho="1": el catalogo se sale de la columna de texto del tema (Kadence la
   corta en 820px) y usa el ancho de la pagina, que es lo que pide el diseno
   de la portada. Nunca mas que la ventana.
   Ficha 15: un solo ancho de pagina para todo. En escritorio (desde 1100px) 1393px (27 sep,
   tres reducciones del 2% pedidas por Henderson en la misma sesion: 1552 -> 1450 -> 1421 -> 1393);
   ya no coincide con el borde de la cabecera de 1600px. Por debajo de 1100px, como antes
   (ventana - 40px). La franja de confianza y el boletin de la portada usan la misma variable. */
:root { --dchc-ancho: min(1240px, calc(100vw - 40px)); }
@media (min-width: 1100px) {
	:root { --dchc-ancho: min(1393px, calc(100vw - 48px)); }
}
.dchc-catalogo--ancho {
	width: var(--dchc-ancho);
	max-width: none;
	margin-left: 50%;
	transform: translateX(-50%);
}
/* Pagina de categoria (/deals/<slug>/): la plantilla propia no tiene la columna
   de Kadence y ocupaba toda la ventana (tarjetas de 275px). Mismo ancho que la
   portada y Promo Codes (1240px) y alineada con la fila de chips de arriba. */
.dchc-pagina-categoria { box-sizing: border-box; width: min(1240px, calc(100% - 40px)); margin-left: auto; margin-right: auto; }
@media (min-width: 1100px) { .dchc-pagina-categoria { width: var(--dchc-ancho); } }
/* Busqueda: mismas tarjetas y ancho que las categorias. */
.dchc-busqueda { padding-top: 24px; padding-bottom: 40px; overflow-wrap: anywhere; }
.dchc-busqueda__cabecera h1 { font-size: clamp(26px, 3vw, 40px); line-height: 1.2; margin: 0 0 12px; }
.dchc-busqueda__cabecera p { margin: 0 0 18px; }
.dchc-busqueda__enlaces { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0 0 20px; }
.dchc-busqueda__enlaces a, .dchc-busqueda__drops { display: inline-block; padding: 10px 14px; border-radius: 10px; background: #EDE7FB !important; color: #5638B5 !important; font-weight: 650; text-decoration: none !important; }
.dchc-busqueda__blog { margin-top: 32px; }
.dchc-busqueda__blog a { color: #5638B5 !important; background: transparent !important; }
.dchc-busqueda__enlaces a:focus-visible, .dchc-busqueda__drops:focus-visible, .dchc-busqueda__blog a:focus-visible { outline: 3px solid #6C4BD1; outline-offset: 3px; }

/* ---------- secciones de la portada (v0.3.0) ---------- */
/* Solo margen vertical: "margin: 44px 0" pisaba el margin-left del bloque
   ancho y la seccion se salia por la izquierda. */
.dchc-banda, .dchc-vencer, .dchc-cats, .dchc-ultimas { margin-top: 44px; margin-bottom: 44px; }
.dchc-sec__cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 16px; }
.dchc-sec__tit { font-family: var(--dchc-titulos); font-weight: 700; font-size: 24px; line-height: 1.2; color: var(--dchc-tinta); margin: 0; letter-spacing: -.015em; }
.dchc-sec__sub { font-size: 14.5px; color: var(--dchc-gris); margin: 5px 0 0; }
.dchc-sec__mas { font-size: 14.5px; font-weight: 600; color: var(--dchc-acento-osc); white-space: nowrap; text-decoration: none; }
.dchc-sec__sello { font-size: 12.5px; line-height: 1.5; color: var(--dchc-gris); margin: 0 0 14px; }
/* Kadence pone 32px debajo de cada <p> del contenido y pisaba estos margenes:
   los dos avisos van juntos, pegados a la rejilla. */
.dchc-catalogo .dchc-sec__cab + .dchc-divulgacion { margin: 0 0 2px; }
.dchc-catalogo .dchc-divulgacion:has(+ .dchc-filtros--cat) { margin: 0 0 16px; }
.dchc-catalogo .dchc-sec__sello { margin: 0 0 16px; }
/* Today's Drops: la seccion es lo primero de la pagina; el margen de 44px es para separar secciones en la portada. */
.entry-content > .dchc-ultimas:first-child { margin-top: 0; }
.dchc-card[data-dchc-oculta] { display: none; }

.dchc-mas-btn {
	display: block; margin: 22px auto 0; min-height: 48px; padding: 0 26px; border-radius: 999px;
	border: 1px solid var(--dchc-borde); background: #fff !important; color: var(--dchc-tinta) !important;
	font-family: inherit; font-size: 15px !important; font-weight: 700; cursor: pointer;
}
.dchc-mas-btn:hover { border-color: var(--dchc-acento); color: var(--dchc-acento-osc) !important; }
a.dchc-mas-btn { display: flex; align-items: center; width: fit-content; text-decoration: none !important; }

/* la banda de codigos va sobre color, como en el diseno */
.dchc-banda { background: var(--dchc-acento-suave); border-radius: 18px; padding: 26px 24px 28px; }
@media (min-width: 721px) {
	.home .dchc-banda { padding-left: 16px; padding-right: 16px; }
}
.dchc-comofunciona { margin: 24px 0 0; background: #fff; border-radius: 14px; padding: 18px 22px; }
.dchc-comofunciona h3 { font-family: var(--dchc-titulos); font-size: 16px; margin: 0 0 8px; color: var(--dchc-tinta); }
.dchc-comofunciona ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.dchc-comofunciona li { font-size: 14.5px; line-height: 1.5; color: var(--dchc-tinta2); }
@container (min-width: 800px) { .dchc-comofunciona ol { grid-template-columns: repeat(3, 1fr); gap: 18px; } }

/* tarjetas de categoria */
/* Flex y no grid: con 8 o 13 categorias la ultima fila queda corta, y asi
   las que sobran salen centradas en vez de pegadas a la izquierda. */
.dchc-cats__rejilla { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.dchc-cat { flex: 1 1 165px; max-width: 230px; }
.dchc-cat {
	display: flex; flex-direction: column; gap: 6px; min-height: 92px; justify-content: center;
	background: var(--dchc-acento-suave); border: 1px solid var(--dchc-borde); border-radius: 14px;
	padding: 16px 18px; color: inherit; text-decoration: none;
}
.dchc-cat:hover { border-color: var(--dchc-acento); }
.dchc-cat__nombre { font-family: var(--dchc-titulos); font-weight: 600; font-size: 15.5px; color: var(--dchc-tinta); }
.dchc-cat__mas { font-size: 13.5px; font-weight: 600; color: var(--dchc-acento-osc); }

@media (max-width: 720px) {
	.dchc-banda { padding: 20px 16px 22px; border-radius: 14px; }
	.dchc-sec__tit { font-size: 21px; }
}

/* ---------- blog (v0.4.0) ---------- */
.dchc-blog { margin-top: 44px; margin-bottom: 44px; }
.dchc-blog__rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
.dchc-post { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--dchc-borde); border-radius: 14px; overflow: hidden; color: inherit; text-decoration: none; }
.dchc-post:hover { border-color: var(--dchc-acento); }
.dchc-post__media { aspect-ratio: 16 / 9; background: var(--dchc-hundido); display: flex; align-items: center; justify-content: center; }
.dchc-post__img { width: 100%; height: 100%; object-fit: cover; }
.dchc-post__sinfoto { color: var(--dchc-gris); }
.dchc-post__cuerpo { display: flex; flex-direction: column; gap: 7px; padding: 14px 16px 16px; }
.dchc-post__rotulo { align-self: flex-start; background: var(--dchc-acento-suave); color: var(--dchc-acento-osc); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 4px 9px; border-radius: 7px; }
.dchc-post__tit { font-family: var(--dchc-titulos); font-weight: 600; font-size: 16.5px; line-height: 1.35; color: var(--dchc-tinta); }
.dchc-post__fecha { font-size: 12.5px; color: var(--dchc-gris); }


/* categorias en fila de chips (como encima del collage en el diseno) */
.dchc-chips-bloque { position: relative; }
.dchc-chips { display: flex; flex-wrap: wrap; gap: 9px; margin: 0 0 18px; }
.dchc-chip {
	display: inline-flex; flex: 0 1 calc((100% - 45px) / 6); align-items: center; gap: 9px;
	min-width: 165px; min-height: 58px; padding: 7px 10px; border: 1px solid #DDD4F4 !important;
	border-radius: 14px !important; background: #F5F1FD !important; color: var(--dchc-tinta) !important;
	box-shadow: 0 3px 10px rgba(66, 42, 120, .06); font-size: 13.5px; font-weight: 650;
	line-height: 1.2; text-decoration: none !important; transition: transform .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
}
.dchc-chip__icono {
	display: inline-flex; flex: 0 0 38px; width: 38px; height: 38px; align-items: center; justify-content: center;
	border-radius: 50%; background: #E5DCFA; color: var(--dchc-acento); transition: background-color .18s ease, color .18s ease;
}
.dchc-chip__svg { display: block; width: 22px; height: 22px; }
.dchc-chip__nombre { flex: 1 1 auto; min-width: 0; overflow-wrap: normal; word-break: normal; hyphens: none; }
.dchc-chip__cuenta {
	display: inline-flex; flex: 0 0 28px; width: 28px; height: 28px; align-items: center; justify-content: center;
	border-radius: 999px; background: #E8E0FA; color: var(--dchc-acento-osc); font-size: 12.5px; font-weight: 800;
	transition: background-color .18s ease, color .18s ease;
}
/* Sin el numero de ofertas (categorias con menos del umbral), el hueco se
   quedaba vacio a la derecha: se centra el icono+texto en su lugar. */
.dchc-chip:not(:has(.dchc-chip__cuenta)) { justify-content: center; }
.dchc-chip:not(:has(.dchc-chip__cuenta)) .dchc-chip__nombre { flex: 0 1 auto; text-align: center; }
.dchc-chip:hover,
.dchc-chip--actual {
	transform: translateY(-2px); border-color: var(--dchc-acento) !important; background: var(--dchc-acento) !important;
	color: #fff !important; box-shadow: 0 9px 20px rgba(108, 75, 209, .22);
}
.dchc-chip:hover .dchc-chip__icono,
.dchc-chip--actual .dchc-chip__icono { background: rgba(255,255,255,.17); color: #fff; }
.dchc-chip:hover .dchc-chip__cuenta,
.dchc-chip--actual .dchc-chip__cuenta { background: #fff; color: var(--dchc-acento-osc); }
.dchc-chip:focus-visible { outline: 3px solid #D7C9FA !important; outline-offset: 3px; }
/* Fila automatica: mismo ancho y aire superior que los chips de la portada. */
.dchc-categorias-cabecera { box-sizing: border-box; width: 100%; max-width: 1280px; margin: 0 auto; padding: 22px 20px 18px; }
@media (min-width: 1100px) { .dchc-categorias-cabecera { width: var(--dchc-ancho); max-width: none; padding-left: 0; padding-right: 0; } }
.dchc-categorias-cabecera .dchc-chips { margin-bottom: 0; }
/* "Today's promo codes": aviso de comision en una linea encima del titulo, fecha de precios debajo de la rejilla */
.dchc-catalogo .dchc-divulgacion--linea { margin: 0 0 10px; font-size: 12.5px; line-height: 1.4; color: #5B5670; }
.dchc-catalogo .dchc-sec__sello--pie { margin: 14px 0 0; }
/* portada: menos hueco entre categorias, collage y "Today's promo codes" (44 -> 18 y 22 px), sin cambiar tamanos */
.entry-content > .dchc-chips-bloque:first-child .dchc-chips { margin-bottom: 0; }
.entry-content > .dchc-chips-bloque:first-child + .dchc-collage { margin-top: 18px; margin-bottom: 0; }
.entry-content > .dchc-chips-bloque:first-child + .dchc-collage + .dchc-banda { margin-top: 22px; }
/* aviso de comision de la pagina: una linea centrada debajo del collage, antes de los productos (como RetailMeNot) */
.dchc-catalogo.dchc-aviso-comision { margin-top: 10px; margin-bottom: 6px; text-align: center; font-size: 12.5px; line-height: 1.4; color: #5B5670; }
.entry-content > .dchc-collage + .dchc-aviso-comision + .dchc-banda { margin-top: 0; }
/* portada: aire bajo la cabecera para que su linea no toque los chips */
.entry-content > .dchc-chips-bloque:first-child { padding-top: 22px; }
/* portada en movil: los productos ("Today's promo codes") suben antes del collage, para que se vea
   una tarjeta al entrar. El orden visual cambia; el orden del HTML no (por eso las reglas de arriba,
   que enlazan por hermano adyacente, siguen valiendo igual). Solo en la portada (.home). */
@media (max-width: 639px) {
	/* Menos margen lila lateral para dar mas ancho a las tarjetas en movil. */
	.home .dchc-banda { padding-left: 8px; padding-right: 8px; }
	.home .entry-content.single-content { display: flex; flex-direction: column; }
	.home .entry-content.single-content > * { order: 5; }
	.home .entry-content.single-content > .dchc-chips-bloque { order: 1; }
	.home .entry-content.single-content > .dchc-aviso-comision { order: 2; }
	.home .entry-content.single-content > .dchc-banda { order: 3; }
	.home .entry-content.single-content > .dchc-collage { order: 4; margin-top: 0; margin-bottom: 44px; }
}
/* exactamente 7 categorias en escritorio: una sola linea (con 8 o mas, vuelven a partirse en filas) */
@media (min-width: 1100px) {
	.dchc-chips:has(.dchc-chip:nth-child(7)):not(:has(.dchc-chip:nth-child(8))) { flex-wrap: nowrap; gap: 8px; }
	.dchc-chips:has(.dchc-chip:nth-child(7)):not(:has(.dchc-chip:nth-child(8))) .dchc-chip { flex: 1 1 0; min-width: 0; gap: 6px; padding: 6px 8px; font-size: 13px; }
	.dchc-chips:has(.dchc-chip:nth-child(7)):not(:has(.dchc-chip:nth-child(8))) .dchc-chip__icono { flex-basis: 32px; width: 32px; height: 32px; }
	.dchc-chips:has(.dchc-chip:nth-child(7)):not(:has(.dchc-chip:nth-child(8))) .dchc-chip__svg { width: 19px; height: 19px; }
	.dchc-chips:has(.dchc-chip:nth-child(7)):not(:has(.dchc-chip:nth-child(8))) .dchc-chip__cuenta { flex-basis: 24px; width: 24px; height: 24px; font-size: 12px; }
}
@media (max-width: 1099px) {
	/* Sin degradado blanco a la derecha: quedaba desalineado con los chips y se veia como una raya. */
	.dchc-chips {
		flex-wrap: nowrap; gap: 9px; margin-right: -20px; padding: 2px 20px 9px 0; overflow-x: auto;
		scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch;
	}
	.dchc-chips::-webkit-scrollbar { display: none; }
	.dchc-chip { flex: 0 0 auto; min-width: 178px; scroll-snap-align: start; }
}
.dchc-demo-aviso { margin: 0 0 14px; padding: 10px 14px; border-radius: 10px; background: var(--dchc-ambar-suave); color: var(--dchc-ambar); font-size: 13.5px; font-weight: 600; }

/* ---------- collage fiel a la maqueta (v0.6.0) ---------- */
.dchc-collage { margin-top: 26px; margin-bottom: 34px; }
.dchc-collage__rejilla { display: grid; grid-template-columns: 1fr; gap: 18px; }
@container (min-width: 720px)  { .dchc-collage__rejilla { grid-template-columns: repeat(2, 1fr); } }
@container (min-width: 1020px) { .dchc-collage__rejilla { grid-template-columns: 1fr 1.55fr 1fr; } }

.dchc-vent { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 9px; min-height: 250px; border-radius: 20px; padding: 24px 26px; color: #fff; }
@container (min-width: 720px)  { .dchc-vent--ancha { grid-column: span 2; } }
@container (min-width: 1020px) { .dchc-vent--ancha { grid-column: span 1; min-height: 330px; } }
.dchc-vent--codigos   { background: #6C4BD1; }
.dchc-vent--barato    { background: #1E9E5A; }
.dchc-vent--ranking   { background: #1159AF; }
.dchc-vent--marca     { background: #2B2350; }
.dchc-vent--sorteo    { background: #D65A8E; }
.dchc-vent--coleccion { background: #E39B1B; }

/* el circulo decorativo de la esquina, como en la maqueta */
.dchc-vent--codigos::after, .dchc-vent--marca::after, .dchc-vent--sorteo::after, .dchc-vent--coleccion::after {
	content: ""; position: absolute; top: -70px; right: -60px; width: 220px; height: 220px; border-radius: 50%;
	background: rgba(255,255,255,.08); pointer-events: none;
}

.dchc-vent__rot { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .92; }
.dchc-vent__tit { font-family: var(--dchc-titulos); font-weight: 800; font-size: 22px; line-height: 1.18; margin: 0; color: inherit; letter-spacing: -.01em; }
.dchc-vent__tit--grande { font-size: 30px; }
.dchc-vent__txt { font-size: 15px; line-height: 1.5; margin: 0; opacity: .94; max-width: 34ch; }
.dchc-vent__nota { font-size: 11.5px; opacity: .8; }
.dchc-vent__cifra { font-family: var(--dchc-titulos); font-size: 44px; font-weight: 800; line-height: 1; margin: 4px 0 0; }
.dchc-vent__cifra span { font-size: 14px; font-weight: 600; opacity: .85; }
.dchc-vent__pie { margin-top: auto; font-size: 14px; font-weight: 700; color: #fff; text-decoration: none; }
.dchc-vent__btn { align-self: flex-start; background: #fff; color: var(--dchc-tinta); border-radius: 12px; padding: 12px 20px; font-weight: 700; font-size: 15px; text-decoration: none; }
.dchc-vent__btn--osc { background: #1B1726; color: #fff; }
.dchc-vent__agua { position: absolute; right: -6px; bottom: -26px; font-family: var(--dchc-titulos); font-size: 116px; font-weight: 800; color: rgba(255,255,255,.16); line-height: 1; pointer-events: none; }
.dchc-pastilla-blanca { align-self: flex-start; background: #fff; color: var(--dchc-tinta); border-radius: 999px; padding: 7px 14px; font-size: 13.5px; font-weight: 700; }

/* pastillas escalonadas de los codigos por vencer */
.dchc-pills { display: flex; flex-direction: column; gap: 7px; margin: 6px 0 0; }
.dchc-pill { display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; align-self: flex-start; background: #fff; color: var(--dchc-tinta); border-radius: 10px; padding: 7px 8px 7px 13px; font-size: 13.5px; font-weight: 600; text-decoration: none; }
.dchc-pill b { background: var(--dchc-acento-suave); color: var(--dchc-acento-osc); border-radius: 7px; padding: 3px 8px; font-size: 12px; }

/* ranking con miniatura */
.dchc-rank { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.dchc-rank a { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.14); border-radius: 12px; padding: 8px 10px; color: #fff; text-decoration: none; }
.dchc-rank a:hover { background: rgba(255,255,255,.24); }
.dchc-rank__n { flex: none; width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.28); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; }
.dchc-rank__n--uno { background: #F0A93B; color: #2B2350; }
.dchc-rank__foto { flex: none; width: 34px; height: 34px; border-radius: 8px; background: #fff; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.dchc-rank__foto img { max-width: 100%; max-height: 100%; object-fit: contain; }
.dchc-rank__txt { display: flex; flex-direction: column; min-width: 0; }
.dchc-rank__txt b { font-size: 13.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dchc-rank__txt i { font-style: normal; font-size: 11.5px; opacity: .82; }

/* carruseles */
.dchc-slides { flex: 1; position: relative; }
.dchc-slide { display: flex; gap: 18px; align-items: flex-start; }
.dchc-slide[hidden] { display: none; }
.dchc-slide__txt { display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 0; }
.dchc-slide__marca { display: flex; align-items: center; gap: 10px; margin: 0 0 2px; font-size: 16px; }
.dchc-slide__marca b { font-family: var(--dchc-titulos); font-weight: 700; }
.dchc-chip-spon { background: #fff; color: var(--dchc-tinta); border-radius: 6px; padding: 3px 8px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.dchc-vent__circulo { flex: none; width: 170px; height: 170px; border-radius: 50%; background: #fff; display: none; align-items: center; justify-content: center; padding: 22px; }
@container (min-width: 1020px) { .dchc-vent__circulo { display: flex; } }
.dchc-vent__circulo img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.dchc-vent__circulo--vacio { background: rgba(255,255,255,.9); }
.dchc-carr__pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 14px; }
.dchc-puntos { display: flex; gap: 6px; }
.dchc-punto { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: rgba(255,255,255,.45) !important; cursor: pointer; transition: width .2s ease; }
.dchc-punto[aria-current="true"] { width: 26px; background: #fff !important; }
.dchc-carr__btns { display: flex; gap: 8px; }
.dchc-carr__btn { width: 34px; height: 34px; padding: 0 !important; border: 0; border-radius: 50%; background: rgba(255,255,255,.22) !important; color: #fff !important; font-size: 15px !important; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.dchc-carr__btn:hover { background: rgba(255,255,255,.35) !important; }

/* ---------- movimiento: entrada y brillo ----------
   La diapositiva entra deslizando de derecha a izquierda y, un instante
   despues, un brillo barre la ventana. Cada carrusel usa un barrido distinto
   para que no parezcan la misma pieza repetida. */
@keyframes dchc-entra { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
@keyframes dchc-barre { from { transform: translateX(-120%) skewX(-18deg); } to { transform: translateX(320%) skewX(-18deg); } }
@keyframes dchc-latido { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,255,255,.45); } 50% { transform: scale(1.03); box-shadow: 0 0 0 16px rgba(255,255,255,0); } }

.dchc-slide.is-activa { animation: dchc-entra .45s ease both; }
.dchc-vent--marca .dchc-slide.is-activa::before,
.dchc-vent--sorteo .dchc-slide.is-activa::before {
	content: ""; position: absolute; inset: -40px 0; width: 45%; pointer-events: none; z-index: 1;
	background: linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent);
}
.dchc-vent--marca .dchc-slide.is-activa::before  { animation: dchc-barre 1.5s .25s ease-out both; }
/* el sorteo barre mas despacio y mas suave, para no competir con el otro */
.dchc-vent--sorteo .dchc-slide.is-activa::before { animation: dchc-barre 2.4s .35s ease-in-out both; background: linear-gradient(100deg, transparent, rgba(255,255,255,.26), transparent); }
.dchc-vent--sorteo .dchc-slide.is-activa .dchc-vent__circulo { animation: dchc-latido 2.6s .5s ease-in-out 2; }

@media (prefers-reduced-motion: reduce) {
	.dchc-slide.is-activa, .dchc-slide.is-activa::before, .dchc-slide.is-activa .dchc-vent__circulo { animation: none !important; }
}

@media (max-width: 720px) {
	.dchc-vent { padding: 20px; min-height: 0; border-radius: 16px; }
	.dchc-vent__tit--grande { font-size: 24px; }
	.dchc-vent__agua { font-size: 88px; }
	.dchc-vent__txt { max-width: none; }
}

.dchc-chip-spon { white-space: nowrap; }
.dchc-slide__marca { flex-wrap: wrap; }
.dchc-slide__marca b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 62%; }
.dchc-vent__rot { text-wrap: balance; }

/* ---------- un efecto distinto por carrusel (v0.6.2) ----------
   Marcas: entra de derecha a izquierda y un brillo barre la ventana.
   Sorteos: entra con zoom y el premio suelta un halo, sin barrido, para que
   no parezca la misma pieza dos veces. */
@keyframes dchc-zoom { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes dchc-halo { 0% { opacity: .55; transform: scale(.85); } 70% { opacity: 0; transform: scale(1.5); } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes dchc-sube { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* marcas: deslizamiento lateral + barrido */
.dchc-vent--marca .dchc-slide.is-activa { animation: dchc-entra .45s ease both; }
.dchc-vent--marca .dchc-slide.is-activa::before { animation: dchc-barre 1.5s .2s ease-out both; }

/* sorteos: zoom, halo y el texto subiendo. Nada de barrido. */
.dchc-vent--sorteo .dchc-slide.is-activa { animation: dchc-zoom .5s cubic-bezier(.2,.8,.2,1) both; }
.dchc-vent--sorteo .dchc-slide.is-activa::before { animation: none !important; background: none !important; }
.dchc-vent--sorteo .dchc-slide.is-activa .dchc-slide__txt { animation: dchc-sube .55s .1s ease both; }
.dchc-vent--sorteo .dchc-vent__circulo { position: relative; }
.dchc-vent--sorteo .dchc-slide.is-activa .dchc-vent__circulo { animation: none; }
.dchc-vent--sorteo .dchc-slide.is-activa .dchc-vent__circulo::after {
	content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 3px solid rgba(255,255,255,.85);
	animation: dchc-halo 2.2s .25s ease-out 2; pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.dchc-vent--marca .dchc-slide.is-activa,
	.dchc-vent--sorteo .dchc-slide.is-activa,
	.dchc-vent--sorteo .dchc-slide.is-activa .dchc-slide__txt,
	.dchc-vent--sorteo .dchc-slide.is-activa .dchc-vent__circulo::after { animation: none !important; }
}

/* ---------- arreglo del barrido (v0.6.3) ----------
   Antes el brillo iba sobre la diapositiva, que es mas baja que la ventana, y
   al pasar dejaba una raya en el borde de abajo. Ahora barre la ventana
   entera, que ya recorta lo que se sale. */
.dchc-vent--marca .dchc-slide.is-activa::before,
.dchc-vent--sorteo .dchc-slide.is-activa::before { content: none !important; animation: none !important; }

.dchc-vent--marca.is-brillo::before {
	content: ""; position: absolute; top: -10%; bottom: -10%; left: 0; width: 38%; z-index: 2; pointer-events: none;
	background: linear-gradient(100deg, transparent, rgba(255,255,255,.34), transparent);
	animation: dchc-barre 1.4s .15s ease-out both;
}

/* ---------- medidas pegadas a la maqueta (v0.6.4) ----------
   En la maqueta la columna del medio es casi el doble que las laterales y las
   ventanas son mas altas. Ademas, el circulo de fondo del sorteo va ABAJO a la
   derecha, no arriba: por eso el premio parece apoyado. */
@container (min-width: 1020px) {
	.dchc-collage__rejilla { grid-template-columns: 1fr 1.72fr 1fr; gap: 20px; }
	.dchc-vent { min-height: 400px; }
	.dchc-vent--ancha { min-height: 400px; }
	.dchc-vent__circulo { width: 200px; height: 200px; padding: 26px; }
}

/* el circulo decorativo, por ventana */
.dchc-vent--sorteo::after {
	top: auto; bottom: -110px; right: -70px; width: 300px; height: 300px;
	background: rgba(255,255,255,.16);
}
.dchc-vent--coleccion::after { top: auto; bottom: -120px; right: -80px; width: 280px; height: 280px; }

/* el premio del sorteo se apoya abajo; el de marcas queda a media altura */
.dchc-slides { display: flex; }
.dchc-slide { width: 100%; align-items: stretch; }
.dchc-vent--sorteo .dchc-vent__circulo { align-self: flex-end; margin-bottom: -6px; position: relative; z-index: 1; }
.dchc-vent--marca .dchc-vent__circulo { align-self: center; }

/* Las dos filas del collage, iguales de alto (en la maqueta lo son). */
.dchc-collage__rejilla { grid-auto-rows: 1fr; }

/* Fotos mas grandes en el collage (v0.6.7): el circulo pasa de 200 a 250 px y
   el producto respira menos borde, asi se ve de lejos. */
@container (min-width: 1020px) {
	.dchc-vent__circulo { width: 250px; height: 250px; padding: 20px; }
	.dchc-vent--marca .dchc-slide__txt, .dchc-vent--sorteo .dchc-slide__txt { max-width: 62%; }
	.dchc-vent__txt { max-width: 30ch; }
}
.dchc-rank__foto { width: 40px; height: 40px; }

/* El mensaje del pie de cada ventana, mas legible (v0.6.8). */
.dchc-vent__pie { font-size: 15.5px; line-height: 1.35; }
.dchc-vent__nota { font-size: 12.5px; line-height: 1.45; }
@container (min-width: 1020px) {
	.dchc-vent__pie { font-size: 16.5px; }
	.dchc-vent__nota { font-size: 13px; }
}

/* El pie de cada ventana, mas grande y sobre un fondo propio para que se
   despegue del color de la tarjeta (v0.6.9). */
.dchc-vent__pie {
	align-self: flex-start; display: inline-flex; align-items: center;
	background: rgba(0, 0, 0, .22); border-radius: 12px; padding: 10px 16px;
	font-size: 16.5px; font-weight: 700; text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
	box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
}
a.dchc-vent__pie:hover { background: rgba(0, 0, 0, .34); }
@container (min-width: 1020px) { .dchc-vent__pie { font-size: 18px; padding: 11px 18px; } }
.dchc-vent__nota { text-shadow: 0 1px 2px rgba(0, 0, 0, .2); }

/* ======================================================================
   Estilo "integrado" (v0.8.0) — [dch_collage estilo="integrado"]
   El producto va metido en la ventana, como en las tarjetas de la portada
   de Amazon. Todo encerrado bajo .dchc-collage--integrado: sin el atributo,
   el collage sigue exactamente igual que antes.
   ====================================================================== */
.dchc-collage--integrado .dchc-vent__tit { font-size: 25px; line-height: 1.06; letter-spacing: -.025em; }
.dchc-collage--integrado .dchc-vent__tit--grande { font-size: 36px; }
.dchc-collage--integrado .dchc-vent--codigos .dchc-vent__txt,
.dchc-collage--integrado .dchc-vent--barato .dchc-vent__txt { display: none; }

/* --- las dos anchas, claras: el producto se funde con el fondo --- */
.dchc-collage--integrado .dchc-vent--marca  { background: #ECEAE6; color: #141414; }
.dchc-collage--integrado .dchc-vent--sorteo { background: #F5D3DE; color: #141414; }
.dchc-collage--integrado .dchc-vent--marca .dchc-vent__btn { background: #141414; color: #fff; }
.dchc-collage--integrado .dchc-vent--marca .dchc-chip-spon { background: #141414; color: #fff; }
.dchc-collage--integrado .dchc-vent--marca .dchc-punto,
.dchc-collage--integrado .dchc-vent--sorteo .dchc-punto { background: rgba(20,20,20,.25) !important; }
.dchc-collage--integrado .dchc-vent--marca .dchc-punto[aria-current="true"],
.dchc-collage--integrado .dchc-vent--sorteo .dchc-punto[aria-current="true"] { background: #141414 !important; }
.dchc-collage--integrado .dchc-vent--marca .dchc-carr__btn,
.dchc-collage--integrado .dchc-vent--sorteo .dchc-carr__btn { background: rgba(20,20,20,.1) !important; color: #141414 !important; }
.dchc-collage--integrado .dchc-vent--marca.is-brillo::before { background: linear-gradient(100deg, transparent, rgba(255,255,255,.7), transparent); }

/* --- producto grande en lugar del circulo --- */
.dchc-collage--integrado .dchc-slide { align-items: center; }
.dchc-collage--integrado .dchc-vent__prod { flex: 0 0 46%; align-self: stretch; display: flex; align-items: center; justify-content: center; position: relative; }
.dchc-collage--integrado .dchc-vent__prod img { position: relative; z-index: 1; width: 100%; max-height: 270px; object-fit: contain; mix-blend-mode: multiply; }
@container (max-width: 719px) {
	.dchc-collage--integrado .dchc-slide { flex-direction: column-reverse; align-items: stretch; }
	.dchc-collage--integrado .dchc-vent__prod img { max-height: 170px; }
}
/* peana del sorteo, como la tarjeta "Best of Beauty" */
.dchc-collage--integrado .dchc-vent--sorteo .dchc-vent__prod::after {
	content: ""; position: absolute; left: 10%; right: 10%; bottom: -26px; height: 38%;
	background: #E7A9BF; border-radius: 16px 16px 0 0;
}
.dchc-collage--integrado .dchc-vent__prod--regalo svg { position: relative; z-index: 1; width: 62%; height: auto; max-width: 170px; }
.dchc-collage--integrado .dchc-vent--sorteo .dchc-slide.is-activa .dchc-vent__prod--regalo svg { animation: dchc-latido 2.6s .5s ease-in-out 2; }

/* --- azulejos blancos: el blanco de la foto se funde con el azulejo --- */
.dchc-azulejos { display: grid; gap: 8px; margin-top: 8px; }
.dchc-azulejos--2x2 { grid-template-columns: 1fr 1fr; }
.dchc-azulejos--3   { grid-template-columns: repeat(3, 1fr); }
.dchc-azulejo { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; background: #fff; border-radius: 14px; padding: 12%; overflow: hidden; text-decoration: none; transition: transform .18s ease; }
.dchc-azulejo:hover { transform: translateY(-2px); }
.dchc-azulejo img { width: 100%; height: 100%; object-fit: contain; }
.dchc-azulejo b { position: absolute; left: 6px; bottom: 6px; background: #141414; color: #fff; font-size: 11px; font-weight: 800; line-height: 1; border-radius: 6px; padding: 4px 6px; white-space: nowrap; }

/* --- ranking: filas blancas como azulejos alargados --- */
.dchc-collage--integrado .dchc-rank a { background: #fff; color: #141414; }
.dchc-collage--integrado .dchc-rank a:hover { background: #F4F4F4; }
.dchc-collage--integrado .dchc-rank__n { background: #EEE; color: #141414; }
.dchc-collage--integrado .dchc-rank__foto { width: 52px; height: 52px; }
.dchc-collage--integrado .dchc-rank__txt i { opacity: .7; }

@media (prefers-reduced-motion: reduce) {
	.dchc-collage--integrado .dchc-vent__prod--regalo svg { animation: none !important; }
	.dchc-azulejo { transition: none; }
}

/* --- v0.8.1: arreglos del estilo integrado --- */
/* El carrusel crea su propia capa (transform de la animacion) y el multiply
   se mezclaba contra transparente: el marco del producto lleva el mismo
   fondo que la ventana y aisla la mezcla, asi el blanco de la foto desaparece. */
.dchc-collage--integrado .dchc-vent__prod { isolation: isolate; }
.dchc-collage--integrado .dchc-vent--marca .dchc-vent__prod  { background: #ECEAE6; }
.dchc-collage--integrado .dchc-vent--sorteo .dchc-vent__prod { background: #F5D3DE; }
/* Kadence mete sangria a las listas: las filas del ranking se salian. */
.dchc-collage .dchc-rank { padding: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }
.dchc-collage--integrado .dchc-rank__txt { flex: 1; }
/* Descuento en etiqueta roja, como las de oferta de Amazon. */
.dchc-vent__oferta { align-self: flex-start; background: #CC0C39; color: #fff; border-radius: 6px; padding: 6px 10px; font-size: 14px; font-weight: 800; line-height: 1; }

/* --- v0.8.2: ventana de mayores descuentos --- */
.dchc-vent--descuentos .dchc-azulejo b,
.dchc-vent--descuentos .dchc-pill b { background: #CC0C39; color: #fff; }

/* --- v0.8.3: vuelve el dibujo de fondo (pedido de Henderson) ---
   Las ventanas de color recuperan sus circulos de esquina y la marca de agua,
   por debajo de los azulejos. En las dos claras, el circulo blanco no se veria:
   va en tono oscuro translucido, y detras del producto un circulo mas intenso
   que le da el contraste que antes daba el circulo blanco. El circulo va en el
   fondo del propio marco del producto, asi la mezcla multiply lo ve y el
   blanco de la foto sigue desapareciendo. */
.dchc-collage--integrado .dchc-azulejos,
.dchc-collage--integrado .dchc-pills { position: relative; z-index: 1; }
.dchc-collage--integrado .dchc-vent--marca::after,
.dchc-collage--integrado .dchc-vent--sorteo::after { background: rgba(20,20,20,.05); }
.dchc-collage--integrado .dchc-vent--marca .dchc-vent__prod {
	background: radial-gradient(circle closest-side, #DCD7CE 0 94%, transparent 95%) #ECEAE6;
}
.dchc-collage--integrado .dchc-vent--sorteo .dchc-vent__prod {
	background: radial-gradient(circle closest-side, #EDB9CB 0 94%, transparent 95%) #F5D3DE;
}

/* --- v0.8.3: en sintonia con la tarjeta del hero ---
   Misma receta que .giveaway-card: degradado a 160deg de oscuro a claro,
   brillo circular detras, sombra suave del propio color y esquinas de 24px.
   Las dos claras no llevan degradado: el marco del producto tiene que ser del
   mismo color liso que la ventana para que no se note el corte. */
.dchc-collage--integrado .dchc-vent { border-radius: 24px; }
.dchc-collage--integrado .dchc-vent--codigos   { background: linear-gradient(160deg, #3A2A7A 0%, #5B3FC4 100%); box-shadow: 0 24px 50px rgba(91,63,196,.28); }
.dchc-collage--integrado .dchc-vent--barato    { background: linear-gradient(160deg, #0F5E35 0%, #1E9E5A 100%); box-shadow: 0 24px 50px rgba(30,158,90,.24); }
.dchc-collage--integrado .dchc-vent--ranking   { background: linear-gradient(160deg, #0A3570 0%, #1560BC 100%); box-shadow: 0 24px 50px rgba(17,89,175,.24); }
.dchc-collage--integrado .dchc-vent--coleccion { background: linear-gradient(160deg, #B36A05 0%, #E9A227 100%); box-shadow: 0 24px 50px rgba(227,155,27,.26); }
.dchc-collage--integrado .dchc-vent--marca     { box-shadow: 0 24px 50px rgba(60,50,30,.12); }
.dchc-collage--integrado .dchc-vent--sorteo    { box-shadow: 0 24px 50px rgba(214,90,142,.20); }
/* el brillo: circulo de un tono mas claro, como .giveaway-card__glow */
.dchc-collage--integrado .dchc-vent--codigos::after   { background: rgba(124,92,219,.35); }
.dchc-collage--integrado .dchc-vent--coleccion::after { background: rgba(255,214,120,.30); }
.dchc-collage--integrado .dchc-vent--barato::before,
.dchc-collage--integrado .dchc-vent--ranking::before {
	content: ""; position: absolute; top: -70px; right: -60px; width: 220px; height: 220px; border-radius: 50%;
	background: rgba(255,255,255,.10); pointer-events: none;
}
.dchc-collage--integrado .dchc-rank { position: relative; z-index: 1; }

/* --- v0.8.4: el circulo cambia de lado en cada ventana, para que no se vean
   todas iguales. Solo cambia la posicion: colores, brillo y animaciones igual. */
.dchc-collage--integrado .dchc-vent--codigos::after   { top: -70px; right: -60px; left: auto; bottom: auto; width: 220px; height: 220px; }
.dchc-collage--integrado .dchc-vent--marca::after     { top: auto; bottom: -100px; left: -80px; right: auto; width: 260px; height: 260px; }
.dchc-collage--integrado .dchc-vent--ranking::before  { top: auto; bottom: -80px; right: -70px; left: auto; width: 240px; height: 240px; }
.dchc-collage--integrado .dchc-vent--barato::before   { top: -80px; left: -70px; right: auto; bottom: auto; width: 220px; height: 220px; }
.dchc-collage--integrado .dchc-vent--sorteo::after    { top: -110px; left: -90px; right: auto; bottom: auto; width: 290px; height: 290px; }
.dchc-collage--integrado .dchc-vent--coleccion::after { top: auto; bottom: -120px; right: -80px; left: auto; width: 280px; height: 280px; }

/* --- v0.8.5: tarjetas de producto uniformes ---
   1) La foto va fija dentro de su cuadro: con aspect-ratio solo, una foto alta
      (el pantalon) estiraba el cuadro y bajaba todo lo demas.
   2) Etiqueta de descuento, linea de Amazon y boton van pegados abajo: si un
      precio largo baja a dos lineas, las filas siguen alineadas entre tarjetas. */
.dchc-card__media { min-height: 0; overflow: hidden; }
.dchc-card__img { position: absolute; inset: 16px; width: calc(100% - 32px); height: calc(100% - 32px); max-width: none; max-height: none; object-fit: contain; }
.dchc-card__body > .dchc-fila:not(.dchc-fila--codigo) { margin-top: auto; }
.dchc-card__body > .dchc-fila:not(.dchc-fila--codigo) ~ .dchc-btn,
.dchc-card__body > .dchc-fila:not(.dchc-fila--codigo) ~ .dchc-fila--codigo { margin-top: 4px; }

/* Precio de tarjeta: dos filas fijas (importe y detalles). Nunca se envuelve;
   cqi ajusta el tamano al ancho de la fila para que un importe largo no la parta. */
.dchc-card .dchc-precio--tarjeta {
	container-type: inline-size; display: grid; grid-template-columns: minmax(0, 1fr);
	grid-template-rows: 24px 18px; gap: 0; align-items: center; min-width: 0;
	white-space: nowrap;
}
.dchc-precio--tarjeta > strong {
	font-size: min(20px, calc(100cqi / (var(--dchc-caracteres) * .6)));
	line-height: 24px; white-space: nowrap;
}
.dchc-precio__detalle {
	display: flex; align-items: baseline; gap: 6px; min-width: 0;
	font-size: min(12.5px, calc((100cqi - 6px) / (var(--dchc-caracteres) * .6)));
	line-height: 18px; white-space: nowrap;
}
.dchc-precio__detalle > .dchc-con, .dchc-precio__detalle > s { font-size: inherit; white-space: nowrap; }

/* Ficha 3: opt-in [dch_collage estilo="temporada"]. No cambia integrado. */
.dchc-collage--temporada .dchc-collage__rejilla {
	grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: 16px;
}
.dchc-collage--temporada .dchc-vent {
	--dchc-temporada-velo: 110deg, rgba(30,12,54,.88), rgba(30,12,54,.35);
	grid-column: auto; grid-row: auto; min-width: 0; min-height: 280px;
	padding: 24px; border-radius: 22px; gap: 12px; isolation: isolate;
	background-color: #37205B; background-size: cover; background-position: center;
	color: #fff; overflow-wrap: anywhere;
}
.dchc-collage--temporada .dchc-vent > * { position: relative; z-index: 1; }
.dchc-collage--temporada .dchc-vent::after { z-index: 0; pointer-events: none; background: rgba(255,255,255,.08); }
.dchc-collage--temporada .dchc-vent--marca {
	--dchc-temporada-velo: 100deg, rgba(255,248,236,.96), rgba(255,248,236,.55);
	background-color: #F4E8D5; color: #1B1726;
}
.dchc-collage--temporada .dchc-vent--descuentos { background-position: center bottom; }
.dchc-collage--temporada .dchc-vent--sorteo { background-color: #422571; }
.dchc-collage--temporada .dchc-vent__tit { font-size: 24px; line-height: 1.15; letter-spacing: -.02em; }
.dchc-collage--temporada .dchc-vent__tit--grande { font-size: clamp(26px, 3.2cqi, 38px); }
.dchc-collage--temporada .dchc-temporada-producto { color: inherit; font-size: 17px; line-height: 1.35; margin: 0; }
.dchc-collage--temporada .dchc-vent__txt { max-width: 40ch; font-size: 14px; }
.dchc-collage--temporada .dchc-vent__nota { font-size: 12px; opacity: 1; }
.dchc-collage--temporada .dchc-slides { min-width: 0; }
.dchc-collage--temporada .dchc-slide { flex-direction: column; gap: 16px; align-items: stretch; }
.dchc-collage--temporada .dchc-slide[hidden] { display: none !important; }
.dchc-collage--temporada .dchc-slide__txt { max-width: none; min-width: 0; }
.dchc-collage--temporada .dchc-slide__marca { font-size: 13px; }
.dchc-collage--temporada .dchc-vent__prod {
	display: flex; align-items: center; justify-content: center; flex: none;
	width: 100%; min-width: 0; height: 190px; padding: 16px; background: #fff;
	border-radius: 16px; isolation: isolate;
}
.dchc-collage--temporada .dchc-vent__prod img {
	display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%;
	object-fit: contain; mix-blend-mode: normal;
}
.dchc-collage--temporada .dchc-vent__prod--regalo { background: transparent; }
.dchc-collage--temporada .dchc-vent__prod--regalo svg { max-width: 100%; height: 140px; }
.dchc-collage--temporada .dchc-azulejos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.dchc-collage--temporada .dchc-azulejo { min-width: 0; padding: 12px 12px 32px; }
.dchc-collage--temporada .dchc-azulejo img { position: absolute; inset: 12px 12px 32px; width: calc(100% - 24px); height: calc(100% - 44px); }
.dchc-collage--temporada .dchc-azulejo b { background: #B50932; color: #fff; }
.dchc-collage--temporada .dchc-vent--descuentos .dchc-azulejos { margin-block: auto; }
.dchc-collage--temporada .dchc-vent__btn,
.dchc-collage--temporada a.dchc-vent__pie {
	background: #fff !important; color: #4B289A !important; border: 0 !important;
	border-radius: 10px !important; padding: 11px 16px !important; font-size: 14px !important;
	font-weight: 700 !important; line-height: 1.35 !important; text-decoration: none !important;
	align-self: flex-start; max-width: 100%; white-space: normal !important;
}
.dchc-collage--temporada .dchc-vent--marca .dchc-vent__btn { background: #5C36B6 !important; color: #fff !important; }
.dchc-collage--temporada .dchc-carr__pie { flex-wrap: wrap; }
.dchc-collage--temporada .dchc-puntos { flex-wrap: wrap; }
.dchc-collage--temporada .dchc-punto {
	width: 12px !important; height: 12px !important; min-width: 12px !important; min-height: 12px !important;
	padding: 0 !important; border: 0 !important; border-radius: 50% !important;
	background: #B6A4D5 !important;
}
.dchc-collage--temporada .dchc-punto[aria-current="true"] { background: #fff !important; }
.dchc-collage--temporada .dchc-vent--marca .dchc-punto[aria-current="true"] { background: #5C36B6 !important; }
.dchc-collage--temporada .dchc-carr__btn {
	width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important;
	padding: 0 !important; border: 0 !important; border-radius: 50% !important;
	background: #fff !important; color: #4B289A !important; font-size: 20px !important; line-height: 1 !important;
}
.dchc-collage--temporada .dchc-vent--marca .dchc-carr__btn { background: #5C36B6 !important; color: #fff !important; }
.dchc-collage--temporada a:focus-visible,
.dchc-collage--temporada button:focus-visible { outline: 3px solid #D99D13 !important; outline-offset: 3px; }
@container (min-width: 720px) {
	.dchc-collage--temporada .dchc-collage__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.dchc-collage--temporada.dchc-temporada--1 .dchc-collage__rejilla { grid-template-columns: minmax(0, 1fr); }
	.dchc-collage--temporada.dchc-temporada--3 .dchc-vent:last-child { grid-column: 1 / -1; }
}
@container (min-width: 1020px) {
	.dchc-collage--temporada.dchc-temporada--4 .dchc-collage__rejilla {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr) minmax(0, 1fr);
		grid-template-areas: "fall featured giveaway" "fall collection giveaway";
	}
	.dchc-collage--temporada.dchc-temporada--4 .dchc-vent--descuentos { grid-area: fall; }
	.dchc-collage--temporada.dchc-temporada--4 .dchc-vent--marca { grid-area: featured; }
	.dchc-collage--temporada.dchc-temporada--4 .dchc-vent--coleccion { grid-area: collection; }
	.dchc-collage--temporada.dchc-temporada--4 .dchc-vent--sorteo { grid-area: giveaway; }
	.dchc-collage--temporada.dchc-temporada--3 .dchc-collage__rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.dchc-collage--temporada.dchc-temporada--3 .dchc-vent:last-child { grid-column: auto; }
	.dchc-collage--temporada.dchc-temporada--4 .dchc-vent--marca .dchc-slide { flex-direction: row; align-items: center; }
	.dchc-collage--temporada.dchc-temporada--4 .dchc-vent--marca .dchc-vent__prod { width: 42%; height: 210px; }
	.dchc-collage--temporada.dchc-temporada--4 .dchc-vent--coleccion .dchc-azulejos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.dchc-collage--temporada .dchc-vent--sorteo .dchc-slide { justify-content: center; }
}

/* v0.8.8: velos mas claros en el collage de temporada; la calabaza de Fall favorites queda a la vista. */
.dchc-collage--temporada .dchc-vent--descuentos {
	--dchc-temporada-velo: 180deg, rgba(30,12,54,.80) 0%, rgba(30,12,54,.50) 30%, rgba(30,12,54,.10) 62%, rgba(30,12,54,0) 100%;
	background-position: 0% 100%;
}
.dchc-collage--temporada .dchc-vent--coleccion {
	--dchc-temporada-velo: 100deg, rgba(30,12,54,.80) 0%, rgba(30,12,54,.45) 50%, rgba(30,12,54,.05) 100%;
}
.dchc-collage--temporada .dchc-vent--marca {
	--dchc-temporada-velo: 100deg, rgba(255,248,236,.94) 0%, rgba(255,248,236,.72) 45%, rgba(255,248,236,.12) 100%;
}

/* v0.8.9: el collage de temporada con las proporciones de la maqueta (columnas 1 : 1.92 : 1.08, alto = 33.6% del ancho).
   Sin productos dentro de las tarjetas: eran lo que las estiraba. */
.dchc-collage--temporada .dchc-vent__tit,
.dchc-collage--temporada .dchc-vent__txt { margin: 0; }
.dchc-collage--temporada .dchc-vent--descuentos .dchc-vent__tit--grande { font-size: clamp(30px, 3.4cqi, 44px); line-height: 1.02; }
.dchc-collage--temporada .dchc-vent--descuentos h3.dchc-vent__tit:not(.dchc-vent__tit--grande) {
	display: inline-block; align-self: flex-start; background: #B50932; padding: 5px 12px;
	border-radius: 999px; font-size: 14px; letter-spacing: 0;
}
.dchc-collage--temporada .dchc-vent--marca .dchc-slide__marca,
.dchc-collage--temporada .dchc-vent--marca .dchc-vent__txt,
.dchc-collage--temporada .dchc-vent--coleccion .dchc-vent__rot { display: none; }
.dchc-collage--temporada .dchc-vent--marca .dchc-slide__txt { display: flex; flex-direction: column; gap: 8px; }
.dchc-collage--temporada .dchc-vent--marca .dchc-vent__tit--grande { font-size: clamp(24px, 2.5cqi, 34px); line-height: 1.05; }
.dchc-collage--temporada .dchc-vent--marca .dchc-temporada-producto {
	font-size: 14px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.dchc-collage--temporada .dchc-vent--coleccion .dchc-vent__tit { font-size: clamp(24px, 2.5cqi, 34px); line-height: 1.05; }
@container (min-width: 1020px) {
	.dchc-collage--temporada.dchc-temporada--4 .dchc-collage__rejilla {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.92fr) minmax(0, 1.08fr);
		grid-template-rows: minmax(0, 1.45fr) minmax(0, 1fr);
		height: max(400px, 33.6cqi); gap: 12px;
	}
	.dchc-collage--temporada.dchc-temporada--4 .dchc-vent { min-height: 0; padding: 20px 24px; gap: 8px; border-radius: 18px; }
	.dchc-collage--temporada.dchc-temporada--4 .dchc-vent--marca .dchc-slide { flex-direction: row; align-items: center; gap: 20px; height: 100%; }
	.dchc-collage--temporada.dchc-temporada--4 .dchc-vent--marca .dchc-slide__txt { justify-content: center; height: 100%; }
	.dchc-collage--temporada.dchc-temporada--4 .dchc-vent--marca .dchc-vent__prod { width: 36%; height: 130px; }
	.dchc-collage--temporada.dchc-temporada--4 .dchc-vent--marca .dchc-vent__btn { padding: 9px 14px !important; }
	.dchc-collage--temporada.dchc-temporada--4 .dchc-vent--marca .dchc-carr__pie { position: absolute; top: 14px; right: 18px; margin: 0; padding: 0; gap: 10px; z-index: 2; }
	.dchc-collage--temporada.dchc-temporada--4 .dchc-vent--marca .dchc-carr__btn {
		width: 30px !important; height: 30px !important; min-width: 30px !important; min-height: 30px !important; font-size: 15px !important;
	}
	.dchc-collage--temporada.dchc-temporada--4 .dchc-vent--sorteo .dchc-slide { gap: 8px; justify-content: space-between; height: 100%; }
	.dchc-collage--temporada.dchc-temporada--4 .dchc-vent--sorteo .dchc-vent__tit--grande { font-size: clamp(24px, 2.6cqi, 34px); }
	.dchc-collage--temporada.dchc-temporada--4 .dchc-vent--sorteo .dchc-vent__prod--regalo { height: 90px; }
	.dchc-collage--temporada.dchc-temporada--4 .dchc-vent--sorteo .dchc-vent__prod--regalo svg { height: 80px; }
}

/* v0.8.12: en el teléfono el collage de temporada enseña solo las dos tarjetas que llevan a ofertas
   (Fall favorites y la destacada); Kitchen finds y el sorteo quedan solo en escritorio/tablet. */
@container (max-width: 639px) {
	.dchc-collage--temporada .dchc-vent--coleccion,
	.dchc-collage--temporada .dchc-vent--sorteo { display: none; }
	.dchc-collage--temporada .dchc-vent--marca .dchc-vent__prod { height: 150px; }
	.dchc-collage--temporada .dchc-vent { min-height: 0; }
}

/* ---------- ficha 15: portada en escritorio, collage alto y siempre con parte de las tarjetas a la vista ----------
   Solo desde 1100px; por debajo la portada no cambia (en el movil el aviso sigue con order 2, antes de la banda).
   Cuentas a 1920x945: cabecera 93 + categorias 12+58 + 12 + collage + 14 + banda (20 de relleno + 29 del titulo
   + 16) = collage + 254 hasta la primera fila de tarjetas. Con collage = 100vh - 364px asoman ~110px de tarjeta
   (~95px de foto, como Koupon). Tope 598px (la altura de Koupon). Minimo 340px: por debajo, "Kitchen finds" y la
   oferta destacada ya no caben (medido a 1366px); a 1366x657 asoman asi 63px de tarjeta (a 400px no asomaba nada). */
@media (min-width: 1100px) {
	/* fila de categorias: aire de arriba 22 -> 12px y hueco hasta el collage 18 -> 12px */
	.home .entry-content > .dchc-chips-bloque:first-child { padding-top: 12px; }
	.home .entry-content > .dchc-chips-bloque:first-child + .dchc-collage { margin-top: 12px; }
	.home .dchc-collage--temporada.dchc-temporada--4 .dchc-collage__rejilla { height: clamp(340px, calc(100vh - 364px), 598px); }
	/* El aviso de comision pasa a la banda, en la linea del titulo y a la derecha. En el HTML sigue siendo el
	   unico aviso de la pagina y va antes de la banda (antes de cualquier enlace); solo se mueve al pintarse:
	   alto 0 y bajado 14 (hueco) + 20 (relleno de la banda) + 2px para que su linea case con la del subtitulo. */
	.home .entry-content > .dchc-collage + .dchc-aviso-comision:has(+ .dchc-banda) {
		position: relative; z-index: 1; top: 36px; height: 0; margin-top: 0; margin-bottom: 0;
		padding: 0 16px; line-height: 29px; text-align: right;
	}
	.home .entry-content > .dchc-collage + .dchc-aviso-comision + .dchc-banda { margin-top: 14px; padding-top: 20px; }
	/* hueco a la derecha para el aviso (~465px): si el titulo y el subtitulo no caben, el subtitulo baja de linea */
	.home .dchc-aviso-comision + .dchc-banda .dchc-sec__cab { padding-right: 500px; }
	/* subtitulo en la misma linea que el titulo */
	.home .dchc-banda .dchc-sec__cab > div { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 14px; }
	.home .dchc-banda .dchc-sec__cab .dchc-sec__tit { margin-bottom: 0; }
	.home .dchc-banda .dchc-sec__sub { margin: 0; }
}