/* Visit Cali – Eventos. Usa los tokens del tema si existen. */
:root {
	--vce-orange: var(--vc-orange, #E95D0B);
	--vce-yellow: var(--vc-yellow, #F9A01B);
	--vce-dark: var(--vc-dark, #190A01);
	--vce-cream: var(--vc-cream, #FFFCED);
	--vce-serif: var(--vc-serif, 'Trirong', Georgia, serif);
	--vce-sans: var(--vc-sans, 'DM Sans', system-ui, sans-serif);
	--vce-notch: var(--vc-events-bg, #190A01); /* color del fondo detrás de las tarjetas (muescas de la boleta) */
}

.vce { position: relative; --vce-ink: var(--vce-dark); --vce-ink-on: var(--vce-cream); } /* sobre fondo claro: flechas oscuras */
.vce--dark, .vc-events .vce { --vce-ink: var(--vce-cream); --vce-ink-on: var(--vce-dark); } /* sobre fondo oscuro: flechas claras */
.vce-track {
	list-style: none; margin: 0; padding: 0 var(--vce-gutter, 0) 1rem;
	display: flex; gap: clamp(1rem, 2.8vw, 3.4rem);
	overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
	scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.vce-track::-webkit-scrollbar { display: none; }
.vce-track:focus-visible { outline: 2px solid var(--vce-yellow); outline-offset: 4px; }

.vce-card {
	--vce-c: var(--vce-orange);
	flex: 0 0 clamp(270px, 24.6vw, 474px); scroll-snap-align: start;
	display: flex; flex-direction: column; position: relative;
	background: color-mix(in srgb, var(--vce-c) 33%, #fff);
	border-radius: clamp(20px, 2vw, 36px); overflow: hidden;
	color: var(--vce-dark); font-family: var(--vce-sans);
}
/* Verde oscuro y azul: la mezcla al 33 % queda muy apagada, se compensa. */
.vce-card[data-cat="sports"]  { background: color-mix(in srgb, var(--vce-c) 22%, #fff); }
.vce-card[data-cat="health"]  { background: color-mix(in srgb, var(--vce-c) 55%, #fff); }

.vce-card__media { position: relative; aspect-ratio: 474 / 335; background: var(--vce-dark); overflow: hidden; }
.vce-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vce-card__noimg { position: absolute; inset: 0; background: linear-gradient(135deg, var(--vce-c), var(--vce-dark)); }

.vce-date {
	position: absolute; top: 6%; left: 4.5%;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	min-width: 3.6em; padding: .4em .7em; border-radius: .7em;
	background: var(--vce-cream); color: var(--vce-orange); text-align: center;
	font: 700 clamp(calc(.95rem * var(--vc-ts, 1)), calc(1.35vw * var(--vc-ts, 1)), calc(1.6rem * var(--vc-ts, 1)))/1 var(--vce-sans); letter-spacing: .02em;
	box-shadow: 0 2px 8px rgba(25,10,1,.2);
}
.vce-date__m { font-size: .72em; letter-spacing: .18em; }
.vce-date__d { font-size: 1.15em; color: #8B3600; margin-top: .2em; white-space: nowrap; }

.vce-card__body { padding: clamp(1rem, 1.6vw, 1.9rem) clamp(1rem, 1.7vw, 2rem) .4rem; flex: 1; }
.vce-card__title { margin: 0 0 .5em; font: 700 clamp(calc(1.15rem * var(--vc-ts, 1)), calc(1.75vw * var(--vc-ts, 1)), calc(2.1rem * var(--vc-ts, 1)))/1.05 var(--vce-sans); }
.vce-line { display: flex; align-items: center; gap: .55em; margin: .15em 0; font: 400 clamp(calc(.95rem * var(--vc-ts, 1)), calc(1.45vw * var(--vc-ts, 1)), calc(1.7rem * var(--vc-ts, 1)))/1.25 var(--vce-sans); }
.vce-line svg { flex: 0 0 auto; color: var(--vce-yellow); width: 1.15em; height: 1.15em; }
.vce-tags { display: flex; align-items: center; flex-wrap: wrap; gap: .8em; margin: 1.1em 0 .9em; }
.vce-pill { height: clamp(26px, 2.2vw, 40px); width: auto; display: block; }
.vce-type { font: italic 600 clamp(calc(.85rem * var(--vc-ts, 1)), calc(1.1vw * var(--vc-ts, 1)), calc(1.3rem * var(--vc-ts, 1)))/1 var(--vce-serif); }

/* Boleta: línea punteada con muescas a los lados */
.vce-card__cta {
	position: relative; display: flex; align-items: center; gap: .8em;
	padding: clamp(.9rem, 1.5vw, 1.6rem) clamp(1rem, 1.7vw, 2rem);
	margin-top: .6rem; color: inherit; text-decoration: none;
	font: 400 clamp(calc(1rem * var(--vc-ts, 1)), calc(1.6vw * var(--vc-ts, 1)), calc(1.9rem * var(--vc-ts, 1)))/1.2 var(--vce-sans);
	border-top: 2px dashed var(--vce-dark);
}
.vce-card__cta::before, .vce-card__cta::after {
	content: ""; position: absolute; top: 0; width: clamp(16px, 1.6vw, 30px); aspect-ratio: 1; border-radius: 50%;
	background: var(--vce-notch); transform: translateY(-50%);
}
.vce-card__cta::before { left: 0; transform: translate(-50%, -50%); }
.vce-card__cta::after { right: 0; transform: translate(50%, -50%); }
.vce-dot { width: .55em; height: .55em; border-radius: 50%; background: var(--vce-orange); flex: 0 0 auto; }
.vce-cta__in { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: .8em; }
.vce-cta__in::before { content: ""; position: absolute; z-index: -1; inset: -.3em -.6em; border-radius: 999px; background-color: color-mix(in srgb, var(--vce-orange) 14%, transparent); background-image: linear-gradient(105deg, transparent 32%, rgba(255,255,255,.6) 50%, transparent 68%); background-size: 260% 100%; background-position: 170% 0; box-shadow: inset 0 0 0 1.5px var(--vce-orange); opacity: 0; transform: scale(.88); transition: opacity .25s cubic-bezier(.16,1,.3,1), transform .35s cubic-bezier(.16,1,.3,1); }
.vce-card__cta:hover .vce-cta__in::before, .vce-card__cta:focus-visible .vce-cta__in::before { opacity: 1; transform: none; animation: vce-sheen 1000ms cubic-bezier(.16,1,.3,1) 1 both; }
.vce-card__cta .vce-dot { transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.vce-card__cta:hover .vce-dot, .vce-card__cta:focus-visible .vce-dot { transform: scale(1.35); }
@keyframes vce-sheen { from { background-position: 170% 0; } to { background-position: -70% 0; } }
@media (prefers-reduced-motion: reduce) { .vce-card__cta:hover .vce-cta__in::before { animation: none; } }

.vce-nav { display: flex; justify-content: flex-end; gap: 1rem; margin-top: 1.5rem; }
.vce-btn { --dir: 1; position: relative; display: grid; place-items: center; width: clamp(3rem, 3.6vw, 4.2rem); aspect-ratio: 1; padding: 0; border-radius: 50%; background: transparent; border: 2px solid var(--vce-ink); color: var(--vce-ink); cursor: pointer; transition: background .25s, color .25s, transform .3s cubic-bezier(.16,1,.3,1), opacity .2s; }
.vce-btn--prev { --dir: -1; }
.vce-btn:not([disabled]):hover, .vce-btn:not([disabled]):focus-visible { background: var(--vce-ink); color: var(--vce-ink-on); transform: scale(1.1); }
.vce-btn:focus-visible { outline: 3px solid var(--vce-orange); outline-offset: 3px; }
.vce-btn:not([disabled]):active { transform: scale(.92); }
.vce-arrow { width: 46%; height: auto; display: block; transform: scaleX(var(--dir)); }
/* Reposo con vida: un pequeño rebote del control (solo el habilitado); al pasar el mouse se queda quieto. */
.vce-btn:not([disabled]):not(:hover):not(:focus-visible) { animation: vce-bounce 3.6s cubic-bezier(.3, 0, .2, 1) infinite; }
.vce-btn--prev:not([disabled]):not(:hover):not(:focus-visible) { animation-delay: 1.8s; }
.vce-btn[disabled] { opacity: .35; cursor: default; }
@keyframes vce-bounce { 0%, 46%, 100% { translate: 0 0; } 56% { translate: calc(var(--dir) * 8px) 0; } 66% { translate: 0 0; } 74% { translate: calc(var(--dir) * 3px) 0; } 82% { translate: 0 0; } }
@media (max-width: 700px) {
	.vce-nav { justify-content: center; gap: .9rem; }
	.vce-btn { width: 3.2rem; }
	.vce-btn { animation: none !important; }
}
@media (prefers-reduced-motion: reduce) { .vce-btn { animation: none !important; } }
.vce-empty { color: var(--vce-ink, currentColor); font: 400 1.25rem/1.4 var(--vce-sans); }

.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .vce-track { scroll-behavior: auto; } }

/* Vida: el cartel se acerca al pasar el mouse y la fecha «salta» al entrar la tarjeta. */
.vce-card__media img { transition: transform 600ms cubic-bezier(.16, 1, .3, 1); }
.vce-card:hover .vce-card__media img, .vce-card:focus-within .vce-card__media img { transform: scale(1.05); }
.vce-card.is-in .vce-date { animation: vce-pop 560ms cubic-bezier(.34, 1.56, .64, 1) 260ms both; }
@keyframes vce-pop { from { opacity: 0; transform: translateY(-8px) scale(.7) rotate(-6deg); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
	.vce-card.is-in .vce-date { animation: none; }
	.vce-card:hover .vce-card__media img, .vce-card:focus-within .vce-card__media img { transform: none; }
}
.vc-events .vce-empty { color: var(--vce-cream); }