/* ==========================================================================
   DeSol Moderno 2.0 — barra lateral de categorías + portada rotativa
   Usa los tokens --ds-* definidos en desol.css (y los del Personalizador).
   ========================================================================== */

:root {
	--ds-rail-w: 292px;
	--ds-rail-w-mini: 84px;
	--ds-rail-current: var(--ds-rail-w);
	--ds-glass: color-mix(in srgb, var(--ds-bg) 86%, transparent);
}
html.ds-rail-collapsed { --ds-rail-current: var(--ds-rail-w-mini); }

/* ---------- 1. Desplazamiento del sitio cuando la barra está fija ---------- */
@media (min-width: 1100px) {
	body.desol-rail-on #page {
		margin-left: var(--ds-rail-current);
		transition: margin-left .35s var(--ds-ease);
	}
	body.desol-rail-on .vi-wcaio-sidebar-cart-icon-wrap-bottom_left,
	body.desol-rail-on .vi-wcaio-sidebar-cart-icon-wrap-top_left {
		left: calc(var(--ds-rail-current) + 20px) !important;
	}
}

/* ---------- 2. Barra lateral ---------- */
.ds-rail {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: 10000;
	width: var(--ds-rail-w);
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 18px 14px 14px;
	background: var(--ds-glass);
	-webkit-backdrop-filter: saturate(170%) blur(18px);
	backdrop-filter: saturate(170%) blur(18px);
	border-right: 1px solid var(--ds-line);
	font-family: var(--ds-font-body);
	color: var(--ds-ink);
	overflow: hidden;
	transition: width .35s var(--ds-ease), box-shadow .35s var(--ds-ease), transform .4s var(--ds-ease);
}
.admin-bar .ds-rail { top: 32px; }

/* Botones propios: anular los estilos genéricos de Astra para <button>. */
.ds-rail button,
.ds-rail-fab,
.ds-hero button {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	padding: 0;
	border: 0;
	min-height: 0;
	line-height: 1;
	font: inherit;
	letter-spacing: normal;
	text-transform: none;
	box-shadow: none;
	cursor: pointer;
}

.ds-rail__head {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 0 4px 0 10px;
}
.ds-rail__title {
	flex: 1;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .2em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--ds-muted);
}
.ds-rail__title::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ds-berry);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--ds-berry) 16%, transparent);
}
.ds-rail .ds-rail__collapse,
.ds-rail .ds-rail__close {
	flex: none;
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	border-radius: 12px;
	background: transparent;
	color: var(--ds-muted);
	transition: background .2s, color .2s;
}
.ds-rail .ds-rail__collapse:hover,
.ds-rail .ds-rail__close:hover {
	background: var(--ds-berry-50);
	color: var(--ds-berry);
}
.ds-rail .ds-rail__close { display: none; }

/* Buscador dentro de la barra */
.ds-rail__search { padding: 0 2px; }
.ds-rail__search .dgwt-wcas-search-wrapp { max-width: none; margin: 0; }
.ds-rail__search .dgwt-wcas-sf-wrapp { box-shadow: none !important; border: 1px solid var(--ds-line); padding: 4px !important; }
.ds-rail__search .dgwt-wcas-search-input { height: 40px !important; font-size: 14px !important; padding: 0 52px 0 16px !important; }
.ds-rail__search .dgwt-wcas-search-submit { width: 40px !important; min-width: 40px !important; height: 40px !important; top: 4px !important; right: 4px !important; }
.ds-rail__search .woocommerce-product-search,
.ds-rail__search .search-form {
	display: flex;
	gap: 6px;
	padding: 4px;
	border: 1px solid var(--ds-line);
	border-radius: var(--ds-pill);
	background: #fff;
}
.ds-rail__search .woocommerce-product-search input[type="search"],
.ds-rail__search .search-form input[type="search"] {
	flex: 1;
	min-width: 0;
	border: 0 !important;
	background: transparent !important;
	padding: 8px 14px;
	box-shadow: none !important;
}
.ds-rail__search .woocommerce-product-search button,
.ds-rail__search .search-form button {
	border-radius: var(--ds-pill) !important;
	padding: 8px 16px;
	font-size: 13px;
}
.ds-rail__search label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Lista */
.ds-rail__nav {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
	margin-inline: -6px;
	padding: 2px 6px 8px;
	scrollbar-width: thin;
	scrollbar-color: var(--ds-lilac-200) transparent;
}
.ds-cats {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.ds-cats--shop {
	margin-bottom: 8px;
	padding-bottom: 8px;
	border-bottom: 1px dashed var(--ds-line);
}
.ds-cat { margin: 0; }
.ds-cat__row {
	position: relative;
	display: flex;
	align-items: center;
	border-radius: 16px;
	transition: background .2s, box-shadow .2s;
}
.ds-cat__row:hover { background: var(--ds-berry-50); }
.ds-rail .ds-cat__link {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 7px 10px 7px 7px;
	border-radius: inherit;
	color: var(--ds-ink);
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.25;
	text-decoration: none;
}
.ds-cat__thumb {
	flex: none;
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	overflow: hidden;
	border-radius: 13px;
	background: linear-gradient(140deg, color-mix(in srgb, var(--ds-berry) 16%, #fff), color-mix(in srgb, var(--ds-peach) 45%, #fff));
	color: var(--ds-berry-700);
	font-family: var(--ds-font-display);
	font-size: 17px;
	font-weight: 700;
	transition: transform .3s var(--ds-ease);
}
.ds-cat__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ds-cat__thumb--icon { background: var(--ds-ink); color: #fff; }
.ds-cat__row:hover .ds-cat__thumb { transform: scale(1.06) rotate(-3deg); }
.ds-cat__name {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.ds-cat__count {
	flex: none;
	padding: 3px 8px;
	border-radius: var(--ds-pill);
	background: color-mix(in srgb, var(--ds-berry) 9%, #fff);
	color: var(--ds-berry);
	font-size: 11px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}
.ds-rail .ds-cat__toggle {
	flex: none;
	width: 32px;
	height: 32px;
	margin-right: 6px;
	display: grid;
	place-items: center;
	border-radius: 10px;
	background: transparent;
	color: var(--ds-muted);
	transition: background .2s, color .2s;
}
.ds-rail .ds-cat__toggle:hover { background: #fff; color: var(--ds-berry); }
.ds-cat__toggle svg { transition: transform .3s var(--ds-ease); }
.ds-cat.is-open > .ds-cat__row .ds-cat__toggle svg { transform: rotate(180deg); }

/* Categoría actual */
.ds-cats--d0 > .ds-cat.is-current > .ds-cat__row {
	background: var(--ds-ink);
	box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--ds-ink) 80%, transparent);
}
.ds-cats--d0 > .ds-cat.is-current > .ds-cat__row .ds-cat__link,
.ds-cats--d0 > .ds-cat.is-current > .ds-cat__row .ds-cat__toggle { color: #fff; }
.ds-cats--d0 > .ds-cat.is-current > .ds-cat__row .ds-cat__count { background: rgba(255, 255, 255, .14); color: #fff; }
.ds-cats--d0 > .ds-cat.is-current > .ds-cat__row .ds-cat__toggle:hover { background: rgba(255, 255, 255, .12); }

/* Desplegable (animación de altura con grid) */
.ds-cat__sub {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .35s var(--ds-ease);
}
.ds-cat.is-open > .ds-cat__sub { grid-template-rows: 1fr; }
.ds-cat__sub-inner { min-height: 0; overflow: hidden; }
.ds-cats--d1,
.ds-cats--d2 {
	margin: 4px 0 8px 28px;
	padding-left: 14px;
	border-left: 1.5px solid var(--ds-line);
	gap: 0;
}
.ds-cats--d1 .ds-cat__row { border-radius: 10px; }
.ds-rail .ds-cats--d1 .ds-cat__link,
.ds-rail .ds-cats--d2 .ds-cat__link {
	padding: 8px 10px;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--ds-ink-80);
}
.ds-cats--d1 .ds-cat__count { background: transparent; color: var(--ds-muted); padding: 0; }
.ds-cats--d1 .ds-cat.is-current > .ds-cat__row .ds-cat__link,
.ds-cats--d2 .ds-cat.is-current > .ds-cat__row .ds-cat__link { color: var(--ds-berry); font-weight: 700; }
.ds-cats--d1 .ds-cat.is-current > .ds-cat__row::before {
	content: "";
	position: absolute;
	left: -18px;
	top: 50%;
	width: 7px;
	height: 7px;
	margin-top: -3.5px;
	border-radius: 50%;
	background: var(--ds-berry);
}

/* Tarjeta inferior */
.ds-rail__promo {
	position: relative;
	overflow: hidden;
	flex: none;
	padding: 18px;
	border-radius: var(--ds-radius);
	background:
		radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--ds-berry) 75%, transparent), transparent 60%),
		radial-gradient(80% 80% at 0% 100%, color-mix(in srgb, var(--ds-peach) 35%, transparent), transparent 60%),
		var(--ds-ink);
	color: rgba(255, 255, 255, .78);
	font-size: 13px;
	line-height: 1.45;
}
.ds-rail__promo strong {
	display: block;
	margin-bottom: 4px;
	color: #fff;
	font-family: var(--ds-font-display);
	font-size: 17px;
	line-height: 1.2;
}
.ds-rail__promo p { margin: 0 0 12px; }
.ds-rail .ds-rail__promo-btn {
	display: inline-flex;
	align-items: center;
	padding: 8px 16px;
	border-radius: var(--ds-pill);
	background: #fff;
	color: var(--ds-ink);
	font-weight: 800;
	font-size: 13px;
	text-decoration: none;
	transition: background .2s, transform .2s var(--ds-ease);
}
.ds-rail .ds-rail__promo-btn:hover { background: var(--ds-peach); color: var(--ds-ink); transform: translateY(-1px); }

/* ---------- 3. Modo contraído (sólo íconos) en computadora ---------- */
@media (min-width: 1100px) {
	html.ds-rail-collapsed .ds-rail { width: var(--ds-rail-w-mini); }
	html.ds-rail-collapsed .ds-rail .ds-rail__title,
	html.ds-rail-collapsed .ds-rail .ds-cat__name,
	html.ds-rail-collapsed .ds-rail .ds-cat__count,
	html.ds-rail-collapsed .ds-rail .ds-cat__toggle,
	html.ds-rail-collapsed .ds-rail .ds-rail__search,
	html.ds-rail-collapsed .ds-rail .ds-rail__promo,
	html.ds-rail-collapsed .ds-rail .ds-cat__sub {
		opacity: 0;
		pointer-events: none;
		transition: opacity .15s;
	}
	html.ds-rail-collapsed .ds-rail .ds-cat__sub { grid-template-rows: 0fr; }
	html.ds-rail-collapsed .ds-rail:not(:hover):not(:has(:focus-visible)) .ds-rail__title { display: none; }
	html.ds-rail-collapsed .ds-rail:not(:hover):not(:has(:focus-visible)) .ds-rail__head { justify-content: center; padding: 0; }
	html.ds-rail-collapsed .ds-rail .ds-rail__collapse { transform: scaleX(-1); }

	/* Al pasar el mouse (o con el teclado) se despliega por encima del contenido. */
	html.ds-rail-collapsed .ds-rail:hover,
	html.ds-rail-collapsed .ds-rail:has(:focus-visible) {
		width: var(--ds-rail-w);
		background: color-mix(in srgb, var(--ds-bg) 96%, transparent);
		box-shadow: 30px 0 60px -30px color-mix(in srgb, var(--ds-ink) 35%, transparent);
		transition-delay: .12s;
	}
	html.ds-rail-collapsed .ds-rail:hover :is(.ds-rail__title, .ds-cat__name, .ds-cat__count, .ds-cat__toggle, .ds-rail__search, .ds-rail__promo),
	html.ds-rail-collapsed .ds-rail:has(:focus-visible) :is(.ds-rail__title, .ds-cat__name, .ds-cat__count, .ds-cat__toggle, .ds-rail__search, .ds-rail__promo),
	html.ds-rail-collapsed .ds-rail:hover .ds-cat.is-open > .ds-cat__sub,
	html.ds-rail-collapsed .ds-rail:has(:focus-visible) .ds-cat.is-open > .ds-cat__sub {
		opacity: 1;
		pointer-events: auto;
		transition: opacity .25s .2s;
	}
	html.ds-rail-collapsed .ds-rail:hover .ds-cat.is-open > .ds-cat__sub,
	html.ds-rail-collapsed .ds-rail:has(:focus-visible) .ds-cat.is-open > .ds-cat__sub { grid-template-rows: 1fr; }

	.ds-rail-fab,
	.ds-rail-overlay { display: none !important; }
}

/* ---------- 4. Celular y tablet: cajón deslizable ---------- */
@media (max-width: 1099.98px) {
	.ds-rail {
		width: min(88vw, 340px);
		transform: translateX(-105%);
		border-radius: 0 var(--ds-radius-lg) var(--ds-radius-lg) 0;
		background: color-mix(in srgb, var(--ds-bg) 97%, transparent);
		box-shadow: 30px 0 80px -30px color-mix(in srgb, var(--ds-ink) 45%, transparent);
		visibility: hidden;
		transition: transform .4s var(--ds-ease), visibility 0s .4s;
	}
	html.ds-rail-open .ds-rail {
		transform: none;
		visibility: visible;
		transition: transform .4s var(--ds-ease), visibility 0s;
	}
	html.ds-rail-open { overflow: hidden; }
	.ds-rail .ds-rail__collapse { display: none; }
	.ds-rail .ds-rail__close { display: grid; }

	.ds-rail-overlay {
		position: fixed;
		inset: 0;
		z-index: 9999;
		background: color-mix(in srgb, var(--ds-ink) 45%, transparent);
		-webkit-backdrop-filter: blur(3px);
		backdrop-filter: blur(3px);
		opacity: 0;
		transition: opacity .3s;
	}
	.ds-rail-overlay.is-visible { opacity: 1; }

	.ds-rail-fab {
		position: fixed;
		left: 50%;
		bottom: 18px;
		z-index: 9997;
		display: inline-flex;
		align-items: center;
		gap: 10px;
		height: 50px;
		padding: 0 22px 0 18px;
		border-radius: var(--ds-pill);
		background: var(--ds-ink);
		color: #fff;
		font-family: var(--ds-font-body);
		font-weight: 700;
		font-size: 14.5px;
		box-shadow: 0 16px 32px -14px color-mix(in srgb, var(--ds-ink) 80%, transparent), inset 0 0 0 1px rgba(255, 255, 255, .08);
		transform: translateX(-50%);
		transition: transform .25s var(--ds-ease), background .2s;
	}
	.ds-rail-fab:hover,
	.ds-rail-fab:focus-visible { background: var(--ds-berry); color: #fff; transform: translateX(-50%) translateY(-2px); }
	.ds-rail-fab svg { color: var(--ds-peach); }
}

/* ---------- 5. Portada rotativa ---------- */
.ds-hero-wrap { padding: clamp(10px, 1.4vw, 20px) clamp(10px, 1.4vw, 20px) 0; }
.ds-hero {
	--hero-bg: #fbe3ec;
	--hero-interval: 6s;
	position: relative;
	margin: 0 0 clamp(24px, 4vw, 48px);
	font-family: var(--ds-font-body);
	color: var(--ds-ink);
}
.ds-hero__stage {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	min-height: clamp(500px, 74vh, 700px);
	border-radius: calc(var(--ds-radius-lg) + 6px);
	background-color: var(--hero-bg);
	transition: background-color .9s var(--ds-ease);
}
/* Brillo y grano sutil */
.ds-hero__stage::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(60% 70% at 8% 0%, rgba(255, 255, 255, .75), transparent 60%),
		radial-gradient(50% 60% at 100% 100%, rgba(255, 255, 255, .35), transparent 60%);
	pointer-events: none;
}
.ds-hero__stage::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	opacity: .22;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
	pointer-events: none;
}
.ds-hero__orb {
	position: absolute;
	z-index: -1;
	right: 4%;
	top: 50%;
	width: min(52vw, 640px);
	aspect-ratio: 1;
	border-radius: 50%;
	transform: translateY(-54%);
	background: radial-gradient(circle at 40% 35%, rgba(255, 255, 255, .85), rgba(255, 255, 255, .25) 55%, transparent 70%);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6);
	pointer-events: none;
}

.ds-hero__slides { flex: 1; display: grid; }
.ds-slide {
	grid-area: 1 / 1;
	display: grid;
	grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
	align-items: center;
	gap: clamp(16px, 3vw, 48px);
	padding: clamp(32px, 5vw, 72px) clamp(24px, 5vw, 76px) clamp(96px, 9vw, 116px);
	visibility: hidden;
	pointer-events: none;
	transition: visibility 0s .8s;
}
.ds-slide.is-active { visibility: visible; pointer-events: auto; transition-delay: 0s; }

/* Texto: entra escalonado */
.ds-slide__copy > * {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity .5s var(--ds-ease), transform .5s var(--ds-ease);
}
.ds-slide.is-active .ds-slide__copy > * {
	opacity: 1;
	transform: none;
	transition-duration: .8s;
}
.ds-slide.is-active .ds-slide__copy > :nth-child(1) { transition-delay: .15s; }
.ds-slide.is-active .ds-slide__copy > :nth-child(2) { transition-delay: .25s; }
.ds-slide.is-active .ds-slide__copy > :nth-child(3) { transition-delay: .35s; }
.ds-slide.is-active .ds-slide__copy > :nth-child(4) { transition-delay: .45s; }

.ds-slide__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 14px 8px 10px;
	border-radius: var(--ds-pill);
	background: rgba(255, 255, 255, .62);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ds-ink);
}
.ds-slide__eyebrow::before {
	content: "";
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: conic-gradient(from 90deg, var(--ds-berry), var(--ds-peach), var(--ds-berry));
}
.desol-moderno .ds-slide__title,
.ds-slide__title {
	margin: 20px 0 16px;
	font-family: var(--ds-font-display) !important;
	font-size: clamp(2.4rem, 5.2vw, 5.1rem) !important;
	font-weight: 700;
	line-height: .98 !important;
	letter-spacing: -.035em;
	color: var(--ds-ink);
	text-wrap: balance;
}
.ds-slide__text {
	max-width: 42ch;
	margin: 0 0 30px;
	font-size: clamp(15px, 1.25vw, 18px);
	line-height: 1.55;
	color: var(--ds-ink-80);
}
.desol-moderno .ds-slide__btn,
.ds-slide__btn {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 8px 8px 8px 26px;
	border-radius: var(--ds-pill);
	background: var(--ds-ink);
	color: #fff;
	font-weight: 800;
	font-size: 15px;
	text-decoration: none;
	box-shadow: 0 18px 34px -16px color-mix(in srgb, var(--ds-ink) 75%, transparent);
	transition: background .25s, transform .25s var(--ds-ease), box-shadow .25s;
}
.ds-slide__btn svg {
	box-sizing: content-box;
	padding: 12px;
	border-radius: 50%;
	background: #fff;
	color: var(--ds-ink);
	transition: transform .3s var(--ds-ease), background .25s;
}
.desol-moderno .ds-slide__btn:hover,
.ds-slide__btn:hover {
	background: var(--ds-berry);
	color: #fff;
	transform: translateY(-2px);
}
.ds-slide__btn:hover svg { transform: rotate(-45deg); background: var(--ds-peach); }

/* Imagen */
.ds-slide__media {
	position: relative;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
}
.ds-slide__media img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: clamp(320px, 58vh, 560px);
	object-fit: contain;
	border-radius: var(--ds-radius-lg) !important;
	opacity: 0;
	transform: translateX(40px) scale(1.06);
	transition: opacity .6s var(--ds-ease), transform 1s var(--ds-ease);
	filter: drop-shadow(0 30px 40px color-mix(in srgb, var(--ds-ink) 12%, transparent));
}
.ds-hero--blend .ds-slide__media img {
	mix-blend-mode: multiply;
	filter: none;
}
.ds-slide.is-active .ds-slide__media img {
	opacity: 1;
	transform: none;
	transition-duration: .9s, 1.2s;
	animation: ds-float 7s ease-in-out 1.2s infinite alternate;
}
@keyframes ds-float {
	from { translate: 0 0; }
	to { translate: 0 -12px; }
}

/* Controles */
.ds-hero__ui {
	position: absolute;
	z-index: 4;
	left: clamp(24px, 5vw, 76px);
	right: clamp(16px, 3vw, 32px);
	bottom: clamp(18px, 2.4vw, 30px);
	display: flex;
	align-items: center;
	gap: 22px;
}
.ds-hero__count {
	display: flex;
	align-items: baseline;
	gap: 6px;
	font-family: var(--ds-font-display);
	font-variant-numeric: tabular-nums;
}
.ds-hero__count b { font-size: 22px; font-weight: 700; }
.ds-hero__count span { font-size: 13px; font-weight: 600; color: var(--ds-muted); }
.ds-hero__dots { display: flex; align-items: center; gap: 6px; }
.ds-hero .ds-hero__dot {
	position: relative;
	width: 30px;
	height: 26px;
	background: transparent;
	transition: width .45s var(--ds-ease);
}
.ds-hero .ds-hero__dot::before,
.ds-hero .ds-hero__dot i {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 4px;
	margin-top: -2px;
	border-radius: var(--ds-pill);
}
.ds-hero .ds-hero__dot::before { background: color-mix(in srgb, var(--ds-ink) 16%, transparent); transition: background .2s; }
.ds-hero .ds-hero__dot:hover::before { background: color-mix(in srgb, var(--ds-ink) 32%, transparent); }
.ds-hero .ds-hero__dot i {
	background: var(--ds-ink);
	transform: scaleX(0);
	transform-origin: left;
}
.ds-hero .ds-hero__dot.is-active { width: 64px; }
.ds-hero .ds-hero__dot.is-active i { animation: ds-progress var(--hero-interval) linear forwards; }
.ds-hero.is-paused .ds-hero__dot.is-active i,
.ds-hero.is-static .ds-hero__dot.is-active i { animation: none; transform: scaleX(1); }
@keyframes ds-progress { to { transform: scaleX(1); } }

.ds-hero__arrows { display: flex; gap: 8px; margin-left: 8px; }
.ds-hero .ds-hero__btn {
	width: 48px;
	height: 48px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, .7);
	color: var(--ds-ink);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	transition: background .2s, color .2s, transform .2s var(--ds-ease);
}
.ds-hero .ds-hero__btn:hover { background: var(--ds-ink); color: #fff; transform: translateY(-2px); }
.ds-hero__prev svg { transform: scaleX(-1); }
.ds-hero__pause .i-play,
.ds-hero.is-user-paused .ds-hero__pause .i-pause { display: none; }
.ds-hero.is-user-paused .ds-hero__pause .i-play { display: block; }

/* En computadora los controles van arriba a la derecha, lejos de los botones
   flotantes (carrito, WhatsApp) que viven en las esquinas inferiores. */
@media (min-width: 901px) {
	.ds-hero__ui {
		top: clamp(20px, 2.4vw, 30px);
		bottom: auto;
		left: auto;
		right: clamp(20px, 2.4vw, 30px);
		padding: 6px 6px 6px 18px;
		border-radius: var(--ds-pill);
		background: rgba(255, 255, 255, .45);
		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7);
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
		gap: 16px;
	}
	.ds-hero .ds-hero__btn { width: 42px; height: 42px; }
	.ds-slide { padding-bottom: clamp(48px, 6vw, 80px); padding-top: clamp(72px, 7vw, 96px); }
}

/* Ocultar el video de portada de Elementor cuando se usa la portada rotativa */
.desol-hide-video-hero .elementor-section:has(> .elementor-background-video-container) { display: none !important; }

/* ---------- 6. Portada en tablet y celular ---------- */
@media (max-width: 900px) {
	.ds-hero__stage { min-height: 0; }
	.ds-slide {
		grid-template-columns: 1fr;
		align-content: start;
		gap: 8px;
		padding: 22px 22px 92px;
	}
	.ds-slide__media { order: -1; height: auto; }
	.ds-slide__media img { max-height: min(42vh, 360px); }
	.ds-hero__orb { width: 110vw; right: -5vw; top: 0; transform: translateY(-18%); }
	.ds-slide__title { margin: 14px 0 10px; font-size: clamp(2rem, 8.4vw, 2.8rem) !important; }
	.ds-slide__text { margin-bottom: 20px; }
}
@media (max-width: 560px) {
	.ds-hero-wrap { padding: 8px 8px 0; }
	.ds-hero__stage { border-radius: var(--ds-radius-lg); }
	.ds-hero__count { display: none; }
	.ds-hero__ui { left: 20px; right: 14px; bottom: 16px; gap: 10px; }
	.ds-hero .ds-hero__dot { width: 20px; }
	.ds-hero .ds-hero__dot.is-active { width: 40px; }
	.ds-hero .ds-hero__btn { width: 42px; height: 42px; }
	.ds-hero__pause { display: none !important; }
	.ds-slide__eyebrow { font-size: 11px; letter-spacing: .1em; }
	.desol-wa-fab { bottom: 16px; }
}
@media (max-width: 1099.98px) {
	/* Que el botón de WhatsApp y el de categorías no se pisen */
	.desol-rail-on .desol-wa-fab .desol-wa-fab__label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.ds-slide.is-active .ds-slide__media img { animation: none; }
}