/* ============================================================================
   HEC Single Product — Elementor Pro Template ID 6964 "producto1"
   REGLA: nunca tocar dimensiones/overflow de la galería — FlexSlider las controla.

   Mapa de IDs reales del template:
     [30ab9dc] columna galería
     [2f048f6] widget woocommerce-product-images
     [2863370] columna detalle (bg:#EFEFEF original)
     [4987c4f] heading "Nombre :"
     [15fefaa] widget woocommerce-product-title
     [d5c8918] jet-field → get_price_html
     [32d7db4] heading "Descripción :"
     [1ffa0d8] widget short-description
     [15b1a53] widget add-to-cart
     [bff5c41] heading "Detalle de producto :"
     [1812030] jet-field → Código de Fábrica
     [7b82c42] jet-field → Código HOR
     [809153b] jet-field → Código OEM
     [6b4294a] heading "Medios de pago :"
     [ecfe4f8] image medios de pago
     [df52582] widget woocommerce-product-related
   ============================================================================ */

/* ── Variables globales del template ── */
:root {
	--sp-red:    #D90429;
	--sp-red-dk: #9f0218;
	--sp-slate:  #1e293b;
	--sp-lt:     #64748b;
	--sp-green:  #16a34a;
	--sp-amber:  #f59e0b;
	--sp-border: #e2e8f0;
	--sp-bg:     #f8fafc;
}

/* =============================================================================
   1. BREADCRUMB
   ============================================================================= */
.elementor-element-d0358d3 .woocommerce-breadcrumb {
	font-size:     12.5px;
	color:         #94a3b8;
	margin-bottom: 8px;
	padding:       0 !important;
}
.elementor-element-d0358d3 .woocommerce-breadcrumb a {
	color:           #64748b;
	text-decoration: none;
	transition:      color .18s;
}
.elementor-element-d0358d3 .woocommerce-breadcrumb a:hover { color: var(--sp-red); }

/* =============================================================================
   2. GALERÍA — solo mejoras cosméticas, sin tocar dimensiones ni overflow
      FlexSlider maneja opacity, viewport y thumbnails — no interferir.
   ============================================================================= */

/* Sombra sutil en el contenedor outer del widget */
.elementor-element-2f048f6 {
	border-radius: 12px !important;
	overflow:      hidden !important;
}

/* Shadow en el div de la galería */
.elementor-element-2f048f6 .woocommerce-product-gallery {
	box-shadow: 0 4px 24px rgba(0,0,0,.08);
}

/* Fondo neutro para que imágenes PNG con transparencia se vean bien */
.elementor-element-2f048f6 .woocommerce-product-gallery__wrapper,
.elementor-element-2f048f6 .flex-viewport {
	background: var(--sp-bg);
}

/* Imagen principal: solo object-fit y fondo — SIN aspect-ratio NI padding */
.elementor-element-2f048f6 .woocommerce-product-gallery__image a img {
	object-fit:  contain;
	background:  var(--sp-bg);
	transition:  transform .4s cubic-bezier(.4,0,.2,1) !important;
	display:     block;
}
.elementor-element-2f048f6 .woocommerce-product-gallery__image:hover a img {
	transform: scale(1.04);
}

/* Thumbnails (creados por FlexSlider JS) */
.elementor-element-2f048f6 .flex-control-thumbs li {
	padding: 3px !important;
}
.elementor-element-2f048f6 .flex-control-thumbs li img {
	border-radius: 6px !important;
	border:        2px solid transparent !important;
	background:    var(--sp-bg) !important;
	object-fit:    contain !important;
	transition:    border-color .18s !important;
	opacity:       .75 !important;
}
.elementor-element-2f048f6 .flex-control-thumbs li img.flex-active,
.elementor-element-2f048f6 .flex-control-thumbs li img:hover {
	border-color: var(--sp-red) !important;
	opacity:      1 !important;
}

/* Trigger zoom */
.elementor-element-2f048f6 .woocommerce-product-gallery__trigger {
	top:             12px !important;
	right:           12px !important;
	width:           34px !important;
	height:          34px !important;
	border-radius:   50% !important;
	background:      rgba(255,255,255,.88) !important;
	border:          1.5px solid rgba(0,0,0,.1) !important;
	backdrop-filter: blur(4px) !important;
	transition:      background .2s, border-color .2s !important;
}
.elementor-element-2f048f6 .woocommerce-product-gallery__trigger:hover {
	background:   var(--sp-red) !important;
	border-color: var(--sp-red) !important;
}

/* =============================================================================
   3. COLUMNA DETALLE [2863370] — panel mejorado
   ============================================================================= */
.elementor-element-2863370 > .elementor-widget-wrap {
	background:    #fff !important;
	border-left:   4px solid var(--sp-red) !important;
	border-radius: 0 !important;
	box-shadow:    4px 0 0 0 rgba(217,4,41,.08), inset 0 0 0 1px var(--sp-border) !important;
	padding:       28px 24px !important;
}

/* =============================================================================
   4. HEADINGS DE SECCIÓN
   ============================================================================= */
.elementor-element-4987c4f .elementor-heading-title,
.elementor-element-32d7db4 .elementor-heading-title,
.elementor-element-bff5c41 .elementor-heading-title,
.elementor-element-6b4294a .elementor-heading-title {
	font-size:      10px !important;
	font-weight:    700 !important;
	letter-spacing: 1.6px !important;
	text-transform: uppercase !important;
	color:          #94a3b8 !important;
	margin-bottom:  4px !important;
}

/* Separador visual antes de "Descripción", "Detalle", "Medios de pago" */
.elementor-element-32d7db4,
.elementor-element-bff5c41,
.elementor-element-6b4294a {
	margin-top:  12px !important;
	padding-top: 14px !important;
	border-top:  1px solid var(--sp-border) !important;
}

/* =============================================================================
   5. TÍTULO DEL PRODUCTO [15fefaa]
   ============================================================================= */
.elementor-element-15fefaa .product_title {
	font-size:      clamp(20px, 2.4vw, 30px) !important;
	font-weight:    900 !important;
	line-height:    1.2 !important;
	color:          var(--sp-slate) !important;
	letter-spacing: -.4px !important;
	margin:         0 0 4px !important;
}

/* =============================================================================
   6. PRECIO [d5c8918] — jet-listing-dynamic-field → get_price_html
   ============================================================================= */
.elementor-element-d5c8918 {
	background:    rgba(22,163,74,.07) !important;
	border:        1.5px solid rgba(22,163,74,.22) !important;
	border-radius: 10px !important;
	padding:       10px 16px !important;
	display:       inline-block !important;
}

/* Precio de oferta (ins) */
.elementor-element-d5c8918 .jet-listing-dynamic-field__content ins,
.elementor-element-d5c8918 ins .woocommerce-Price-amount,
.elementor-element-d5c8918 ins {
	font-size:       26px !important;
	font-weight:     900 !important;
	color:           var(--sp-green) !important;
	text-decoration: none !important;
}

/* Precio tachado (del) */
.elementor-element-d5c8918 del .woocommerce-Price-amount,
.elementor-element-d5c8918 del {
	font-size:       14px !important;
	font-weight:     500 !important;
	color:           #94a3b8 !important;
	opacity:         1 !important;
}

/* Precio sin oferta (sin ins/del) */
.elementor-element-d5c8918 .woocommerce-Price-amount:not(ins .woocommerce-Price-amount):not(del .woocommerce-Price-amount) {
	font-size:   26px !important;
	font-weight: 900 !important;
	color:       var(--sp-slate) !important;
}

/* =============================================================================
   7. DESCRIPCIÓN CORTA [1ffa0d8]
   ============================================================================= */
.elementor-element-1ffa0d8 .woocommerce-product-details__short-description {
	font-size:   14px;
	line-height: 1.7;
	color:       #475569;
}
.elementor-element-1ffa0d8 .woocommerce-product-details__short-description p { margin: 0 0 8px; }
.elementor-element-1ffa0d8 .woocommerce-product-details__short-description p:last-child { margin-bottom: 0; }

/* =============================================================================
   8. ADD TO CART [15b1a53]
   ============================================================================= */

/* Form */
.elementor-element-15b1a53 form.cart {
	display:     flex !important;
	align-items: center !important;
	gap:         10px !important;
	flex-wrap:   wrap !important;
}

/* Botón principal */
.elementor-element-15b1a53 .single_add_to_cart_button {
	height:          48px !important;
	padding:         0 28px !important;
	background:      linear-gradient(135deg, var(--sp-red) 0%, var(--sp-red-dk) 100%) !important;
	color:           #fff !important;
	border:          none !important;
	border-radius:   10px !important;
	font-size:       14px !important;
	font-weight:     800 !important;
	letter-spacing:  .5px !important;
	text-transform:  uppercase !important;
	cursor:          pointer !important;
	transition:      transform .2s, box-shadow .2s !important;
	box-shadow:      0 6px 22px rgba(217,4,41,.35) !important;
	position:        relative !important;
	overflow:        hidden !important;
}
.elementor-element-15b1a53 .single_add_to_cart_button::after {
	content:    '';
	position:   absolute;
	top:        0; left: -100%;
	width:      55%; height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
	transform:  skewX(-18deg);
	transition: left .5s ease;
	pointer-events: none;
}
.elementor-element-15b1a53 .single_add_to_cart_button:hover::after { left: 150%; }
.elementor-element-15b1a53 .single_add_to_cart_button:hover {
	transform:  translateY(-2px) !important;
	box-shadow: 0 10px 28px rgba(217,4,41,.5) !important;
}

/* Badge de stock */
.elementor-element-15b1a53 .in-stock {
	display:       inline-flex !important;
	align-items:   center !important;
	gap:           6px !important;
	font-size:     12px !important;
	font-weight:   700 !important;
	color:         var(--sp-green) !important;
	background:    rgba(22,163,74,.1) !important;
	border:        1px solid rgba(22,163,74,.25) !important;
	padding:       4px 12px !important;
	border-radius: 20px !important;
}
.elementor-element-15b1a53 .in-stock::before {
	content:       '';
	display:       inline-block;
	width:         7px; height: 7px;
	border-radius: 50%;
	background:    var(--sp-green);
	flex-shrink:   0;
}
.elementor-element-15b1a53 .out-of-stock {
	font-size:     12px !important;
	font-weight:   700 !important;
	color:         #ef4444 !important;
	background:    rgba(239,68,68,.08) !important;
	border:        1px solid rgba(239,68,68,.2) !important;
	padding:       4px 12px !important;
	border-radius: 20px !important;
}

/* =============================================================================
   9. CAMPOS ACF — Código Fábrica, HOR, OEM
   ============================================================================= */
.elementor-element-1812030 .jet-listing-dynamic-field__content,
.elementor-element-7b82c42 .jet-listing-dynamic-field__content,
.elementor-element-809153b .jet-listing-dynamic-field__content {
	font-size:     13px !important;
	font-weight:   600 !important;
	color:         var(--sp-slate) !important;
	background:    #fff !important;
	border:        1.5px solid var(--sp-border) !important;
	border-radius: 8px !important;
	padding:       7px 14px !important;
	display:       block !important;
	transition:    border-color .18s !important;
}
.elementor-element-1812030 .jet-listing-dynamic-field__content:hover,
.elementor-element-7b82c42 .jet-listing-dynamic-field__content:hover,
.elementor-element-809153b .jet-listing-dynamic-field__content:hover {
	border-color: rgba(217,4,41,.35) !important;
}

/* Íconos de detalle: color rojo */
.elementor-element-6e900e8 .elementor-icon,
.elementor-element-d05cfe4 .elementor-icon,
.elementor-element-5d18040 .elementor-icon {
	color: var(--sp-red) !important;
}

/* =============================================================================
   10. IMAGEN MEDIOS DE PAGO [ecfe4f8]
   ============================================================================= */
.elementor-element-ecfe4f8 img {
	max-height: 40px !important;
	width:      auto !important;
	opacity:    .65;
	filter:     grayscale(.2);
	transition: opacity .2s, filter .2s;
}
.elementor-element-ecfe4f8:hover img {
	opacity: 1;
	filter:  grayscale(0);
}

/* =============================================================================
   11. SECCIÓN RELATED PRODUCTS [57bb771] [df52582]
   ============================================================================= */
.elementor-element-57bb771 {
	padding-top: 40px !important;
}

/* Título "Productos relacionados" */
.woocommerce-page .related > h2,
.woocommerce .related > h2 {
	font-size:      22px !important;
	font-weight:    900 !important;
	color:          var(--sp-slate) !important;
	margin-bottom:  24px !important;
	padding-bottom: 10px !important;
	position:       relative !important;
}
.woocommerce-page .related > h2::after,
.woocommerce .related > h2::after {
	content:       '';
	position:      absolute;
	bottom:        0; left: 0;
	width:         36px; height: 3px;
	background:    linear-gradient(90deg, var(--sp-red), var(--sp-amber));
	border-radius: 2px;
}

/* Grid de productos relacionados */
.elementor-element-df52582 .related ul.products,
.woocommerce .related ul.products {
	display:               grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap:                   20px !important;
	list-style:            none !important;
	padding:               0 !important;
	margin:                0 !important;
}

/* Cards */
.elementor-element-df52582 .related ul.products li.product,
.woocommerce .related ul.products li.product {
	background:     #fff !important;
	border-radius:  14px !important;
	border:         1.5px solid var(--sp-border) !important;
	box-shadow:     0 2px 12px rgba(0,0,0,.06) !important;
	overflow:       hidden !important;
	display:        flex !important;
	flex-direction: column !important;
	position:       relative !important;
	transition:     transform .3s cubic-bezier(.34,1.2,.64,1), box-shadow .3s, border-color .25s !important;
}
.elementor-element-df52582 .related ul.products li.product:hover,
.woocommerce .related ul.products li.product:hover {
	transform:    translateY(-7px) !important;
	box-shadow:   0 18px 44px rgba(217,4,41,.15), 0 6px 18px rgba(0,0,0,.08) !important;
	border-color: var(--sp-red) !important;
}

/* Imagen */
.elementor-element-df52582 .related ul.products li.product a img,
.woocommerce .related ul.products li.product a img {
	width:        100% !important;
	aspect-ratio: 1 / 1 !important;
	object-fit:   contain !important;
	padding:      14px !important;
	background:   var(--sp-bg) !important;
	display:      block !important;
	transition:   transform .4s cubic-bezier(.4,0,.2,1) !important;
}
.woocommerce .related ul.products li.product:hover a img {
	transform: scale(1.05) !important;
}

/* Título */
.woocommerce .related ul.products li.product .woocommerce-loop-product__title {
	font-size:              13.5px !important;
	font-weight:            700 !important;
	color:                  var(--sp-slate) !important;
	padding:                12px 14px 4px !important;
	margin:                 0 !important;
	display:                -webkit-box !important;
	-webkit-line-clamp:     2 !important;
	-webkit-box-orient:     vertical !important;
	overflow:               hidden !important;
	transition:             color .18s !important;
}
.woocommerce .related ul.products li.product:hover .woocommerce-loop-product__title { color: var(--sp-red) !important; }

/* Precio */
.woocommerce .related ul.products li.product .price {
	padding:     0 14px 8px !important;
	font-size:   14px !important;
	font-weight: 800 !important;
	color:       var(--sp-slate) !important;
}
.woocommerce .related ul.products li.product .price ins {
	color:           var(--sp-green) !important;
	text-decoration: none !important;
}
.woocommerce .related ul.products li.product .price del { color: #94a3b8 !important; font-weight: 400 !important; }

/* Botón */
.woocommerce .related ul.products li.product .button {
	display:         block !important;
	margin:          6px 14px 14px !important;
	padding:         10px 0 !important;
	background:      linear-gradient(135deg, var(--sp-red), var(--sp-red-dk)) !important;
	color:           #fff !important;
	border-radius:   9px !important;
	font-size:       12px !important;
	font-weight:     700 !important;
	text-transform:  uppercase !important;
	letter-spacing:  .4px !important;
	text-align:      center !important;
	text-decoration: none !important;
	border:          none !important;
	cursor:          pointer !important;
	transition:      transform .18s, box-shadow .18s !important;
	box-shadow:      0 4px 14px rgba(217,4,41,.28) !important;
}
.woocommerce .related ul.products li.product .button:hover {
	transform:  translateY(-2px) !important;
	box-shadow: 0 8px 22px rgba(217,4,41,.46) !important;
	color:      #fff !important;
}

/* =============================================================================
   12. BOTÓN WHATSAPP — al lado del botón Comprar
   ============================================================================= */

/* La form.cart ya es flex; hacemos que los botones queden en fila */
.elementor-element-15b1a53 form.cart {
	flex-wrap: wrap !important;
	gap:       10px !important;
}

.hec-wa-btn {
	display:         inline-flex !important;
	align-items:     center !important;
	gap:             8px !important;
	height:          48px !important;
	padding:         0 22px !important;
	background:      linear-gradient(135deg, #25D366, #128C7E) !important;
	color:           #fff !important;
	border:          none !important;
	border-radius:   10px !important;
	font-size:       13.5px !important;
	font-weight:     700 !important;
	letter-spacing:  .3px !important;
	text-decoration: none !important;
	cursor:          pointer !important;
	white-space:     nowrap !important;
	transition:      transform .2s, box-shadow .2s !important;
	box-shadow:      0 6px 20px rgba(37,211,102,.38) !important;
	flex-shrink:     0 !important;
}
.hec-wa-btn svg {
	flex-shrink: 0 !important;
}
.hec-wa-btn:hover {
	transform:  translateY(-2px) !important;
	box-shadow: 0 10px 28px rgba(37,211,102,.55) !important;
	color:      #fff !important;
}
.hec-wa-btn:active {
	transform: translateY(0) !important;
}

/* =============================================================================
   13. SECCIÓN DE VIDEO DEL PRODUCTO
   ============================================================================= */

.hec-product-video {
	width:      100% !important;
	margin:     40px 0 !important;
	box-sizing: border-box !important;
}

.hec-product-video__inner {
	background:    linear-gradient(158deg, #060918 0%, #0f1e38 50%, #192038 100%);
	border-radius: 18px;
	overflow:      hidden;
	box-shadow:    0 12px 48px rgba(0,0,0,.35);
	position:      relative;
}

/* Línea top de marca */
.hec-product-video__inner::before {
	content:    '';
	position:   absolute;
	top:        0; left: 0; right: 0;
	height:     4px;
	background: linear-gradient(90deg, #6e0114, #D90429, #f59e0b, #D90429, #6e0114);
	z-index:    2;
}

.hec-product-video__header {
	display:     flex;
	align-items: center;
	gap:         10px;
	padding:     18px 24px 16px;
	font-size:   13px;
	font-weight: 700;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color:       rgba(255,255,255,.7);
}

.hec-product-video__icon {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	width:           36px;
	height:          36px;
	background:      rgba(217,4,41,.22);
	border:          1.5px solid rgba(217,4,41,.45);
	border-radius:   50%;
	color:           #f87171;
	flex-shrink:     0;
}

/* Responsive embed 16:9 */
.hec-product-video__embed {
	position:    relative;
	padding-top: 56.25%;
	background:  #000;
}
.hec-product-video__embed iframe {
	position: absolute;
	top:      0; left: 0;
	width:    100% !important;
	height:   100% !important;
	border:   0 !important;
	display:  block !important;
}

/* =============================================================================
   14. RESPONSIVE
   ============================================================================= */
@media (max-width: 900px) {
	.elementor-element-2863370 > .elementor-widget-wrap {
		border-left:   none !important;
		border-top:    4px solid var(--sp-red) !important;
		padding:       20px !important;
	}
	.elementor-element-df52582 .related ul.products,
	.woocommerce .related ul.products {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 14px !important;
	}
	.hec-wa-btn {
		width:           100% !important;
		justify-content: center !important;
	}
	.hec-product-video {
		margin: 24px 0 !important;
	}
}
@media (max-width: 480px) {
	.woocommerce .related ul.products {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 10px !important;
	}
	.elementor-element-15fefaa .product_title { font-size: 20px !important; }
	.hec-product-video__header { padding: 14px 16px 12px; }
}