/*
 * Categorías de la página Marcas (Alimentos, Confites, Mascotas).
 *
 *   Contenedor sección                → category-showcase
 *     Contenedor cabecera             → category-showcase__head
 *       Editor de texto               → category-showcase__kicker eyebrow eyebrow--plain
 *       Título (H2)                   → category-showcase__heading
 *       Editor de texto               → category-showcase__lead
 *     Contenedor lista                → category-showcase__list
 *       Contenedor tarjeta            → category-showcase__item category-showcase__item--food|candy|pet
 *         Contenedor bodegón          → category-showcase__visual
 *           Editor de texto           → category-showcase__number   (número gigante)
 *           Contenedor productos      → category-showcase__products
 *             Imagen × N              → category-showcase__product
 *         Contenedor textos           → category-showcase__body
 *           Editor de texto           → category-showcase__eyebrow eyebrow eyebrow--plain
 *           Título (H3)               → category-showcase__title
 *           Editor de texto           → category-showcase__tagline
 *           Editor de texto           → category-showcase__text
 *           Editor de texto (lista)   → category-showcase__chips
 *           Contenedor logos          → category-showcase__logos
 *             Imagen × N              → category-showcase__logo
 *           Botón                     → category-showcase__button btn
 *
 * Los colores de cada categoría viven en el modificador de la tarjeta:
 *   --c = color fuerte, --t = fondo suave.
 */

.category-showcase {
	display: block;
	width: 100%;
	padding: clamp(40px, 5vw, 72px) var(--wrap-gutter);
}

.category-showcase__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	row-gap: 0;
	margin-bottom: clamp(26px, 3vw, 44px);
}
.category-showcase__kicker { margin: 0; }
.category-showcase__heading { margin: 14px 0 0; }
.category-showcase__heading .elementor-heading-title {
	font-family: var(--font-display);
	font-size: clamp(30px, 3.8vw, 54px);
	font-weight: 800;
	letter-spacing: -.04em;
	line-height: 1.04;
	color: var(--color-ink);
}
.category-showcase__lead { max-width: 32em; margin: 12px 0 0; }
.category-showcase__lead p {
	margin: 0;
	font-size: 18px;
	line-height: 1.55;
	color: var(--color-muted);
}

.category-showcase__list {
	display: grid !important; /* Elementor fuerza flex en sus contenedores */
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(18px, 2.4vw, 32px);
}

/* ---- Tarjeta ---- */
.category-showcase__item {
	display: grid !important; /* ídem */
	grid-template-columns: minmax(0, 1fr);
	row-gap: 0;
	column-gap: 0;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--color-line);
	border-radius: clamp(26px, 3vw, 40px);
	transition: border-color .3s, box-shadow .3s;
}
.category-showcase__item:hover {
	border-color: var(--c);
	box-shadow: 0 18px 44px rgba(41, 33, 31, .09);
	--lift: -8px; /* los productos suben al pasar el cursor sobre la tarjeta */
}

/* Colores por categoría */
.category-showcase__item--food { --c: #D7261E; --t: #FFF1EB; }
.category-showcase__item--candy { --c: #6B3A1F; --t: #F8EFE8; --visual-order: 2; --products-w: 23%; }
.category-showcase__item--pet { --c: #A52C35; --t: #FFF0EF; --products-w: 34%; }

/* ---- Bodegón ---- */
.category-showcase__visual {
	position: relative;
	isolation: isolate; /* la mezcla multiply de las fotos solo se combina con este fondo */
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--t);
}
/* La "mesa" del bodegón: franja inferior (decorativa, sin contenido). */
.category-showcase__visual::before {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 20%;
	background: color-mix(in srgb, var(--c) 20%, var(--t));
	border-top: 2px solid color-mix(in srgb, var(--c) 34%, var(--t));
}

.category-showcase__number {
	position: absolute;
	left: clamp(20px, 2.4vw, 34px);
	top: clamp(10px, 1.6vw, 20px);
	margin: 0;
	width: auto;
	pointer-events: none;
	opacity: .12;
}
.category-showcase__number p {
	margin: 0;
	font-size: clamp(80px, 10vw, 150px);
	font-weight: 800;
	letter-spacing: -.06em;
	line-height: 1;
	color: var(--c);
}

.category-showcase__products {
	position: absolute !important; /* Elementor pone position:relative en sus contenedores */
	inset: 16% 4% 12%;
	/* Elementor fija width:100% en sus contenedores: sin esto ignora el inset derecho y los productos se salen. */
	width: auto !important;
	max-width: none !important;
	display: flex !important;
	flex-direction: row !important;
	align-items: flex-end;
	justify-content: center;
	gap: 2% !important;
}

/* La mezcla va en el widget (en la imagen interna no funciona con el z-index del widget). */
.category-showcase__product {
	flex: 0 1 var(--products-w, 23%);
	min-width: 0;
	width: auto;
	max-width: var(--products-w, 23%);
	height: 84%;
	margin: 0;
	mix-blend-mode: multiply;
}
.category-showcase__product .elementor-widget-container { height: 100%; }
.category-showcase__product img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center bottom;
	transform: translateY(var(--lift, 0));
	transition: transform .6s var(--ease-out);
}
.category-showcase__product:nth-child(2) img { transition-delay: .05s; }
.category-showcase__product:nth-child(3) img { transition-delay: .1s; }
.category-showcase__product:nth-child(4) img { transition-delay: .15s; }

/* ---- Textos ---- */
.category-showcase__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	row-gap: 12px;
	padding: clamp(26px, 3.4vw, 52px);
}
.category-showcase__body > * { margin: 0; }

.category-showcase__eyebrow { --eyebrow-color: var(--c); }

.category-showcase__title .elementor-heading-title {
	font-family: var(--font-display);
	font-size: clamp(32px, 3.6vw, 52px);
	font-weight: 800;
	letter-spacing: -.045em;
	line-height: 1.04;
	color: var(--color-ink);
}

.category-showcase__tagline p {
	margin: 0;
	font-size: clamp(17px, 1.4vw, 20px);
	font-weight: 700;
	line-height: 1.4;
	color: var(--c);
}

.category-showcase__text p {
	margin: 0;
	font-size: clamp(16px, 1.2vw, 17px);
	line-height: 1.55;
	color: var(--color-muted);
}

/* Lista de submarcas/productos dentro del Editor de texto: se apunta a <ul> y <li>. */
.category-showcase__chips { margin-top: 4px; }
.category-showcase__chips ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.category-showcase__chips li {
	margin: 0;
	padding: 5px 12px;
	border-radius: var(--radius-pill);
	background: var(--t);
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.55;
	color: var(--c);
}

.category-showcase__logos {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 10px !important;
	margin-top: 6px !important;
}
/* Cada logo va en su cajita: el borde está en el widget y la imagen se ajusta dentro. */
.category-showcase__logo {
	display: grid;
	place-items: center;
	width: auto;
	height: 46px;
	margin: 0;
	padding: 0 10px;
	border: 1px solid var(--color-line);
	border-radius: 14px;
	background: #fff;
}
.category-showcase__logo img {
	width: auto;
	height: 22px;
	max-width: 96px;
	object-fit: contain;
}

.category-showcase__button { margin-top: 10px !important; align-self: stretch; }
.category-showcase__button .elementor-button {
	width: 100%;
	gap: 8px;
	background: var(--c);
	color: #fff;
}
.category-showcase__button .elementor-button:hover { background: var(--color-ink); }
.category-showcase__button .elementor-button-content-wrapper { gap: 8px; align-items: center; }
.category-showcase__button .elementor-button-icon i { font-size: 15px; }

@media (min-width: 768px) {
	.category-showcase__logo { padding: 0 16px; height: 52px; }
	.category-showcase__logo img { height: 28px; max-width: 110px; }
	.category-showcase__button { align-self: flex-start; }
	.category-showcase__button .elementor-button { width: auto; }
}

@media (min-width: 1025px) {
	.category-showcase__item { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
	.category-showcase__visual {
		order: var(--visual-order, 0); /* en las tarjetas pares el bodegón va a la derecha */
		aspect-ratio: auto;
		min-height: clamp(300px, 30vw, 420px);
	}
	.category-showcase__products { inset: 16% 5% 9%; }
}

@media (prefers-reduced-motion: reduce) {
	.category-showcase__item,
	.category-showcase__product img { transition: none; }
}