.elementor-359 .elementor-element.elementor-element-9ef0693{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-359 .elementor-element.elementor-element-7b0a096{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-359 .elementor-element.elementor-element-dcaaa90{--display:flex;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-359 .elementor-element.elementor-element-7bdc7ba{text-align:center;}.elementor-359 .elementor-element.elementor-element-7bdc7ba .elementor-heading-title{font-family:"Roboto", Sans-serif;font-weight:600;text-transform:uppercase;}.elementor-359 .elementor-element.elementor-element-93da692{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-359 .elementor-element.elementor-element-eb44494{text-align:center;}.elementor-359 .elementor-element.elementor-element-eb44494 .elementor-heading-title{font-family:"Roboto", Sans-serif;font-weight:600;text-transform:uppercase;}/* Start custom CSS for container, class: .elementor-element-9ef0693 *//* =========================================
   Elementor NAV MENU (móvil): items invisibles + dropdown bien puesto
   ========================================= */

:root{
  --jcl-green: #145A32;
  --jcl-green-hover: #0E4626;
  --jcl-ink: #111827;
}

/* MÓVIL */
@media (max-width: 767px){

  /* 1) Botón hamburguesa visible y consistente */
  .elementor-widget-nav-menu .elementor-menu-toggle{
    background: var(--jcl-green) !important;
    border-radius: 10px !important;
    padding: 10px 12px !important;
    border: 1px solid rgba(0,0,0,.10) !important;
  }
  .elementor-widget-nav-menu .elementor-menu-toggle i,
  .elementor-widget-nav-menu .elementor-menu-toggle svg{
    color: #fff !important;
    fill: #fff !important;
    font-size: 20px !important;
  }

  /* 2) Contenedor dropdown: fondo blanco, sombra, y “corrido” con márgenes */
  .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-nav-menu__container{
    background: #fff !important;
    border: 1px solid rgba(0,0,0,.10) !important;
    border-radius: 12px !important;
    box-shadow: 0 14px 28px rgba(0,0,0,.18) !important;

    margin-top: 12px !important;

    left: 12px !important;
    right: 12px !important;
    width: auto !important;

    z-index: 9999 !important;
    position: absolute !important;
  }

  /* 3) Asegura que el UL no herede fondo raro */
  .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-nav-menu{
    background: transparent !important;
  }

  /* 4) Items SIEMPRE legibles (no blanco) */
  .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-nav-menu a{
    color: var(--jcl-ink) !important;
    background: transparent !important;

    padding: 14px 14px !important;
    font-weight: 900 !important;
    letter-spacing: .8px;
    text-transform: uppercase;

    border-bottom: 1px solid rgba(0,0,0,.06) !important;
  }

  .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-nav-menu li:last-child a{
    border-bottom: none !important;
  }

  /* 5) Estados tap/active */
  .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-nav-menu a:hover,
  .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-nav-menu a:focus,
  .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-nav-menu .current-menu-item > a,
  .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-nav-menu .current-menu-ancestor > a{
    background: rgba(20,90,50,.10) !important;
    color: var(--jcl-green-hover) !important;
  }

  /* 6) Submenú (si hay) */
  .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-nav-menu .sub-menu{
    background: #fff !important;
    padding-left: 10px !important;
  }
  .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-nav-menu .sub-menu a{
    font-weight: 800 !important;
    text-transform: none !important;
    letter-spacing: .2px !important;
  }

  /* 7) Si Elementor puso opacity/visibility raro, lo forzamos cuando está activo */
  .elementor-widget-nav-menu .elementor-nav-menu--dropdown.elementor-nav-menu__container,
  .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-nav-menu__container{
    opacity: 1 !important;
  }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b0a096 *//* ==================================================
   HOME blocks (Elementor) — unificación industrial
   Requiere clases:
   .jcl-home-block  (contenedor sección)
   .jcl-products-grid (widget shortcode)
   ================================================== */

:root{
  --jcl-green: #145A32;
  --jcl-green-2: #1F6B3B;
  --jcl-green-hover: #0E4626;
  --jcl-ink: #0B1220;
  --jcl-muted: #6B7280;
  --jcl-bg: #F3F5F4;
  --jcl-card: #FFFFFF;
  --jcl-border: rgba(15,23,42,.14);
  --jcl-shadow: 0 12px 28px rgba(0,0,0,.14);
}

/* 1) Secciones como “tarjetas” consistentes */
.jcl-home-block{
  background: var(--jcl-card);
  border: 1px solid var(--jcl-border);
  border-radius: 18px;
  box-shadow: var(--jcl-shadow);
  padding: 28px 22px;
  margin: 22px 0;
}

/* 2) Encabezados de sección (DESTACADOS / NUESTROS PRODUCTOS) */
.jcl-home-block h1,
.jcl-home-block h2,
.jcl-home-block h3,
.jcl-home-block .elementor-heading-title{
  color: var(--jcl-ink);
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0 0 16px;
}

/* Opcional: línea industrial debajo del título (solo si quieres) */
.jcl-home-block .elementor-heading-title{
  position: relative;
  display: inline-block;
  padding-bottom: 10px;
}
.jcl-home-block .elementor-heading-title::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width: 64px;
  height: 4px;
  border-radius: 999px;
  background: rgba(20,90,50,.55);
}

/* 3) Barra de resultados y orden (Woo default) */
.jcl-products-grid .woocommerce-result-count{
  color: var(--jcl-muted);
  font-weight: 700;
  margin: 0 0 12px;
}

.jcl-products-grid .woocommerce-ordering select{
  border-radius: 12px;
  border: 1px solid var(--jcl-border);
  padding: 10px 12px;
  background: #fff;
  font-weight: 700;
}

/* 4) Grid de productos: más aire y consistencia */
.jcl-products-grid ul.products{
  margin-top: 14px !important;
  gap: 18px;
}

/* 5) Tarjeta por producto */
.jcl-products-grid ul.products li.product{
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
  padding: 14px !important;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

.jcl-products-grid ul.products li.product:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 28px rgba(0,0,0,.14);
  border-color: rgba(31,107,59,.22);
}

/* 6) Imagen: recorte limpio */
.jcl-products-grid ul.products li.product a img{
  border-radius: 14px;
  background: #F6F7F8;
  padding: 14px;
}

/* 7) Título del producto (mata el rosa) */
.jcl-products-grid ul.products li.product .woocommerce-loop-product__title{
  color: var(--jcl-ink) !important;
  font-weight: 900 !important;
  letter-spacing: .3px;
  text-transform: uppercase;
  line-height: 1.15;
  margin: 12px 0 8px !important;

  /* clamp para títulos larguísimos */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 3.5em;
}

/* 8) Precio (consistente y pro) */
.jcl-products-grid ul.products li.product .price{
  color: var(--jcl-green-2) !important;
  font-weight: 900 !important;
  margin: 0 0 12px !important;
}
.jcl-products-grid ul.products li.product .price del{
  opacity: .55;
  margin-right: 8px;
}

/* 9) Botón “Añadir al carrito” industrial */
.jcl-products-grid ul.products li.product a.button,
.jcl-products-grid ul.products li.product button.button{
  background: var(--jcl-green-2) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  font-weight: 900 !important;
  letter-spacing: .6px;
  text-transform: uppercase;
  width: 100%;
  text-align: center;
  transition: transform .12s ease, background .12s ease, filter .12s ease;
}

.jcl-products-grid ul.products li.product a.button:hover,
.jcl-products-grid ul.products li.product button.button:hover{
  background: var(--jcl-green-hover) !important;
  transform: translateY(-1px);
  filter: brightness(1.03);
}

/* 10) Oculta “added” feo o ajusta badges */
.jcl-products-grid ul.products li.product .added_to_cart{
  display: inline-block;
  margin-top: 10px;
  font-weight: 800;
  color: var(--jcl-ink);
  text-decoration: underline;
}

/* Responsive: padding y tarjetas en móvil */
@media (max-width: 767px){
  .jcl-home-block{
    padding: 20px 14px;
    border-radius: 16px;
  }
  .jcl-products-grid ul.products li.product{
    border-radius: 14px;
  }
}/* End custom CSS */