/* ==========================================================================
   HEC Offers — Sección de Ofertas / Slider Home
   Misma paleta oscura que hec-subscribe:
   Rojo #D90429 · Ámbar #f59e0b · Navy #06091a → #192038
   ========================================================================== */

/* ── Variables locales ── */
.hec-offers {
	--ho-red:    #D90429;
	--ho-red-dk: #9f0218;
	--ho-amber:  #f59e0b;
	--ho-green:  #16a34a;
	--ho-navy:   #06091a;
	--ho-text:   rgba(255,255,255,.62);
	--ho-text-h: rgba(255,255,255,.92);
	--ho-border: rgba(255,255,255,.09);
	--ho-gap:    20px;
	--ho-cols:   4;
}

/* ── 1. SECCIÓN RAÍZ ── */
.hec-offers {
	position:   relative;
	overflow:   hidden;
	padding:    88px 0;
	background:
		radial-gradient(ellipse 65% 55% at 10%  40%, rgba(217,4,41,.13)  0%, transparent 60%),
		radial-gradient(ellipse 50% 42% at 90%  58%, rgba(245,158,11,.1) 0%, transparent 58%),
		radial-gradient(ellipse 80% 38% at 50% 100%, rgba(217,4,41,.06)  0%, transparent 55%),
		linear-gradient(158deg,
			#060918  0%,
			#0d1525 28%,
			#111827 55%,
			#192038 80%,
			#1c2245 100%
		);
}

/* ── Borde superior animado ── */
.hec-offers__top-border {
	position:        absolute;
	top:             0; left: 0; right: 0;
	height:          4px;
	background:      linear-gradient(90deg, #6e0114 0%, #D90429 20%, #f59e0b 50%, #D90429 80%, #6e0114 100%);
	background-size: 200% 100%;
	animation:       ho-border 5s linear infinite;
	box-shadow:      0 2px 12px rgba(217,4,41,.4);
}
.hec-offers__bottom-border {
	position:   absolute;
	bottom:     0; left: 0; right: 0;
	height:     2px;
	background: linear-gradient(90deg, transparent 0%, rgba(245,158,11,.28) 40%, rgba(217,4,41,.28) 70%, transparent 100%);
}
@keyframes ho-border {
	0%   { background-position: 0%   100%; }
	100% { background-position: 200% 100%; }
}

/* ── Decoraciones radiales de fondo ── */
.hec-offers__deco {
	position:       absolute;
	border-radius:  50%;
	pointer-events: none;
	z-index:        0;
}
.hec-offers__deco--tl {
	top:        -150px;
	left:       -100px;
	width:      480px;
	height:     480px;
	background: radial-gradient(circle, rgba(217,4,41,.13) 0%, transparent 65%);
}
.hec-offers__deco--br {
	bottom:     -160px;
	right:      -90px;
	width:      500px;
	height:     500px;
	background: radial-gradient(circle, rgba(245,158,11,.1) 0%, transparent 65%);
}

/* ── 2. CONTAINER ── */
.hec-offers__container {
	position:  relative;
	z-index:   1;
	max-width: 1400px;
	margin:    0 auto;
	padding:   0 28px;
}

/* ── 3. HEADER ── */
.hec-offers__header {
	display:         flex;
	align-items:     flex-end;
	justify-content: space-between;
	gap:             28px;
	margin-bottom:   40px;
	flex-wrap:       wrap;
}

.hec-offers__header-left { max-width: 580px; }

/* Badge */
.hec-offers__badge {
	display:        inline-flex;
	align-items:    center;
	gap:            7px;
	background:     rgba(217,4,41,.14);
	border:         1px solid rgba(217,4,41,.32);
	color:          #f87171;
	font-size:      11px;
	font-weight:    700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	padding:        6px 16px;
	border-radius:  20px;
	margin-bottom:  18px;
}

/* Título */
.hec-offers__title {
	font-size:      clamp(26px, 3.5vw, 46px);
	font-weight:    900;
	line-height:    1.08;
	color:          var(--ho-text-h);
	margin:         0 0 16px;
	letter-spacing: -.5px;
}
.hec-offers__title-hl {
	display:                 block;
	background:              linear-gradient(100deg, #D90429 0%, #f59e0b 70%);
	-webkit-background-clip: text;
	background-clip:         text;
	-webkit-text-fill-color: transparent;
}

/* Descripción */
.hec-offers__desc {
	font-size:   15px;
	line-height: 1.68;
	color:       var(--ho-text);
	margin:      0;
}

/* ── Columna derecha del header ── */
.hec-offers__header-right {
	display:     flex;
	align-items: center;
	gap:         24px;
	flex-shrink: 0;
}

/* Contador de ofertas */
.hec-offers__counter {
	display:       flex;
	align-items:   baseline;
	gap:           10px;
	background:    rgba(217,4,41,.1);
	border:        1px solid rgba(217,4,41,.24);
	border-radius: 14px;
	padding:       14px 20px;
}
.hec-offers__counter-num {
	font-size:   38px;
	font-weight: 900;
	color:       #f87171;
	line-height: 1;
}
.hec-offers__counter-label {
	font-size:   12px;
	color:       var(--ho-text);
	line-height: 1.4;
}

/* ── Botones de navegación ── */
.hec-offers__nav {
	display:     flex;
	align-items: center;
	gap:         10px;
}

.hec-offers__prev,
.hec-offers__next {
	width:           42px;
	height:          42px;
	border-radius:   50%;
	background:      rgba(255,255,255,.07);
	border:          1px solid var(--ho-border);
	color:           rgba(255,255,255,.65);
	cursor:          pointer;
	display:         flex;
	align-items:     center;
	justify-content: center;
	transition:      background .2s, border-color .2s, color .2s, transform .15s;
	flex-shrink:     0;
}
.hec-offers__prev:hover,
.hec-offers__next:hover {
	background:   rgba(217,4,41,.18);
	border-color: rgba(217,4,41,.4);
	color:        #f87171;
	transform:    scale(1.08);
}
.hec-offers__prev:disabled,
.hec-offers__next:disabled {
	opacity:   .28;
	cursor:    not-allowed;
	transform: none;
}

/* Dots indicadores */
.hec-offers__dots {
	display:     flex;
	gap:         6px;
	align-items: center;
}
.hec-offers__dot {
	width:         7px;
	height:        7px;
	border-radius: 50%;
	background:    rgba(255,255,255,.2);
	border:        none;
	cursor:        pointer;
	padding:       0;
	transition:    background .22s, transform .22s, box-shadow .22s;
}
.hec-offers__dot.is-active {
	background:  var(--ho-red);
	transform:   scale(1.5);
	box-shadow:  0 0 8px rgba(217,4,41,.65);
}

/* ── 4. SLIDER WRAPPER ── */
.hec-offers__slider {
	overflow:      hidden;
	border-radius: 4px;
}
.hec-offers__track {
	display:    flex;
	gap:        var(--ho-gap);
	transition: transform .44s cubic-bezier(.25,.46,.45,.94);
	will-change: transform;
	cursor:     grab;
	user-select: none;
	-webkit-user-select: none;
}
.hec-offers__track:active { cursor: grabbing; }

/* ── 5. CARD ── */
.hec-offers__card {
	flex:           0 0 calc((100% - (var(--ho-cols) - 1) * var(--ho-gap)) / var(--ho-cols));
	max-width:      calc((100% - (var(--ho-cols) - 1) * var(--ho-gap)) / var(--ho-cols));
	background:     #fff;
	border:         1px solid #e2e8f0;
	border-radius:  16px;
	overflow:       hidden;
	display:        flex;
	flex-direction: column;
	transition:     transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.hec-offers__card:hover {
	transform:    translateY(-6px);
	border-color: rgba(217,4,41,.28);
	box-shadow:   0 16px 48px rgba(0,0,0,.14), 0 0 0 1px rgba(217,4,41,.12);
}

/* Imagen */
.hec-offers__card-thumb {
	display:        block;
	position:       relative;
	overflow:       hidden;
	aspect-ratio:   1 / 1;
	background:     #f8fafc;
	flex-shrink:    0;
}
.hec-offers__card-thumb img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
	transition: transform .4s ease;
}
.hec-offers__card:hover .hec-offers__card-thumb img {
	transform: scale(1.07);
}

/* Badge de oferta */
.hec-offers__card-badge {
	position:        absolute;
	top:             10px;
	right:           10px;
	width:           32px;
	height:          32px;
	border-radius:   50%;
	background:      var(--ho-red);
	color:           #fff;
	font-size:       14px;
	font-weight:     900;
	display:         flex;
	align-items:     center;
	justify-content: center;
	box-shadow:      0 4px 14px rgba(217,4,41,.55);
	animation:       ho-badge-pulse 2.5s ease-in-out infinite;
}
@keyframes ho-badge-pulse {
	0%, 100% { box-shadow: 0 4px 14px rgba(217,4,41,.5);  }
	50%       { box-shadow: 0 4px 22px rgba(217,4,41,.82); }
}

/* Body */
.hec-offers__card-body {
	padding:        14px 16px 18px;
	display:        flex;
	flex-direction: column;
	flex:           1;
	gap:            6px;
	background:     #fff;
}

/* Código de fabricación */
.hec-offers__card-sku {
	font-size:      10.5px;
	font-weight:    700;
	letter-spacing: .5px;
	color:          #94a3b8;
	text-transform: uppercase;
	line-height:    1;
}

/* Nombre del producto */
.hec-offers__card-name {
	font-size:   13.5px;
	font-weight: 600;
	line-height: 1.35;
	margin:      0;
	flex:        1;
}
.hec-offers__card-name a {
	color:              #1e293b;
	text-decoration:    none;
	transition:         color .18s;
	display:            -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow:           hidden;
}
.hec-offers__card-name a:hover { color: #D90429; }

/* Precio */
.hec-offers__card-price { margin-top: 4px; }

/* Precio regular tachado */
.hec-offers__card-price del {
	display:         block;
	font-size:       12px;
	color:           #94a3b8;
	text-decoration: line-through;
	line-height:     1.3;
}
.hec-offers__card-price del .woocommerce-Price-amount { color: #94a3b8; }

/* Precio de oferta */
.hec-offers__card-price ins {
	display:         block;
	text-decoration: none;
	font-size:       16px;
	font-weight:     800;
	color:           #16a34a;
	line-height:     1.3;
}
.hec-offers__card-price ins .woocommerce-Price-amount { color: #16a34a; }

/* Precio único (sin oferta) */
.hec-offers__card-price > .woocommerce-Price-amount {
	display:     block;
	font-size:   16px;
	font-weight: 800;
	color:       #1e293b;
	line-height: 1.3;
}

/* Botón Comprar */
.hec-offers__card-btn {
	display:         flex !important;
	align-items:     center !important;
	justify-content: center !important;
	gap:             7px !important;
	margin-top:      10px !important;
	padding:         10px 14px !important;
	background:      linear-gradient(135deg, var(--ho-red), var(--ho-red-dk)) !important;
	color:           #fff !important;
	border:          none !important;
	border-radius:   9px !important;
	font-size:       12.5px !important;
	font-weight:     700 !important;
	letter-spacing:  .3px !important;
	text-decoration: none !important;
	cursor:          pointer !important;
	transition:      transform .18s, box-shadow .18s !important;
	box-shadow:      0 4px 16px rgba(217,4,41,.35) !important;
	text-align:      center !important;
}
.hec-offers__card-btn:hover {
	transform:  translateY(-2px) !important;
	box-shadow: 0 8px 24px rgba(217,4,41,.52) !important;
	color:      #fff !important;
}
/* Estado "agregando al carrito" de WooCommerce */
.hec-offers__card-btn.loading {
	opacity:        .6 !important;
	pointer-events: none !important;
}
.hec-offers__card-btn.added {
	background: linear-gradient(135deg, #16a34a, #15803d) !important;
	box-shadow: 0 4px 16px rgba(22,163,74,.35) !important;
}

/* ── 6. FOOTER CTA ── */
.hec-offers__footer {
	display:         flex;
	justify-content: center;
	margin-top:      48px;
}
.hec-offers__all-link {
	display:         inline-flex;
	align-items:     center;
	gap:             10px;
	background:      rgba(255,255,255,.06);
	border:          1px solid rgba(255,255,255,.12);
	color:           rgba(255,255,255,.72);
	font-size:       14px;
	font-weight:     600;
	padding:         14px 30px;
	border-radius:   40px;
	text-decoration: none;
	transition:      background .2s, border-color .2s, color .2s, transform .18s;
}
.hec-offers__all-link:hover {
	background:      rgba(217,4,41,.14);
	border-color:    rgba(217,4,41,.34);
	color:           #f87171;
	transform:       translateY(-2px);
	text-decoration: none;
}
.hec-offers__all-link svg { transition: transform .18s; }
.hec-offers__all-link:hover svg { transform: translateX(5px); }

/* ── 7. RESPONSIVE ── */
@media (max-width: 1200px) {
	.hec-offers { --ho-cols: 3; }
}

@media (max-width: 820px) {
	.hec-offers {
		--ho-cols: 2;
		padding:   70px 0;
	}
	.hec-offers__header {
		flex-direction: column;
		align-items:    flex-start;
		gap:            20px;
	}
	.hec-offers__header-right { align-self: flex-start; }
}

@media (max-width: 480px) {
	.hec-offers {
		--ho-cols: 2;
		--ho-gap:  12px;
		padding:   56px 0;
	}
	.hec-offers__container  { padding: 0 14px; }
	.hec-offers__counter    { display: none; }
	.hec-offers__title      { font-size: clamp(22px, 7vw, 32px); }

	/* Card compacta: proporciones ajustadas al ancho reducido */
	.hec-offers__card-body  { padding: 10px 10px 13px; gap: 4px; }
	.hec-offers__card-sku   { font-size: 9.5px; }
	.hec-offers__card-name  { font-size: 12px; }
	.hec-offers__card-price ins,
	.hec-offers__card-price > .woocommerce-Price-amount {
		font-size: 14px;
	}
	.hec-offers__card-price del { font-size: 11px; }
	.hec-offers__card-btn {
		font-size:  11px !important;
		padding:    8px 10px !important;
		gap:        5px !important;
		margin-top: 8px !important;
	}
}