/* Visit Cali – Imperdibles. Usa los tokens del tema si existen; si no, valores de la paleta de marca. */
:root {
	--vci-orange: var(--vc-orange, #E95D0B);
	--vci-yellow: var(--vc-yellow, #F9A01B);
	--vci-dark: var(--vc-dark, #190A01);
	--vci-cream: var(--vc-cream, #FFFCED);
	--vci-serif: var(--vc-serif, 'Trirong', Georgia, serif);
	--vci-sans: var(--vc-sans, 'DM Sans', system-ui, sans-serif);
}

/* ---------- Carrusel (Home) ---------- */
.vci-stage { --vci-h: clamp(360px, 38vw, 640px); position: relative; max-width: 1920px; margin: 0 auto; padding: 0 0 2rem; overflow: hidden; }
.vci-slides { list-style: none; margin: 0 auto; padding: 0; position: relative; height: var(--vci-h); }
.vci-slide {
	position: absolute; top: 50%; left: 50%;
	width: clamp(220px, 28.5vw, 546px); aspect-ratio: 546 / 640;
	transition: transform .6s cubic-bezier(.22,.8,.3,1), opacity .5s, filter .5s;
	transform: translate(-50%, -50%) scale(.6); opacity: 0; pointer-events: none; z-index: 0;
}
.vci-slide[data-pos="0"]  { transform: translate(-50%, -50%) scale(1); opacity: 1; z-index: 3; pointer-events: auto; }
.vci-slide[data-pos="-1"] { transform: translate(-103%, -46%) scale(.86) rotate(-5deg); opacity: 1; z-index: 2; pointer-events: auto; filter: saturate(.9); }
.vci-slide[data-pos="1"]  { transform: translate(3%, -46%) scale(.86) rotate(5deg); opacity: 1; z-index: 2; pointer-events: auto; filter: saturate(.9); }
.vci-slide[data-pos="-2"] { transform: translate(-150%, -42%) scale(.72) rotate(-8deg); opacity: 1; z-index: 1; pointer-events: auto; }
.vci-slide[data-pos="2"]  { transform: translate(50%, -42%) scale(.72) rotate(8deg); opacity: 1; z-index: 1; pointer-events: auto; }

.vci-card { position: relative; display: block; width: 100%; height: 100%; border-radius: clamp(24px, 3.4vw, 64px); overflow: hidden; color: #fff; text-decoration: none; background: #ddd; box-shadow: 0 18px 40px rgba(25,10,1,.18); }
.vci-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vci-img--empty { background: linear-gradient(135deg, var(--vci-yellow), var(--vci-orange)); }
.vci-card__text { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 5% 6%; display: flex; flex-direction: column; align-items: flex-start; gap: .6em; background: linear-gradient(to top, rgba(25,10,1,.55), transparent); padding-top: 22%; opacity: 0; transition: opacity .4s; }
.vci-slide[data-pos="0"] .vci-card__text { opacity: 1; }
.vci-card__title { font: 700 clamp(calc(1.8rem * var(--vc-ts, 1)), calc(4.2vw * var(--vc-ts, 1)), calc(4.4rem * var(--vc-ts, 1)))/.95 var(--vci-sans); color: var(--vci-orange); letter-spacing: -.02em; text-shadow: 0 2px 0 rgba(255,252,237,.35); }
.vci-card__tag { display: inline-block; font: 400 clamp(calc(.85rem * var(--vc-ts, 1)), calc(1.15vw * var(--vc-ts, 1)), calc(1.4rem * var(--vc-ts, 1)))/1.2 var(--vci-sans); color: var(--vci-dark); background: var(--vci-yellow); border-radius: 999px; padding: .55em 1.1em; }

/* Controles: a los lados de las tarjetas en pantallas grandes; debajo, centrados, en pantallas reducidas. */
.vci-nav { position: absolute; z-index: 6; left: 0; right: 0; top: 0; height: var(--vci-h); display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(.75rem, 2.4vw, 4rem); pointer-events: none; }
.vci-btn { --dir: 1; position: relative; display: grid; place-items: center; width: clamp(3rem, 4vw, 4.6rem); aspect-ratio: 1; padding: 0; border-radius: 50%; background: rgba(255,252,237,.55); border: 2px solid var(--vci-dark); color: var(--vci-dark); cursor: pointer; pointer-events: auto; backdrop-filter: blur(3px); transition: background .25s, color .25s, transform .3s cubic-bezier(.16,1,.3,1); }
.vci-btn--prev { --dir: -1; }
.vci-btn:hover, .vci-btn:focus-visible { background: var(--vci-dark); color: var(--vci-cream); transform: scale(1.1); }
.vci-btn:focus-visible { outline: 3px solid var(--vci-orange); outline-offset: 3px; }
.vci-btn:active { transform: scale(.92); }
.vci-arrow { width: 46%; height: auto; display: block; transform: scaleX(var(--dir)); }
/* Reposo con vida: un pequeño rebote del control hacia el lado que apunta; al pasar el mouse se queda quieto. */
.vci-btn:not(:hover):not(:focus-visible) { animation: vci-bounce 3.6s cubic-bezier(.3, 0, .2, 1) infinite; }
.vci-btn--prev:not(:hover):not(:focus-visible) { animation-delay: 1.8s; }
@keyframes vci-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; } }
/* La tarjeta central «respira» apenas. */
.vci-slide[data-pos="0"] .vci-card { animation: vci-float 7s ease-in-out infinite; }
@keyframes vci-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

@media (max-width: 760px) {
	.vci-nav { position: static; height: auto; justify-content: center; gap: 1rem; margin-top: 1.1rem; padding: 0; pointer-events: auto; }
	.vci-btn { width: 3.2rem; background: transparent; backdrop-filter: none; }
}
/* Celulares: sin animaciones decorativas en los controles ni en la tarjeta. */
@media (max-width: 700px) {
	.vci-btn, .vci-btn:not(:hover):not(:focus-visible), .vci-slide[data-pos="0"] .vci-card { animation: none; }
}

/* ---------- «Start here» (What to Do) ---------- */
.vci-start { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.75rem, 1.6vw, 2rem); }
.vci-start__card { display: flex; align-items: center; gap: 1.1rem; padding: 1.1rem 1.4rem; background: #fff; border: 2px solid var(--vci-yellow); border-radius: 1.4rem; color: var(--vci-dark); text-decoration: none; transition: transform .2s, box-shadow .2s; height: 100%; box-sizing: border-box; }
.vci-start__card:hover, .vci-start__card:focus-visible { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(249,160,27,.28); }
.vci-pin { flex: 0 0 auto; width: 2.6rem; height: 3.4rem; color: var(--vci-yellow); }
.vci-start__body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.vci-start__title { font: 700 clamp(calc(1.05rem * var(--vc-ts, 1)), calc(1.55vw * var(--vc-ts, 1)), calc(1.6rem * var(--vc-ts, 1)))/1.15 var(--vci-sans); }
.vci-start__meta { font: 400 clamp(calc(.9rem * var(--vc-ts, 1)), calc(1.2vw * var(--vc-ts, 1)), calc(1.25rem * var(--vc-ts, 1)))/1.2 var(--vci-sans); }
.vci-start__meta em { font-style: italic; }
.vci-sep { margin: 0 .5em; }

@media (max-width: 900px) {
	.vci-start { grid-template-columns: 1fr; }
	.vci-slide[data-pos="-2"], .vci-slide[data-pos="2"] { opacity: 0; pointer-events: none; }
	.vci-slide[data-pos="-1"] { transform: translate(-92%, -46%) scale(.8) rotate(-5deg); }
	.vci-slide[data-pos="1"]  { transform: translate(-8%, -46%) scale(.8) rotate(5deg); }
}
@media (prefers-reduced-motion: reduce) {
	.vci-slide, .vci-card__text, .vci-start__card { transition: none; }
	.vci-btn, .vci-btn:not(:hover):not(:focus-visible), .vci-slide[data-pos="0"] .vci-card { animation: none; }
}