/*
 Theme Name: Flatsome Child
 Theme URI: https://centrale.cl
 Description: Child theme for Flatsome
 Author: Romano
 Template: flatsome
 Version: 1.0.0
*/

.centrale-star-checked {
  color: #f7b603;
}

.hide {
	display: None;
}

.add-to-cart-container .stock {
	display: None;
}

.zoom-button {
	display: None !important;
}

.grecaptcha-badge{
	display: None !important;
}

.galeria-retiro-inmediato .price{
	font-size: 135% !important;
}

.galeria-retiro-inmediato .product-title{
	font-size: 120% !important;
}

.google-business-reviews-rating.columns .listing li {
	margin-bottom: 0px !important;	
}

.badge.post-date {
	display: none;
}

.includes_tax{
	display: none;
}

#tab-title-reviews{
	display: none;
}

/* Search button in mobile*/
div.dgwt-wcas-overlay-mobile {
	top: 95px;
	padding: 0px 10px;
	
	button.dgwt-wcas-om-return {
		border-top-left-radius: 2em;
		border-bottom-left-radius: 2em;
		background: #0076f1;
		width: 50px;
	}
	button.dgwt-wcas-om-return:hover {
		border-top-left-radius: 2em;
		border-bottom-left-radius: 2em;
		background: #0076f1;
		width: 50px;
	}
	
	#dgwt-wcas-search-input-3{
	    border: 1px solid #b5b5b5;
	    border-top-right-radius: 2em;
	    border-bottom-right-radius: 2em;
	}
}

/* Round the search bar in desktop site, in the header */
#dgwt-wcas-search-input-1{
	border-radius: 2em !important;
}

/* Round the right side button of the search bar in desktop site, in the header */
.dgwt-wcas-search-submit {
	border-top-right-radius: 20px !important;
	border-bottom-right-radius: 20px !important;
}

.badge-inner.secondary.on-sale {
	color: white;
	border-radius: 8px;
	background-color: #48CBFF;
}

.badge-container.left.top {
	right: 2px;
	left: initial;
}

.badge{
	height: 2.2em;
}

.badge-container{
	margin: 5px 3px !important;	
}

.strikethrough-price{
	background: linear-gradient(to left top, 
		transparent 47.75%, currentColor 49.5%, currentColor 50.5%, transparent 52.25%);
	text-decoration: none;
	color: #F43D52 !important;
}

.menu-icon-color{
	color: #FCBF02
}

.sustainability-color{
	color: #8DC73F
}

.round-edge-banner {
	.banner-inner .fill {
		 border-radius: 20px;
	}
	img{
		border-radius: 20px;
	}
	border-radius: 20px;
}

.top-divider{
	border: 0px;
}

.grid-categorias .img-inner{
	border-radius: 15px;
}

.dgwt-wcas-no-submit .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input {
  border-radius: 44px;
}

.reviews-background ul.listing li{
	background-color: rgba(17, 17, 17, 0.05);
	padding: 24px !important;
	border-radius: 8px;
}

.reviews-background ul.listing li .text {
		padding-inline-start: 0px !important;
}

.reviews-badge{
	width: 100% !important;
}

.google-business-reviews-rating{
	padding-bottom: 10px;
}

.widget.WpfWoofiltersWidget {
	margin-bottom: 0px;
}

li.header-button-2{
	margin-right: 20px;
	a {
		background-color: #48cbff !important;
	}
	a:hover {
		background-color: #0076f1 !important; 
	}
} 
.search-form{
	width: 100% !important;
}

.mobile-search-box{
	padding-bottom: 15px;
	margin-top: -20px
}

.padding-bottom-zero{
	padding-bottom: 0px !important;
}

/* esto es para el menú de categorías en el homepage, revisar si con actualizaciones de flatsome cambia el "img-inner".

add_filter('wt_crp_subcategory_only', '__return_true'); */


.height-150 img{
	height: 150px !important;
	width: auto !important;
}

.height-180 img{
	height: 180px !important;
	width: auto !important;
}

.shop-container .term-description {
  display: none;
}

.shop-container .product-small.col.product {
	padding: 0 8px 16px;
	
	.col-inner{
		border: 1px solid #ececec !important;
		border-radius: 5px;
		padding: 8px 12px 8px 12px;
	}
}

.wpfSingleInputSearch .passiveFilter {
	border-radius: 12px;
}

.wpfFilterContent select{
	border-radius: 12px;
}

.wpfClearButton.wpfButton{
	padding: 0px !important;
}

/* This rounds the borders of the two bottom buttons of the floating cart*/
.woocommerce-mini-cart__buttons .wc-forward, .wc-proceed-to-checkout .wc-forward{
	border-radius: 2em;
}

/* This makes round the button that updates the cart in the cart page*/
button[name="update_cart"]{
	border-radius: 2em;
}

/* This makes round the button that send you back to the store while on the cart page*/
a.button-continue-shopping{
	border-radius: 2em;
}

/* This makes round the button that is shown when deleting the last product from the floating cart*/
.return-to-shop a.wc-backward{
	border-radius: 2em;
} 

/* This makes round the button that is to finalize an order in the checkout*/
button#place_order{
	border-radius: 2em;
} 

/* This makes round the border of the checkout order summary + shipping methods + payment methods */
.checkout .col-inner.has-border{
  border-radius: 1em;
}
/* This makes checkout input fields round */
.checkout .woocommerce-input-wrapper input, .checkout .woocommerce-input-wrapper select{
  border-radius: 1em;
}

/* only for mobile */
@media screen and (max-width: 549px) {
	/* this prevents the logo in mobile to be too big, since we can only set one size for both mobile and desktop inside the flatsome configuration*/
	#logo {    
		width: 135px !important;
	}
	
	/* this aligns the floating cart in mobile to the center*/
	form.cart {
		justify-content: center;
	}
}

/* Sticky footer with add to cart in product page */
#mobile-sticky-cart {
  position: fixed;
  bottom: 0;
  width: 100%;
  left: 0;
  background-color: #fff;
  padding: 10px 15px;
  z-index: 1000;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
  border-top: 1px solid #eee;
  height: 60px;
}

/* Style for the mobile version of product title in product page */
.mobile-product-title{
	font-size: 1.2rem;
}

/* Style desktop description and tabs section */
.woocommerce-tabs.wc-tabs-wrapper{
    a[role="tab"] {
        border-top-right-radius: 2em;
        border-top-left-radius: 2em;
    }
    
    div.tab-panels{
        border-radius: 5px;
    }
}

/* Colour the objects that is being copied by inline copy script found in product page shortcodes */
.inlineCopy {
  cursor: pointer;
  transition: color 0.3s ease;
  position: relative;
}

.inlineCopy.copied {
  color: #0076f1; /* Verde cuando se copia */
  animation: copiedFeedback 0.3s ease;
}

@keyframes copiedFeedback {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.copy-tooltip {
  position: absolute;
  top: -1.5em;
  left: 0;
  background-color: #333;
  color: #fff;
  font-size: 0.75rem;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
  z-index: 999;
  animation: fadeInOut 1s ease forwards;
}

@keyframes fadeInOut {
  0% { opacity: 0; transform: translateY(-4px); }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-4px); }
}

.woocommerce-message:has(.added-to-cart) {
  display: none !important;
}


/* === PAYMENT METHODS CSS === */

/* === Payment methods: 2-row layout (title row + description row, icons aligned right) === */
#payment .wc_payment_methods > li{
  display: grid;
  grid-template-columns: 24px 1fr;  /* radio | content */
  grid-auto-rows: auto;
  column-gap: 10px;
  align-items: start;
  margin: 0 0 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0,0,0,.06); /* subtle divider */
}
#payment .wc_payment_methods > li:last-child{
  border-bottom: 0;
}

/* Radio in col 1, first row — restore size & alignment */
#payment .wc_payment_methods > li > input.input-radio {
  grid-column: 1;
  grid-row: 1;
  align-self: center;         /* vertically centers it again */
  justify-self: center;       /* keeps consistent horizontal spacing */
  margin: 0;
  appearance: auto;           /* restore browser default look */
  transform: scale(1);     /* make slightly larger for better visibility */
  cursor: pointer;
}

/* Label (title + icon) in col 2, first row */
#payment .wc_payment_methods > li > label{
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;  /* pushes icon to right edge */
  gap: 10px;
  margin: 0;
  min-width: 0;                    /* allow truncation */
  flex-wrap: nowrap;
}

/* Title stays on a single line; long titles ellipsize */
#payment .wc_payment_methods > li > label .pm-title{
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Standardize all gateway icons and align right */
#payment .wc_payment_methods > li > label img{
  height: 32px;
  width: auto;
  flex: 0 0 auto;
  object-fit: contain;
  margin-left: 10px;
}

/* Description box goes to row 2, spans under the label */
#payment .wc_payment_methods > li .payment_box{
  grid-column: 2;   /* under the label, not under the radio */
  grid-row: 2;
  margin: 6px 0 12px 0;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent;
}

/* Mobile: keep same structure but tighten spacing */
@media (max-width: 480px){
  #payment .wc_payment_methods > li{ column-gap: 8px; }
  #payment .wc_payment_methods > li > label img{ height: 28px; }
}

/* Subtle divider between methods (not inside the description box) */
#payment .wc_payment_methods > li{
  border: 0;                      /* reset */
  padding-bottom: 10px;
  margin-bottom: 10px;
}
#payment .wc_payment_methods > li:not(:last-child){
  border-bottom: 1px solid rgba(0,0,0,.06);
}

/* Make sure the description box itself has no border */
#payment .wc_payment_methods > li .payment_box{
  border: 0 !important;
  box-shadow: none !important;
  background: transparent;
}


/* === MERCADO PAGO – Compact Checkout Styling === */
/* Scope: only inside the Mercado Pago custom payment method */
li.payment_method_woo-mercado-pago-custom {
  --mp-scale: 0.90 !important;       /* smaller = more compact inputs */
  --mp-input-height: 42px !important;
}

/* Wallet block (blue button + text) */
.payment_method_woo-mercado-pago-custom .mp-wallet-button-container {
  padding: 10px 12px !important;
  border: 1px solid #eee !important;
  border-radius: 10px !important;
  margin-bottom: 12px !important;
}
.payment_method_woo-mercado-pago-custom .mp-wallet-button-title span {
  font-size: 13px!important;
  line-height: 1.2 !important;
}
.payment_method_woo-mercado-pago-custom #mp-wallet-button {
  padding: 6px 10px !important;
  border-radius: 10px !important;
}
.payment_method_woo-mercado-pago-custom #mp-wallet-button img {
  height: 20px !important;
  width: auto !important;
}

/* Form spacing */
.payment_method_woo-mercado-pago-custom .mp-checkout-custom-card-form {
  gap: 10px !important;
}
.payment_method_woo-mercado-pago-custom .mp-checkout-custom-card-row {
  margin-bottom: 8px !important;
}
.payment_method_woo-mercado-pago-custom .mp-checkout-custom-dual-column-row {
  gap: 12px !important;
}

/* Labels & helpers */
.payment_method_woo-mercado-pago-custom .mp-input-label {
  font-size: 12px !important; 
  line-height: 1.2 !important;
  margin-bottom: 4px !important;
}
.payment_method_woo-mercado-pago-custom .mp-helper-message {
  font-size: 12px !important;
}
  
.payment_method_woo-mercado-pago-custom .mp-checkout-custom-security-code-tooltip {
  width: 18px !important;
  height: 18px !important;
  font-size: 12px !important;
  line-height: 18px !important;
}

/* Input containers (iframes + text inputs) */
.payment_method_woo-mercado-pago-custom .mp-checkout-custom-card-input,
.payment_method_woo-mercado-pago-custom .mp-checkout-custom-left-card-input,
.payment_method_woo-mercado-pago-custom .mp-checkout-custom-security-code-input {
  height: var(--mp-input-height) !important;
  border-radius: 8px !important;
}

/* Cardholder name input */
.payment_method_woo-mercado-pago-custom input.mp-card-holder-name {
  height: var(--mp-input-height) !important;
  padding: 8px 10px !important;
  font-size: 14px !important;
  border-radius: 8px !important;
}

/* Document select + input row */
.payment_method_woo-mercado-pago-custom .mp-input-select-select,
.payment_method_woo-mercado-pago-custom .mp-document,
.payment_method_woo-mercado-pago-custom .mp-input-select-input {
  height: var(--mp-input-height) !important;
  font-size: 14px !important;
}
.payment_method_woo-mercado-pago-custom .mp-vertical-line {
  height: calc(var(--mp-input-height) - 8px) !important;
}

/* Issuer / installments */
.payment_method_woo-mercado-pago-custom #mp-checkout-custom-installments-card select {
  height: var(--mp-input-height) !important;
  font-size: 14px !important;
}

/* Optional: smaller font inside select placeholders */
.payment_method_woo-mercado-pago-custom select option[data-placeholder] {
  font-size: 13px !important;
  color: #777 !important;
}
	

/* === Shipping Methods — clean cards, 2em radius, centered icon, no outer pill === */

/* Row layout: [radio] [card] */
#shipping_method .shipping__list_item{
  display: grid;
  grid-template-columns: 22px 1fr;
  column-gap: 10px;
  align-items: start;
  margin: 0 0 12px;
  padding: 0;
  border: 0 !important;                /* kill theme border on <li> */
  background: transparent !important;  /* kill theme bg on <li>   */
}

/* Radio — normal size, centered */
#shipping_method .shipping__list_item > input.shipping_method{
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  justify-self: center;
  margin: 0;
  appearance: auto;
  transform: scale(1.15);
  accent-color: #0076f1;
  cursor: pointer;
}

/* Card (the label) — the ONLY element with border/background */
#shipping_method .shipping__list_item > label.shipping__list_label{
  grid-column: 2;
  grid-row: 1;
  display: block;
  width: 100%;
  padding: 10px 14px;                  /* compact */
  border: 1px solid rgba(0,0,0,.14);
  border-radius: 2em;                   /* your global radius */
  background: #fff;
  line-height: 1.35;
  transition: border-color .15s, background-color .15s, box-shadow .15s;
  cursor: pointer;
}

/* Inside the card: fixed icon column + text column */
#shipping_method .shipping__list_label .ship-label{
  --icon-col: 60px;                     /* keep all text aligned */
  display: grid;
  grid-template-columns: var(--icon-col) 1fr;
  column-gap: 10px;
  align-items: center;                  /* centers icon vertically */
}

/* Icon cell (ignore inline width attribute) */
#shipping_method .shipping__list_label .ship-icon{
  width: auto !important;
  max-width: 100%;
  max-height: 45px;
  justify-self: center;
  object-fit: contain;
  margin: 0 !important;
}

/* Text column */
#shipping_method .shipping__list_label .ship-text{
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
#shipping_method .shipping__list_label .ship-title{
  font-weight: 700;
  line-height: 1.25;
}
#shipping_method .shipping__list_label .ship-desc{
  color: #555;
  line-height: 1.3;
}

/* Hover state: blue */
#shipping_method .shipping__list_item > label.shipping__list_label:hover{
  border-color: #0076f1;
  background: #f7fbff;
}

/* SELECTED state: keep blue (works everywhere) */
#shipping_method .shipping__list_item > input.shipping_method:checked + label.shipping__list_label{
  border-color: #0076f1;
  background: #f7fbff;
}

/* If your theme also styles the <li> when checked, neutralize it */
@supports(selector(:has(*))){
  #shipping_method .shipping__list_item:has(> input.shipping_method:checked){
    border: 0 !important;
    background: transparent !important;
  }
}

/* Mobile tweaks */
@media (max-width: 480px){
  #shipping_method .shipping__list_item{ grid-template-columns: 20px 1fr; column-gap: 8px; }
  #shipping_method .shipping__list_item > label.shipping__list_label{ padding: 8px 12px; }
  #shipping_method .shipping__list_label .ship-label{ --icon-col: 50px; }
  #shipping_method .shipping__list_label .ship-icon{ max-height: 26px; }
}

/*--------------------INICIO CSS PARA BANNER EN TOP HEADER MERCADO LIBRE 3 A 6 CUOTAS--------------------*/

.custom-banner-ml {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffde00; /* Mercado Pago yellow */
  padding: 5px 8px;
  gap: 24px; /* space between logo and text */
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: #333333;
  text-align: center;
  box-sizing: border-box;
}

/* Logo column */
.banner-logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.banner-logo img {
  display: block;
  height: 40px; /* adjust as needed */
  width: auto;
  margin: 0;
  padding: 0;
}

/* Text column */
.banner-text {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  line-height: 1.2;
}

/* Responsive stacking for mobile */
@media (max-width: 600px) {
  .custom-banner {
    flex-direction: column;
    text-align: center;
    gap: 8px;
  }

  .banner-logo img {
    height: 36px;
  }

  .banner-text {
    text-align: center;
    font-size: 15px;
  }
}
/*------------------FIN CSS PARA BANNER EN TOP HEADER MERCADO LIBRE 3 A 6 CUOTAS--------------------*/


/*-------------------------------------------------------INICIO CSS PARA BANNER HERO-----------------------------------------------------------*/
body.page-id-259 #header,
body.page-id-259 #header .header-wrapper {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  border-bottom: 0 !important; /* por si hay una línea */
}

/* Quita empuje superior del contenido */
body.page-id-259 #main,
body.page-id-259 .page-wrapper,
body.page-id-259 .entry-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.hero-banner-web2 {
  width: 100vw;
  max-width: 100vw;
  max-height: 400px;
  height: 60vh;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  background-image: url('https://centrale.cl/wp-content/uploads/Centrale-banner1-scaled.jpg');
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  /* centra verticalmente */
  justify-content: flex-start;
  /* centra horizontalmente */
  color: white;
  position: relative;
  overflow: hidden;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* opcional: capa oscura sobre la imagen para mejorar legibilidad */
.hero-banner-web2::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
      rgba(0, 118, 241, 0.9) 0%,
      /* 90% opaco al inicio (izquierda) */
      rgba(49, 118, 223, 0.0) 100%
      /* 0% al final (derecha) */
    );
}

.hero-inner-web2 {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1400px;
  /* AJUSTA a tu ancho real de contenido en Flatsome */
  margin: 0 auto;
  /* centra como el resto del sitio */
  /*padding-inline: 24px;*/
  /* AJUSTA: mismo gutter lateral que tus cards */
}

.hero-content-web2 {
  position: relative;
  /* para quedar sobre la capa oscura */
  z-index: 1;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(80px, 8vw, 180px); /* empuja el texto hacia la derecha */
  text-align: left;
  box-sizing: border-box;
}

.hero-content-web2 h2 {
  font-family: "Inter", sans-serif;
  font-size: 2.5rem;
  color: #ffffff;
  margin-bottom: 10px;
}

.hero-content-web2 p {
  font-family: "Inter", sans-serif;
  font-size: 1.2rem;
  line-height: 1.5;
  color: #ffffff;
}

.hero-btnweb2 {
  display: inline-block;
  font-family: "Inter", sans-serif;
  margin-top: 15px;
  padding: 12px 28px;
  background: linear-gradient(90deg, var(--grad-a), var(--grad-b));
  /* background-color: #0076F1; */
  color: #ffffff;
  /* texto oscuro para contraste */
  font-weight: 550;
  font-size: 1rem;
  border: none;
  border-radius: 40px;
  /* forma ovalada */
  text-decoration: none;
  transition: all 0.25s ease;
}

/* efecto hover */
.hero-btnweb2:hover {
  background-color: transparent;
  color: #ffffff;
  transform: scale(1.05);
  box-shadow: 0 0px 10px rgba(0, 0, 0, .6);
}
/*------------------------------------------------------------FIN DE  CSS PARA BANNER HERO----------------------------------------------------------*/

/*------------------INICIO CSS para Hero HEADER antes de las Cards de WOrkstations------------------*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap');

:root {
  --bg: #ffffff;
  --text: #242424;
  --heading: #242424;
  /* azul profundo del título */
  --muted: #4b4f58;
  /* cuerpo */
  --grad-a: #48CBFF;
  /* turquesa */
  --grad-b: #0076F1;
  /* cian */
  --maxw: 1050px;
}

* {
  box-sizing: border-box;
}

/*body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif !important;
  color: var(--text);
  background: var(--bg);
  line-height: 1.45;
}*/

.herows {
  padding: 10px 20px 20px;
  display: grid;
  place-items: center;
  text-align: center;
}

.containerws {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  font-family: 'Inter', sans-serif !important;
}

.h2ws {
  margin: 0 0 18px;
  font-family: 'Inter', sans-serif !important;
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 800;
  letter-spacing: 0.2px;
  color: var(--heading);
  line-height: 1.15;
}

/* Texto en degradado para la última parte del título */
.accentws {
  font-family: 'Inter', sans-serif !important;
  background: linear-gradient(90deg, var(--grad-a), var(--grad-b));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
  /* mantiene la frase en una línea cuando hay espacio */
}

.leadws {
  margin: 0 auto;
  font-family: 'Inter', sans-serif !important;
  max-width: 900px;
  font-size: clamp(14px, 1.6vw, 18px);
  color: var(--muted);
}

/*------------------FIN CSS para Hero HEADER antes de las Cards de WOrkstations------------------*/

/*------------------INICIO CSS PARA CARDS DE WORKSTATIONS EN PÁGINA DE INICIO ----------------------*/

.workstation-cards-section {
  font-family: Arial, sans-serif;
  background-color: #ffffff;
  margin: 0;
  padding: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}


.wscard-container {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: nowrap;
  align-items: stretch;
  /* <-- iguala la altura de todas las tarjetas */
}


.wscard {
  position: relative;
  overflow: visible;
  border-radius: 10px;
  display: flex;
  flex: 0 0 380px;
  flex-direction: column;
  justify-content: space-between;
  background-color: #f3f3f3;
  color: #242424;
  text-align: center;
  padding: 15px;
  margin: 15px;
  box-shadow: 0 0px 20px rgba(0, 0, 0, .4);
  transition: transform .3s ease, box-shadow .3s ease;
  z-index: 0;
}

.wscard:hover {
  transform: translateY(-7px);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.6);
  --halo-speed-1: 1.5s;
  --halo-speed-2: 4s;
}

.wscard img {
  width: 80%;
  border-radius: 8px;
  margin-bottom: 11px;
  height: auto;
  display: block;
  align-self: center;
}

.wscard h2 {
  font-size: 1.4rem;
  margin-bottom: 10px;
}

.wscard p {
  flex-grow: 1;
  /* hace que el texto ocupe el espacio restante */
  font-size: 0.95rem;
  color: #242424;
  margin-bottom: 15px;
  line-height: 1.5;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

.wscard .wscard-btn {
  display: inline-flex !important;
  align-self: center;
  /* centra horizontalmente el botón */
  align-items: center;
  background-color: #0076F1;
  margin-top: auto;
  color: #fff;
  white-space: nowrap;
  text-decoration: none;
  padding: 10px 16px;
  border-radius: 6px;
  transition: background-color 0.3s ease;
  line-height: 1.25;
  justify-content: center;
  white-space: nowrap !important;
  /* NO partir línea */
  word-break: keep-all !important;
  /* NO cortar palabras */
  overflow-wrap: normal !important;
  width: auto !important;
  max-width: none !important;
}

.wscard .wscard-btn:hover {
  display: inline-flex !important;
  align-self: center;
  /* centra horizontalmente el botón */
  align-items: center;
  background-color: #005fc5;
  color: #fff !important;
  margin-top: auto;
  white-space: nowrap;
  text-decoration: none;
  padding: 10px 16px;
  border-radius: 6px;
  transition: background-color 0.3s ease;
  line-height: 1.25;
  justify-content: center;
  white-space: nowrap !important;
  /* NO partir línea */
  word-break: keep-all !important;
  /* NO cortar palabras */
  overflow-wrap: normal !important;
  width: auto !important;
  max-width: none !important;
}

@media (max-width: 1000px) {
  .workstation-cards-section .wscard-container {
    flex-wrap: wrap;
  }
}

/* -----------------EFECTOS DE COLOR Y ROTACION----------------- */

/* 1) GLOW: conic-gradient rotando detrás de la card */
.wscard::before{
  content:"";
  position:absolute;
  inset:-18px;                        /* más grande que la card */
  border-radius: 12px;                /* respeta esquinas */
  z-index:-1;                         /* detrás de todo */
  pointer-events:none;

  background: conic-gradient(
    from var(--a, 0deg),
    #0076F1 0deg,
    #128FFF 90deg,
    #48CBFF 180deg,
	#128FFF 270deg,
    #0076F1 360deg
  );

  filter: blur(10px);                 /* difuminado suave hacia afuera */
  opacity: .3;                       /* que se sienta “sombra”, no mancha */
  animation: wscardSpin 2s linear infinite;
}

/* 2) TAPA: cubre el interior con el mismo fondo de la card (sin mask) */
.wscard::after{
  content:"";
  position:absolute;
  inset:0;                             /* exactamente el tamaño de la card */
  border-radius: inherit;
  background: #f3f3f3;                 /* el mismo color de la card */
  z-index: 1;                          /* por encima del glow, por debajo del contenido */
  pointer-events:none;
}

/* 3) El contenido va por encima de la “tapa” */
.wscard > *{ position: relative; z-index: 4; }

/* Variable y animación para la rotación del gradiente */
@property --a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes wscardSpin { to { --a: 360deg; } }


/* ----- HACER GIRAR EL COLOR AL REVES CUANDO TIENE HOVER --------*/
/* Reversa la rotación en hover */
.wscard:hover::before {
  animation: wscardSpin 1.3s linear infinite;
  opacity: 1;
  inset:-12px;
}

/*------------------FIN CSS PARA CARDS DE WORKSTATIONS EN PÁGINA DE INICIO ----------------------*/


#mobile-sticky-cart {
  position: fixed;
  bottom: 0;
  width: 100%;
  left: 0;
  background-color: #fff;
  padding: 10px 15px;
  z-index: 1000;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
  border-top: 1px solid #eee;
  height: 60px;
}

.single-product #chaty-widget-0 .chaty-widget {
  bottom: 65px !important;
  left: 5px !important;
  z-index: 1040 !important;
}

/* On all other pages */
body:not(.single-product) #chaty-widget-0 .chaty-widget {
  left: 5px !important;
  z-index: 1040 !important;
}