/*
 * Tarjeta de categoría con efecto "cortina": al pasar el mouse, la foto sube y deja ver un fondo
 * de color con un texto y un botón. En pantallas táctiles se muestra "Conoce más →" debajo.
 *
 *   Contenedor con enlace (Avanzado → Enlace) → cat-card cat-card--red | --brown | --wine
 *     Contenedor                              → cat-card__wrap
 *       Contenedor del fondo de color         → cat-card__reveal
 *         Editor de texto                     → cat-card__reveal-text
 *         Editor de texto (parece botón)      → cat-card__cta
 *       Imagen (la foto)                      → cat-card__photo
 *     Título                                  → cat-card__title
 *     Editor de texto                         → cat-card__more
 *
 * Modificador cat-card--wide: en tablet la tarjeta ocupa las dos columnas.
 * El efecto hover usa ".cat-card:hover .elemento": es estado de la tarjeta completa (excepción a "una clase").
 */

.cat-card {
	--cat-color: var(--color-brand-red);
	--cat-x: 50%;
	gap: 0;
	color: var(--color-ink);
	text-decoration: none;
}
.cat-card--red { --cat-color: var(--color-brand-red); --cat-x: 62%; }
.cat-card--brown { --cat-color: #6B3A1F; --cat-x: 72%; }
.cat-card--wine { --cat-color: #A52C35; --cat-x: 66%; }

.cat-card__wrap {
	position: relative;
	gap: 0;
	border-radius: 24px;
	overflow: hidden;
	background: var(--cat-color);
}

/* Fondo de color que queda debajo de la foto */
.cat-card__reveal {
	position: absolute;
	inset: 0;
	z-index: 0;
	align-items: flex-start;
	justify-content: center;
	gap: 16px;
	padding: clamp(22px, 2.6vw, 36px);
	color: #fff;
}
.cat-card__reveal-text p {
	margin: 0;
	font-size: clamp(22px, 2vw, 30px);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -.03em;
	color: #fff;
}
.cat-card__cta p {
	display: inline-block;
	margin: 0;
	padding: 14px 26px;
	border-radius: var(--radius-pill);
	background: #fff;
	font-weight: 700;
	line-height: 1.55;
	color: var(--cat-color);
}
.cat-card__reveal-text,
.cat-card__cta {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .4s .25s, transform .5s .25s var(--ease-out);
}
.cat-card__cta { transition-delay: .35s; }

/* La foto tapa el fondo y se recorta hacia arriba en hover. Apunta al <img> interno del widget. */
.cat-card__photo {
	position: relative;
	z-index: 1;
	margin: 0;
	aspect-ratio: 1.6 / 1;
	clip-path: inset(0 0 0 0);
	transition: clip-path .7s var(--ease-swap);
}
.cat-card__photo .elementor-widget-container { height: 100%; }
.cat-card__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--cat-x) center;
}

.cat-card:hover .cat-card__photo,
.cat-card:focus-visible .cat-card__photo { clip-path: inset(0 0 100% 0); }
.cat-card:hover .cat-card__reveal-text,
.cat-card:hover .cat-card__cta,
.cat-card:focus-visible .cat-card__reveal-text,
.cat-card:focus-visible .cat-card__cta { opacity: 1; transform: none; }

/* Espacio con padding: Elementor anula el margin de los widgets. */
.cat-card__title { padding-top: 10px; }
.cat-card__title .elementor-heading-title {
	margin: 0;
	font-size: 17px;
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -.02em;
}

.cat-card__more { display: none; }
.cat-card__more p {
	margin: 4px 0 0;
	font-size: 15px;
	font-weight: 700;
	color: var(--cat-color);
}
@media (hover: none) and (pointer: coarse) {
	.cat-card__more { display: block; }
}

@media (min-width: 768px) {
	.cat-card__photo { aspect-ratio: 1.25 / 1; }
	.cat-card__title { padding-top: 14px; }
	.cat-card__title .elementor-heading-title { font-size: clamp(20px, 1.8vw, 24px); }
}

/* Tablet: la tarjeta marcada como ancha ocupa las dos columnas. */
@media (min-width: 768px) and (max-width: 1024px) {
	.cat-card--wide { grid-column: 1 / -1; }
	.cat-card--wide .cat-card__photo { aspect-ratio: 2.2 / 1; }
}

@media (prefers-reduced-motion: reduce) {
	.cat-card__photo,
	.cat-card__reveal-text,
	.cat-card__cta { transition: none; }
}