/* ==========================================================================
   YS Categorías — franja de 4 columnas con foto, degradado de marca y vida
   Identidad visual: navy #00247e · acento naranja #cd7d0b
   ========================================================================== */

.ys-cats {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.ys-cats__row {
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
	margin: 0;
}

.ys-cats__col {
	flex: 1 1 25%;
	min-width: 270px;
	padding: 0;
}

/* ---------- Card ---------- */
.ys-cat {
	position: relative;
	height: 100%;
	min-height: 360px;
	padding: 0;
	display: flex;
	overflow: hidden;
	cursor: pointer;
	isolation: isolate;
	opacity: 0;
	transform: translateY(28px);
	transition: transform .5s cubic-bezier(.2, .8, .2, 1), opacity .5s ease;
}

.ys-cats.is-visible .ys-cat {
	opacity: 1;
	transform: translateY(0);
}

.ys-cats.is-visible .ys-cats__col:nth-child(1) .ys-cat { transition-delay: .05s; }
.ys-cats.is-visible .ys-cats__col:nth-child(2) .ys-cat { transition-delay: .15s; }
.ys-cats.is-visible .ys-cats__col:nth-child(3) .ys-cat { transition-delay: .25s; }
.ys-cats.is-visible .ys-cats__col:nth-child(4) .ys-cat { transition-delay: .35s; }

/* ---------- Photo background with subtle ken-burns life ---------- */
.ys-cat__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: #0c1f5e;
	background-size: cover;
	background-position: center;
	transform: scale(1.08);
	animation: ysCatBreathe 9s ease-in-out infinite alternate;
	transition: transform .8s cubic-bezier(.2, .8, .2, 1), filter .5s ease;
	filter: saturate(.9);
}

.ys-cat:hover .ys-cat__bg {
	transform: scale(1.18);
	filter: saturate(1.15);
	animation-play-state: paused;
}

@keyframes ysCatBreathe {
	from { transform: scale(1.08) translateY(0); }
	to   { transform: scale(1.15) translateY(-2%); }
}

/* ---------- Brand gradient overlay (always alive, slow shift) ---------- */
.ys-cat__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(165deg,
			rgba(var(--ys-tint), .94) 0%,
			rgba(var(--ys-tint), .82) 38%,
			rgba(var(--ys-tint), .35) 75%,
			rgba(var(--ys-tint), .15) 100%);
	background-size: 180% 180%;
	background-position: 0% 0%;
	animation: ysCatShift 7s ease-in-out infinite alternate;
}

@keyframes ysCatShift {
	from { background-position: 0% 0%; }
	to   { background-position: 100% 60%; }
}

/* thin animated accent line on hover */
.ys-cat::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 4px;
	background: linear-gradient(90deg, #cd7d0b, #f0a93a, #cd7d0b);
	background-size: 200% 100%;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .45s cubic-bezier(.2, .8, .2, 1);
	z-index: 3;
	animation: ysCatGlide 3s linear infinite;
}

.ys-cat:hover::after {
	transform: scaleX(1);
}

@keyframes ysCatGlide {
	from { background-position: 0% 0; }
	to   { background-position: -200% 0; }
}

/* divider between columns */
.ys-cats__col:not(:last-child) .ys-cat {
	border-right: 1px solid rgba(255, 255, 255, .12);
}

/* ---------- Body content ---------- */
.ys-cat__body {
	position: relative;
	z-index: 2;
	width: 100%;
	padding: 34px 28px 30px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	justify-content: flex-end;
}

/* ---------- Icon ---------- */
.ys-cat__icon {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	color: #fff;
	background: rgba(255, 255, 255, .14);
	border: 1.5px solid rgba(255, 255, 255, .45);
	backdrop-filter: blur(6px);
	transition: transform .45s cubic-bezier(.2, .8, .2, 1), background .35s ease, box-shadow .35s ease;
	animation: ysCatPulse 2.6s ease-in-out infinite;
}

@keyframes ysCatPulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(240, 169, 58, .35); }
	50% { box-shadow: 0 0 0 10px rgba(240, 169, 58, 0); }
}

.ys-cat:hover .ys-cat__icon {
	transform: rotate(-10deg) scale(1.12);
	background: #cd7d0b;
	border-color: #cd7d0b;
}

/* ---------- Text ---------- */
.ys-cat__title {
	font-family: 'Barlow', sans-serif;
	font-size: 19px;
	font-weight: 700;
	letter-spacing: .01em;
	line-height: 1.3;
	margin: 0;
	color: #ffffff;
	text-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}

.ys-cat__text {
	font-family: 'Lato', sans-serif;
	font-size: 13.5px;
	line-height: 1.6;
	margin: 0;
	color: rgba(255, 255, 255, .85);
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height .45s cubic-bezier(.2, .8, .2, 1), opacity .35s ease;
}

.ys-cat:hover .ys-cat__text {
	max-height: 80px;
	opacity: 1;
}

/* ---------- Link button ---------- */
.ys-cat__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	align-self: flex-start;
	font-family: 'Barlow', sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	text-decoration: none;
	color: #fff;
	padding: 0;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transform: translateY(6px);
	transition: max-height .4s cubic-bezier(.2, .8, .2, 1), opacity .35s ease, transform .35s ease;
}

.ys-cat:hover .ys-cat__link {
	max-height: 30px;
	opacity: 1;
	transform: translateY(0);
}

.ys-cat__link span {
	border-bottom: 1.5px solid #f0a93a;
	padding-bottom: 2px;
}

.ys-cat__link i {
	color: #f0a93a;
	transition: transform .3s ease;
}

.ys-cat:hover .ys-cat__link i {
	transform: translateX(5px);
}

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
	.ys-cats__col { flex: 1 1 50%; }
	.ys-cats__col:nth-child(odd) .ys-cat { border-right: 1px solid rgba(255, 255, 255, .12); }
	.ys-cat__text,
	.ys-cat__link {
		max-height: none;
		opacity: 1;
		transform: none;
	}
}

@media (max-width: 575px) {
	.ys-cats__col { flex: 1 1 100%; }
	.ys-cats__col .ys-cat { border-right: none !important; }
	.ys-cats__col:not(:last-child) .ys-cat { border-bottom: 1px solid rgba(255, 255, 255, .12); }
	.ys-cat { min-height: 280px; }
}

@media (prefers-reduced-motion: reduce) {
	.ys-cat,
	.ys-cat__bg,
	.ys-cat__overlay,
	.ys-cat__icon,
	.ys-cat::after {
		animation: none !important;
		transition-duration: .01ms !important;
	}
}