:root{
	--mx-blue:#2E73CD;
	--mx-orange:#FF9015;
	--mx-grey:#4E4F4F;
	--radius:8px;
}

.sticky-offer{
	position: fixed;
	inset: auto 0 16px 0; /* bottom */
	display:flex;
	justify-content:center;
	z-index: 1000;
	pointer-events: none; /* permite clics solo en hijos visibles */
}

/* backdrop */
.sticky-offer__backdrop{
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.4);
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease;
	pointer-events: none;
}

/* card wrapper */
.sticky-offer__card{
	pointer-events: auto;
	width: min(900px, calc(100% - 32px)); /* full(-32px) < 991px; centrado desktop */
	border: 1px solid var(--mx-orange);
	border-radius: var(--radius);
	background:#fff;
	box-shadow: 0 6px 20px rgba(0,0,0,.14);
	overflow: hidden;
	transform: translateY(0);
}

/* header (barra colapsada) */
.sticky-offer__header{
	width:100%;
	display:flex;
	align-items:center;
	gap:10px;
	background:#fff;
	padding: 24px 16px;
	border:0;
	cursor:pointer;
	border-radius: var(--radius);
	outline: none;
}

.sticky-offer__header:focus-visible{
	box-shadow: 0 0 0 2px var(--mx-blue);
}

.sticky-offer__icon{
	width:20px;height:20px;
	background: var(--mx-orange); /* coloca tu SVG con mask-image si quieres */
	border-radius: 4px;
}

.sticky-offer__title{
	flex:1;
	color: var(--mx-blue);
	font-size:16px;            /* cerrado: 16px */
	font-weight:700;
	line-height:1.2;
	text-align: left;
}

.sticky-offer__chevron{
	inline-size: 16px; block-size: 16px;
	mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M4 10l4-4 4 4" fill="none" stroke="%23000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center/contain;
	background: var(--mx-blue);
	transform: rotate(180deg); /* apunta hacia arriba cuando está cerrado abajo */
	transition: transform .2s ease;
}

/* contenido (expandible) */
.sticky-offer__content{
	font-size:14px;            /* contenido: 14px */
	color: var(--mx-grey);
	border-top: 1px solid #F1F1F1;
	max-height: 0;
	overflow: hidden;
	transition: max-height .25s ease;
	margin: 0px 15px;
}

.sticky-offer__list{
	margin: 8px 0 12px;
	padding-left: 0;
	list-style:none;
}
.sticky-offer__list li{
	display:flex; align-items:center; gap:8px;
	margin: 6px 0;
}

/* CTA contenedor para tu botón existente */
.sticky-offer__cta{
	margin-top: 10px;
	margin-bottom: 10px;
	display:flex; justify-content:center;
}

/* Estado ABIERTO */
.sticky-offer.is-open .sticky-offer__backdrop{
	opacity: 1; visibility: visible; pointer-events: auto;
}
.sticky-offer.is-open .sticky-offer__content{
	max-height: 70vh; /* suficiente para mostrar todo sin saltos */
}
.sticky-offer.is-open .sticky-offer__title{
	font-size:14px;             /* abierto: 14px */
}
.sticky-offer.is-open .sticky-offer__chevron{
	transform: rotate(0deg);
}

/* Responsive: a < 991px ocupa ancho completo con 16px laterales (ya aplicado arriba) */
@media (min-width: 991px){
	.sticky-offer{ inset: auto 0 24px 0; }
}