/* ==========================================================================
   CPS Home — estilos propios de la home (editables a mano, sin build)
   Se cargan SOLO en la home (ver functions.php → cps_home_assets()).
   ========================================================================== */

/* Contenedor centrado reutilizable */
.cps-home .cps-container {
	width: 100%;
	max-width: 1400px;          /* alineado con el ancho de contenido de Woodmart */
	margin-inline: auto;
	padding-inline: 15px;
}

/* Separación entre secciones */
.cps-home .cps-section {
	margin-top: 48px;
	padding-top: 10rem;
}
.cps-home .cps-section:first-child {
	margin-top: 32px;
}

.cps-home .cps-section:last-child {
	padding-bottom: 20rem;
}

/* Título de sección */
.cps-home .cps-section__title {
	font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2rem);
	line-height: 1.2;
	margin: 0 0 24px;
	text-align: center;
}

/* El slider ocupa todo el ancho disponible del área de contenido */
.cps-home .cps-slider {
	margin-bottom: 8px;
}

/* Pequeños ajustes a las rejillas nativas de Woo dentro de la home. */
.cps-home .woocommerce.columns-4 ul.products,
.cps-home .woocommerce ul.products {
	margin-top: 0;
}

/* Respeta reduce-motion: nada de animaciones en la home */
@media (prefers-reduced-motion: reduce) {
	.cps-home * {
		scroll-behavior: auto;
	}
}

/* ==========================================================================
   SECCIÓN "SILOS" — ÍNDICE + ESCENARIO
   Distribuidor de autoridad. A la izquierda, la lista de silos siempre
   legible (número + nombre + micro-descriptor). A la derecha, un escenario
   grande que muestra el silo activo y cambia al pasar el cursor / con el
   teclado. Foto real a sangre por ID (imagen_silo); si no hay foto, tinte
   claro + número fantasma. Foco luminoso amarillo que sigue al cursor.
   Acento de marca: amarillo #f4d300. Color por silo: hsl(var(--h)).
   ========================================================================== */

.cps-home .cps-silos {
	--s-ink: #16171b;
	--s-muted: #5c5d63;
	--s-soft: #4b4c52;
	--s-line: rgba(20, 22, 26, .12);
	--s-bg: #eef0f1;            /* superficie clara del módulo */
}

/* Superficie clara del módulo (queda bien sobre fondo claro u oscuro) */
.cps-home .cps-silos__panel {
	/*background: var(--s-bg);*/
	border-radius: 24px;
	padding: clamp(26px, 4vw, 56px);
	color: var(--s-ink);
}

/* Layout en dos columnas */
.cps-home .cps-silos__layout {
	display: grid;
	grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
	gap: clamp(28px, 3.2vw, 56px);
	align-items: stretch;
}
.cps-home .cps-silos__left {
	display: flex;
	flex-direction: column;
}

/* --- Cabecera --- */
.cps-home .cps-silos__head {
	display: block;
}
.cps-home .cps-silos__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: #3a3b40;
}
.cps-home .cps-silos__eyebrow-bar {
	width: 30px;
	height: 8px;
	border-radius: 2px;
	background: var(--cps-accent, #f4d300);
}
.cps-home .cps-silos__title {
	margin: .6rem 0 0;
	max-width: 18ch;
	font-size: clamp(1.9rem, 1.1rem + 3vw, 3.3rem);
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -.02em;
	color: var(--s-ink);
}
/* Subrayador amarillo tipo rotulador (alto contraste, on-brand) */
.cps-home .cps-silos__mark {
	padding: 0 .05em;
	background: linear-gradient(180deg, transparent 54%, rgba(244, 211, 0, .9) 54% 93%, transparent 93%);
}
.cps-home .cps-silos__lead {
	margin: 14px 0 0;
	max-width: 42ch;
	font-size: .98rem;
	line-height: 1.55;
	color: var(--s-muted);
}

/* --- Índice (lista siempre legible) --- */
.cps-home .cps-silos__index {
	margin-top: clamp(22px, 2.4vw, 32px);
	border-top: 1px solid var(--s-line);
}
.cps-home .cps-srow {
	position: relative;
	display: flex;
	align-items: center;
	gap: 18px;
	padding: clamp(13px, 1.5vw, 18px) 12px clamp(13px, 1.5vw, 18px) 22px;
	border-bottom: 1px solid var(--s-line);
	text-decoration: none;
	color: var(--s-ink);
	transition: background .3s ease;
}
/* Revelado escalonado (solo si hay JS; sin JS, visible) */
.cps-home .cps-silos.cps-js .cps-srow { opacity: 0; }
.cps-home .cps-silos.cps-js .cps-srow.is-in {
	animation: cps-srow-in .6s cubic-bezier(.2, .7, .2, 1) both;
	animation-delay: var(--d, 0ms);
}
@keyframes cps-srow-in {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: none; }
}
.cps-home .cps-srow:hover { background: rgba(20, 22, 26, .03); }
.cps-home .cps-srow.is-active { background: rgba(20, 22, 26, .028); }
.cps-home .cps-srow:focus-visible {
	outline: none;
	border-radius: 8px;
	box-shadow: inset 0 0 0 2px var(--cps-accent, #f4d300);
}
/* Barra amarilla del activo */
.cps-home .cps-srow::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 4px;
	height: 62%;
	border-radius: 0 4px 4px 0;
	background: var(--cps-accent, #f4d300);
	transform: translateY(-50%) scaleY(0);
	transform-origin: center;
	transition: transform .3s ease;
}
.cps-home .cps-srow.is-active::before { transform: translateY(-50%) scaleY(1); }

.cps-home .cps-srow__num {
	flex: none;
	min-width: 2.2ch;
	font-size: .95rem;
	font-weight: 800;
	color: #a4a5ab;
	transition: color .3s ease;
}
.cps-home .cps-srow.is-active .cps-srow__num { color: var(--s-ink); }

.cps-home .cps-srow__main {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.cps-home .cps-srow__name {
	font-size: clamp(1.05rem, .92rem + .6vw, 1.45rem);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -.01em;
	color: #34353b;
	transition: color .3s ease;
}
.cps-home .cps-srow.is-active .cps-srow__name { color: var(--s-ink); }
.cps-home .cps-srow__sub {
	font-size: .82rem;
	line-height: 1.3;
	color: var(--s-muted);
}

.cps-home .cps-srow__dot {
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: hsl(var(--h, 45) 70% 52%);
	opacity: 0;
	transition: opacity .3s ease;
}
.cps-home .cps-srow:hover .cps-srow__dot,
.cps-home .cps-srow.is-active .cps-srow__dot { opacity: 1; }

.cps-home .cps-srow__arrow {
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	color: var(--s-ink);
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity .3s ease, transform .3s ease, background .3s ease;
}
.cps-home .cps-srow__arrow svg { width: 18px; height: 18px; }
.cps-home .cps-srow.is-active .cps-srow__arrow {
	opacity: 1;
	transform: none;
	background: var(--cps-accent, #f4d300);
}

/* --- Escenario (preview grande del silo activo) --- */
.cps-home .cps-silos__stage {
	position: relative;
	border-radius: 24px;
	overflow: hidden;
	min-height: clamp(440px, 58vh, 560px);
	--mx: -9999px; --my: -9999px;
	box-shadow: 0 1px 0 rgba(20, 22, 26, .04), 0 40px 90px -38px rgba(20, 22, 26, .5);
}

/* Foco luminoso que sigue al cursor.
   Sobre foto → screen (brilla); sobre tinte claro → multiply (charco cálido). */
.cps-home .cps-silos__glow {
	position: absolute;
	inset: 0;
	z-index: 6;
	pointer-events: none;
	background: radial-gradient(320px circle at var(--mx) var(--my), rgba(244, 211, 0, .18), rgba(244, 211, 0, 0) 70%);
	mix-blend-mode: multiply;
	opacity: 0;
	transition: opacity .3s ease;
}
.cps-home .cps-silos__stage.on-media .cps-silos__glow {
	background: radial-gradient(320px circle at var(--mx) var(--my), rgba(244, 211, 0, .32), rgba(244, 211, 0, 0) 70%);
	mix-blend-mode: screen;
}
.cps-home .cps-silos__stage.is-lit .cps-silos__glow { opacity: 1; }

.cps-home .cps-spanel {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: block;
	text-decoration: none;
	color: var(--s-ink);
	opacity: 0;
	transform: scale(1.02);
	pointer-events: none;
	transition: opacity .5s ease, transform .6s cubic-bezier(.2, .7, .2, 1);
}
.cps-home .cps-spanel.is-active {
	opacity: 1;
	transform: none;
	pointer-events: auto;
	z-index: 2;
}
.cps-home .cps-spanel:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--cps-accent, #f4d300);
}

/* Fondo SIN imagen: tinte claro del silo + trama + número fantasma */
.cps-home .cps-spanel__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(150deg, hsl(var(--h, 45) 85% 94%) 0%, #ffffff 78%);
}
.cps-home .cps-spanel__pattern {
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: .5;
}
.cps-home .cps-pat-grid {
	background-image:
		linear-gradient(rgba(20, 22, 26, .05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(20, 22, 26, .05) 1px, transparent 1px);
	background-size: 34px 34px;
}
.cps-home .cps-pat-dots { background-image: radial-gradient(rgba(20, 22, 26, .06) 1px, transparent 1.8px); background-size: 20px 20px; }
.cps-home .cps-pat-diag { background-image: repeating-linear-gradient(135deg, rgba(20, 22, 26, .045) 0 1px, transparent 1px 18px); }
.cps-home .cps-pat-arc  { background-image: repeating-radial-gradient(circle at 92% 0, rgba(20, 22, 26, .05) 0 1px, transparent 1px 26px); }

.cps-home .cps-spanel__ghost {
	position: absolute;
	right: 6%;
	top: 5%;
	z-index: 0;
	font-size: clamp(5rem, 4rem + 6vw, 9rem);
	font-weight: 800;
	letter-spacing: -.04em;
	line-height: .8;
	color: hsl(var(--h, 45) 45% 70% / .35);
	transition: transform .2s ease;
}
.cps-home .cps-spanel.is-active .cps-spanel__ghost {
	transform: translate(calc(var(--px, 0) * -12px), calc(var(--py, 0) * -9px));
}

/* Fondo CON imagen: foto a sangre + velo oscuro */
.cps-home .cps-spanel__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	transition: transform .2s ease;
}
.cps-home .cps-spanel.is-active .cps-spanel__media {
	transform: translate(calc(var(--px, 0) * -10px), calc(var(--py, 0) * -8px));
}
.cps-home .cps-spanel__media .cps-spanel__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transform: scale(1.06);
	transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.cps-home .cps-spanel.is-active .cps-spanel__media .cps-spanel__img { transform: scale(1.1); }
.cps-home .cps-spanel__shade {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(8, 8, 8, .12) 0%, rgba(8, 8, 8, .46) 50%, rgba(8, 8, 8, .88) 100%);
}

/* ── Escena por capas: imágenes independientes posicionadas por % ──
   Cada .cps-scene__item se ancla por su CENTRO en (--x, --y) y su ancho
   (--w) es % del ancho de la escena, de modo que todo escala con el card.
   --z controla el orden de apilado. Variables inline por imagen.
   La escena flota arriba SIN tocar el layout del contenido: los textos
   siguen abajo (flex-end), igual que en el resto de silos.            */
.cps-home .cps-spanel__scene {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: clamp(140px, 22%, 230px);      /* zona superior del card */
	z-index: 1;                            /* sobre bg/pattern, bajo content */
	pointer-events: none;
}
.cps-home .cps-scene__item {
	position: absolute;
	left: var(--x, 50%);
	top: var(--y, 50%);
	width: var(--w, 20%);                  /* % relativo al ancho de la escena */
	height: auto;
	z-index: var(--z, 1);
	/* origen = centro: el translate centra la imagen en (--x,--y);
	   --s permite el zoom del panel activo sin perder el centrado */
	transform: translate(-50%, -50%) scale(var(--s, 1)) rotate(var(--r, 0deg));
	transform-origin: center;
	transition: transform .5s cubic-bezier(.2, .7, .2, 1);
	will-change: transform;
}
.cps-home .cps-spanel.is-active .cps-scene__item { --s: 1.03; }

/* Badge */
.cps-home .cps-spanel__badge {
	position: absolute;
	top: 22px;
	right: 22px;
	z-index: 4;
	padding: 7px 13px;
	border-radius: 999px;
	font-size: .64rem;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #0d0d0d;
	background: var(--cps-accent, #f4d300);
}
.cps-home .cps-spanel--servicio .cps-spanel__badge {
	color: var(--cps-accent, #f4d300);
	background: rgba(244, 211, 0, .16);
	border: 1px solid rgba(244, 211, 0, .55);
}
.cps-home .cps-spanel.has-media.cps-spanel--servicio .cps-spanel__badge {
	background: rgba(0, 0, 0, .4);
}

/* Contenido */
.cps-home .cps-spanel__content {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: clamp(26px, 3vw, 46px);
}
.cps-home .cps-spanel__index {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--s-muted);
}
.cps-home .cps-spanel__index::before {
	content: "";
	width: 22px;
	height: 2px;
	background: hsl(var(--h, 45) 70% 52%);
}
.cps-home .cps-spanel__title {
	margin: 10px 0 0;
	font-size: clamp(1.8rem, 1.2rem + 2vw, 3rem);
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -.02em;
	color: var(--s-ink);
}
.cps-home .cps-spanel__title::after {
	content: "";
	display: block;
	width: 52px;
	height: 4px;
	margin-top: 16px;
	border-radius: 2px;
	background: var(--cps-accent, #f4d300);
}
.cps-home .cps-spanel__desc {
	margin: 16px 0 0;
	max-width: 46ch;
	font-size: 1rem;
	line-height: 1.55;
	color: var(--s-soft);
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.cps-home .cps-spanel__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	width: fit-content;
	margin-top: 24px;
	padding: 13px 19px;
	border-radius: 999px;
	background: var(--s-ink);
	color: #fff;
	font-weight: 700;
	font-size: .85rem;
}
.cps-home .cps-spanel__cta svg { width: 18px; height: 18px; transition: transform .25s ease; }
.cps-home .cps-spanel:hover .cps-spanel__cta svg { transform: translateX(4px); }

/* Adaptación de color cuando hay foto (texto blanco + sombra, CTA amarillo) */
.cps-home .cps-spanel.has-media .cps-spanel__index { color: rgba(255, 255, 255, .85); }
.cps-home .cps-spanel.has-media .cps-spanel__index::before { background: var(--cps-accent, #f4d300); }
.cps-home .cps-spanel.has-media .cps-spanel__title {
	color: #fff;
	text-shadow: 0 2px 14px rgba(0, 0, 0, .5);
}
.cps-home .cps-spanel.has-media .cps-spanel__desc {
	color: rgba(255, 255, 255, .92);
	text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
.cps-home .cps-spanel.has-media .cps-spanel__cta {
	background: var(--cps-accent, #f4d300);
	color: #0d0d0d;
}

/* --- Responsive: el índice se oculta y el escenario se apila en tarjetas --- */
@media (max-width: 980px) {
	.cps-home .cps-silos__layout { grid-template-columns: 1fr; gap: 0; }
	.cps-home .cps-silos__index { display: none; }

	.cps-home .cps-silos__stage {
		position: static;
		min-height: 0;
		border-radius: 0;
		overflow: visible;
		box-shadow: none;
		display: flex;
		flex-direction: column;
		gap: 14px;
		margin-top: 24px;
	}
	.cps-home .cps-silos__glow { display: none; }

	.cps-home .cps-spanel {
		position: relative;
		inset: auto;
		opacity: 1;
		transform: none;
		pointer-events: auto;
		min-height: 300px;
		border-radius: 18px;
		overflow: hidden;
		box-shadow: 0 18px 40px -28px rgba(20, 22, 26, .5);
	}
	.cps-home .cps-spanel.is-active .cps-spanel__media,
	.cps-home .cps-spanel.is-active .cps-spanel__ghost { transform: none; }
}
@media (max-width: 560px) {
	.cps-home .cps-silos__title { max-width: none; }
	.cps-home .cps-silos__lead  { max-width: none; }
}

/* --- Sin animación si el usuario lo pide --- */
@media (prefers-reduced-motion: reduce) {
	.cps-home .cps-silos.cps-js .cps-srow { opacity: 1; }
	.cps-home .cps-srow,
	.cps-home .cps-srow__arrow,
	.cps-home .cps-srow__name,
	.cps-home .cps-srow__num,
	.cps-home .cps-spanel,
	.cps-home .cps-spanel__media,
	.cps-home .cps-spanel__media .cps-spanel__img,
	.cps-home .cps-scene__item,
	.cps-home .cps-spanel__ghost { transition: none; animation: none; }
	.cps-home .cps-spanel.is-active .cps-spanel__media,
	.cps-home .cps-spanel.is-active .cps-scene__item,
	.cps-home .cps-spanel.is-active .cps-spanel__ghost { transform: translate(-50%, -50%); }
}











/* ==========================================================================
   SECCIÓN "DUO" — Soporte y servicio (silos 7, 8… fuera de catálogo)
   --------------------------------------------------------------------------
   Versión CLARA, consistente con la sección de catálogo que la precede.
   Dos grandes call-to-action lado a lado, con tinte del silo hsl(var(--h)),
   texto oscuro y CTA oscuro — mismo lenguaje de marca (amarillo #f4d300,
   eyebrow, subrayador "rotulador", número fantasma). El fondo de la propia
   banda es TRANSPARENTE: se ve el fondo del body. La sección queda contenida
   al mismo ancho (1400px) que el catálogo, no a sangre, para dar continuidad.

   Si un silo tiene imagen (imagen_silo), el panel pasa a foto a sangre con
   velo y texto blanco (igual que hace .has-media en el catálogo).

   AÑADIR AL FINAL DE home.css.
   ========================================================================== */

.cps-home .cps-duo {
	/* Reutiliza la misma paleta clara que la sección de silos */
	--s-ink: #16171b;
	--s-muted: #5c5d63;
	--s-soft: #4b4c52;
	--s-line: rgba(20, 22, 26, .12);
	position: relative;
	background: transparent;          /* se ve el fondo del body */
}

/* Mismo contenedor centrado que el resto de la home (1400px) */
.cps-home .cps-duo__inner {
	width: 100%;
	max-width: 1400px;
	margin-inline: auto;
	padding-inline: 15px;
}

/* El head ya trae .cps-container en el PHP: evitamos doble contenedor
   para que cabecera y rejilla queden perfectamente alineadas. */
.cps-home .cps-duo .cps-duo__head.cps-container {
	max-width: none;
	padding-inline: 0;
	margin-inline: 0;
}

/* --- Cabecera (mismo patrón que la sección de catálogo) --- */
.cps-home .cps-duo__head {
	margin-bottom: clamp(24px, 3vw, 40px);
	color: var(--s-ink);
}
.cps-home .cps-duo__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: #3a3b40;
}
.cps-home .cps-duo__eyebrow-bar {
	width: 30px;
	height: 8px;
	border-radius: 2px;
	background: var(--cps-accent, #f4d300);
}
.cps-home .cps-duo__title {
	margin: .6rem 0 0;
	max-width: 22ch;
	font-size: clamp(1.9rem, 1.1rem + 3vw, 3.3rem);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -.02em;
	color: var(--s-ink);
}
/* Mismo subrayador "rotulador" que en el catálogo */
.cps-home .cps-duo__mark {
	padding: 0 .05em;
	background: linear-gradient(180deg, transparent 54%, rgba(244, 211, 0, .9) 54% 93%, transparent 93%);
}
.cps-home .cps-duo__lead {
	margin: 14px 0 0;
	max-width: 54ch;
	font-size: .98rem;
	line-height: 1.55;
	color: var(--s-muted);
}

/* --- Rejilla partida: 2 columnas en desktop, apila en móvil --- */
.cps-home .cps-duo__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
	gap: clamp(16px, 1.8vw, 24px);
}

/* --- Panel-CTA --- */
.cps-home .cps-dpanel {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: clamp(360px, 48vh, 520px);
	border-radius: 24px;
	overflow: hidden;
	text-decoration: none;
	color: var(--s-ink);
	isolation: isolate;
	box-shadow: 0 1px 0 rgba(20, 22, 26, .04), 0 30px 70px -40px rgba(20, 22, 26, .45);
	transition: box-shadow .35s ease, transform .35s ease;
}
.cps-home .cps-dpanel:hover {
	transform: translateY(-3px);
	box-shadow: 0 1px 0 rgba(20, 22, 26, .04), 0 40px 90px -38px rgba(20, 22, 26, .5);
}
.cps-home .cps-dpanel:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 3px var(--cps-accent, #f4d300);
}

/* Fondo CLARO con el tono del silo (idéntico al escenario del catálogo) */
.cps-home .cps-dpanel__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(150deg, hsl(var(--h, 45) 85% 94%) 0%, #ffffff 78%);
}
.cps-home .cps-dpanel__ghost {
	position: absolute;
	right: 5%;
	top: 4%;
	z-index: 0;
	font-size: clamp(5rem, 4rem + 7vw, 10rem);
	font-weight: 800;
	line-height: .8;
	letter-spacing: -.04em;
	color: hsl(var(--h, 45) 45% 70% / .35);
}

/* Imagen a sangre (si el silo tiene imagen_silo) */
.cps-home .cps-dpanel__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.cps-home .cps-dpanel__media .cps-dpanel__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transform: scale(1.04);
	transition: transform .7s cubic-bezier(.2, .7, .2, 1);
}
.cps-home .cps-dpanel:hover .cps-dpanel__img,
.cps-home .cps-dpanel:focus-visible .cps-dpanel__img {
	transform: scale(1.1);
}
/* Velo solo cuando hay foto, para legibilidad del texto blanco */
.cps-home .cps-dpanel__shade {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(8, 8, 8, .12) 0%, rgba(8, 8, 8, .46) 50%, rgba(8, 8, 8, .88) 100%);
}

/* Badge (esquina superior izquierda) */
.cps-home .cps-dpanel__badge {
	position: absolute;
	top: 22px;
	left: 22px;
	z-index: 4;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border-radius: 999px;
	font-size: .66rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #0d0d0d;
	background: var(--cps-accent, #f4d300);
}
/* Punto "en vivo" (sensación 24 h / disponible) */
.cps-home .cps-dpanel__badge::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #0d0d0d;
	animation: cps-duo-pulse 1.8s ease-in-out infinite;
}
/* Variante "servicio": badge claro con borde amarillo (como en el catálogo) */
.cps-home .cps-dpanel--servicio .cps-dpanel__badge {
	color: #8a7600;
	background: rgba(244, 211, 0, .16);
	border: 1px solid rgba(244, 211, 0, .55);
}
.cps-home .cps-dpanel--servicio .cps-dpanel__badge::before {
	background: #c7a900;
}
/* Con foto, el badge servicio se asienta sobre fondo oscuro */
.cps-home .cps-dpanel.has-media.cps-dpanel--servicio .cps-dpanel__badge {
	color: var(--cps-accent, #f4d300);
	background: rgba(0, 0, 0, .4);
}
@keyframes cps-duo-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: .35; transform: scale(.7); }
}

/* Contenido (anclado abajo a la izquierda) */
.cps-home .cps-dpanel__content {
	position: relative;
	z-index: 3;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: clamp(26px, 3.4vw, 48px);
}
.cps-home .cps-dpanel__index {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: .76rem;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--s-muted);
}
.cps-home .cps-dpanel__index::before {
	content: "";
	width: 22px;
	height: 2px;
	background: hsl(var(--h, 45) 70% 52%);
}
.cps-home .cps-dpanel__title {
	margin: 12px 0 0;
	max-width: 16ch;
	font-size: clamp(1.7rem, 1.1rem + 2.4vw, 2.8rem);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -.02em;
	color: var(--s-ink);
}
.cps-home .cps-dpanel__title::after {
	content: "";
	display: block;
	width: 52px;
	height: 4px;
	margin-top: 16px;
	border-radius: 2px;
	background: var(--cps-accent, #f4d300);
}
.cps-home .cps-dpanel__desc {
	margin: 14px 0 0;
	max-width: 46ch;
	font-size: 1rem;
	line-height: 1.55;
	color: var(--s-soft);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.cps-home .cps-dpanel__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	width: fit-content;
	margin-top: 24px;
	padding: 13px 20px;
	border-radius: 999px;
	background: var(--s-ink);
	color: #fff;
	font-weight: 700;
	font-size: .88rem;
}
.cps-home .cps-dpanel__cta svg { width: 18px; height: 18px; transition: transform .25s ease; }
.cps-home .cps-dpanel:hover .cps-dpanel__cta svg { transform: translateX(4px); }

/* Con foto: texto blanco + sombra y CTA amarillo (igual que .has-media del catálogo) */
.cps-home .cps-dpanel.has-media .cps-dpanel__index { color: rgba(255, 255, 255, .85); }
.cps-home .cps-dpanel.has-media .cps-dpanel__index::before { background: var(--cps-accent, #f4d300); }
.cps-home .cps-dpanel.has-media .cps-dpanel__title {
	color: #fff;
	text-shadow: 0 2px 14px rgba(0, 0, 0, .5);
}
.cps-home .cps-dpanel.has-media .cps-dpanel__desc {
	color: rgba(255, 255, 255, .92);
	text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
.cps-home .cps-dpanel.has-media .cps-dpanel__cta {
	background: var(--cps-accent, #f4d300);
	color: #0d0d0d;
}

/* --- Responsive --- */
@media (max-width: 860px) {
	.cps-home .cps-duo__grid { gap: 14px; }
	.cps-home .cps-dpanel {
		min-height: 320px;
		border-radius: 18px;
	}
}

/* --- Sin animación si el usuario lo pide --- */
@media (prefers-reduced-motion: reduce) {
	.cps-home .cps-dpanel,
	.cps-home .cps-dpanel__img,
	.cps-home .cps-dpanel__cta svg { transition: none; }
	.cps-home .cps-dpanel:hover { transform: none; }
	.cps-home .cps-dpanel:hover .cps-dpanel__img { transform: scale(1.04); }
	.cps-home .cps-dpanel__badge::before { animation: none; }
}