/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/* Margen p */
.p-no-bottom p:last-child{
	margin-bottom: 0;
}

/* Fondos y colores de span */
span.txt-fondo-verde{
	background: #94C912;
}

span.txt-color-verde{
	color: #94C912;
}



/* Botón back to top */
.back-top:hover{
	cursor: pointer;
}

.back-top > div > div.elementor-icon{
	background: #fff;
	padding: 1px 1.5px 1.5px 1px;
	border-radius: 50px;
}

/* Menú sticky */
.menu-sticky{
	transition: all .3s;
}

.menu-sticky:is(.elementor-sticky--active){
	box-shadow: 0px 5px 25px -5px rgba(0,0,0,0.25);
}

/* Hover video */
/* Ocultar ícono de play Elementor */
.per-video .elementor-custom-embed-play {
    display: none !important;
}

/* Nuevo ícono de play personalizado */
.per-video .elementor-custom-embed-image-overlay::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    transform: translate(-50%, -50%) scale(1);
    background-image: url('/wp-content/uploads/2026/01/boton-play.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
	opacity: 0.8;
    transition: transform 0.3s ease-in-out;
}

.per-video:hover .elementor-custom-embed-image-overlay::after {
    transform: translate(-50%, -50%) scale(1.25);
}

/* Formularios */

/* Textarea: sin resize */
.effect-label-form form textarea.effect-label-control {
  resize: none;
  padding-top: 15px;
}

.effect-label-form form {
  position: relative;
}

.effect-label-form form .effect-label-field {
  position: relative;
  margin-bottom: 1.25rem;
}

.effect-label-form form .effect-label-control {
  display: block;
  width: 100%;
  box-sizing: border-box;
	padding-top: 10px;
}

/* Label flotando en el input */
.effect-label-form form .effect-label-label {
  position: absolute;
  left: 20px;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.9rem;
  line-height: 1.2;
  color: #777;
  pointer-events: none;
  transition: all 0.18s ease-out;
  margin: 0 !important;
  background: transparent;
}

.effect-label-form form .effect-label-field.effect-label-textarea .effect-label-label {
  top: 5%;
  transform: translateY(0);
}

/* Estados de focus o con contenido */
.effect-label-form form .effect-label-field.is-focused .effect-label-label,
.effect-label-form form .effect-label-field.is-filled .effect-label-label,
.effect-label-form form .effect-label-field.filled .effect-label-label {
  top: 4px;
  transform: translateY(0);
  font-size: 0.6rem;
  z-index: 999;
}
	
.effect-label-form form .effect-label-field.is-focused .effect-label-control,
.effect-label-form form .effect-label-field.is-filled .effect-label-control,
.effect-label-form form .effect-label-field.filled .effect-label-control{
  box-shadow: none !important;
}


/* Mensaje de error */
.error-msg-right .elementor-message{
	text-align: right;
}

/* ---------- Menú ---------- */

/* Menú auto */
.nav-auto .elementor-nav-menu > li{
   flex: 0 0 auto !important;
}

.nav-auto > nav > ul{
	justify-content: space-between;
}
	
.nav-auto > nav > ul::after{
	display: none !important;
}


/* Separador para menú */
.menu-separador .elementor-nav-menu {
    display: flex !important;
    width: 100% !important;
    justify-content: space-between !important;
    gap: 0 !important;
}

.menu-separador .elementor-nav-menu > li {
    flex-grow: 1 !important;
    flex-basis: 0 !important;
    text-align: center !important;
    justify-content: center !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    background: linear-gradient(#000, #000) no-repeat right center !important;
    background-size: 1px 16px !important;
}

.menu-separador .elementor-nav-menu > li > a {
    display: block;
    width: 100%;
}

.menu-separador .elementor-nav-menu > li:last-child {
    background: none !important;
}

/* Mega menú */
#e-n-menu-content-1441 .btn-ver-producto{
	display: none !important;
}



/* ALINEACIÓN DE PRODUCTOS EN TIENDA Y CATEGORIAS */
/* =========================================
   ZWT - Loop Grid: layout tipo referencia (control total)
   Clase del widget Loop Grid: zwt-shop-grid
========================================= */

/* Ajustes rápidos de tamaño */
.zwt-shop-grid{
  --zwt-visual-h: 300px;     /* antes 440px -> MÁS pequeño y elegante */
  --zwt-green-bottom: 25px;  /* antes 34px -> menos “aire” abajo */
  --zwt-img-maxw: 82%;       /* antes 92% -> imagen más pequeña */
	
  --zwt-img-maxh: 82%;     /* margen arriba/abajo */
	
 /* --zwt-overlap: 10px;   */    /* antes 14px -> sobresale menos */
  --zwt-radius: 24px;
}

/* 1) Tarjeta en columna para alinear bloque inferior */
.zwt-shop-grid .elementor-loop-container > [data-elementor-type="loop-item"] .elementor-element-498499f{
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* 2) ÁREA VISUAL con altura fija (verde + producto) */
/*.zwt-shop-grid .elementor-loop-container > [data-elementor-type="loop-item"] .elementor-element-1961064{
  position: relative;
  height: var(--zwt-visual-h);
  overflow: visible;
}*/


/* Área visual */
.zwt-shop-grid .elementor-loop-container > [data-elementor-type="loop-item"] .elementor-element-1961064{
  position: relative;
  flex: 0 0 var(--zwt-visual-h);
  height: var(--zwt-visual-h);
  overflow: hidden;
}






/* 3) Recuadro verde: siempre igual (fondo) */
/*.zwt-shop-grid .elementor-loop-container > [data-elementor-type="loop-item"] .elementor-element-80bb2fa{
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
  bottom: var(--zwt-green-bottom);
  border-radius: var(--zwt-radius);
  z-index: 0;
}*/

/* 4) Widget de imagen: marco absoluto */
.zwt-shop-grid .elementor-loop-container > [data-elementor-type="loop-item"] .elementor-widget-image{
  position: absolute;
  inset: 0;
  z-index: 1;

  display: flex;
  align-items: center;
  justify-content: center;

  pointer-events: none;
}

/* Link clickeable */
.zwt-shop-grid .elementor-loop-container > [data-elementor-type="loop-item"] .elementor-widget-image a{
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* 5) Imagen: completa, sin deformar, y con sobresalida */
.zwt-shop-grid .elementor-loop-container > [data-elementor-type="loop-item"] .elementor-widget-image img{
  width: auto !important;
  height: auto !important;
  max-width: var(--zwt-img-maxw);
	
  max-height: var(--zwt-img-maxh);
	
 /* max-height: 100%;*/
  object-fit: contain;
  display: block;

  /*transform: translateY(var(--zwt-overlap));*/
  /*transform: none;*/
  
  margin: 0 auto;
}




/* NUEVO CÓDIGO AGREGADO */
/* La sobresalida se aplica al contenedor (no al img), para no matar el shrink */
/*.zwt-shop-grid .elementor-loop-container > [data-elementor-type="loop-item"] .elementor-widget-image a{
  transform: translateY(var(--zwt-overlap));
  transition: transform .25s ease;*/ /* suave */
/*}*/


/* Shrink al hover: al pasar sobre la tarjeta, encoge la imagen */
.zwt-shop-grid .elementor-loop-container > [data-elementor-type="loop-item"]:hover .elementor-widget-image a{
  transform: /*translateY(var(--zwt-overlap))*/ scale(0.96);
  transition: transform .25s ease;
}

/* Opcional: al hover directo del link también */
.zwt-shop-grid .elementor-loop-container > [data-elementor-type="loop-item"] .elementor-widget-image a:hover{
  transform: /*translateY(var(--zwt-overlap))*/ scale(0.96);
  transition: transform .25s ease;
}

/* AQUI TERMINA EL NUEVO CODIGO */



/* 6) Bloque texto/botón */
.zwt-shop-grid .elementor-loop-container > [data-elementor-type="loop-item"] .elementor-element-d01b222{
  margin-top: 20px;
}

/* 7) Títulos (2 líneas) */
.zwt-shop-grid .elementor-loop-container h3.product_title{
  line-height: 1.2;
  min-height: 2.4em;
}


/* =========================================
   FIX: alinear títulos + botones siempre
   (1 o 2 líneas en el título = mismo layout)
========================================= */

/* 1) El loop-item debe ser columna y estirarse */
.zwt-shop-grid .elementor-loop-container > [data-elementor-type="loop-item"]{
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* 2) El contenedor principal (498499f) también columna y ocupa el alto */
.zwt-shop-grid .elementor-loop-container > [data-elementor-type="loop-item"] .elementor-element-498499f{
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* 3) El bloque de imagen mantiene su alto fijo */
.zwt-shop-grid .elementor-loop-container > [data-elementor-type="loop-item"] .elementor-element-1961064{
  flex: 0 0 var(--zwt-visual-h);
}

/* 4) Bloque inferior: lo hacemos "layout" con flex y quitamos tu margin-top */
.zwt-shop-grid .elementor-loop-container > [data-elementor-type="loop-item"] .elementor-element-d01b222{
  margin-top: auto !important;   /* <-- clave: empuja el bloque abajo */
  display: flex;
  flex-direction: column;
  gap: 14px;                     /* espacio elegante entre título y botón */
  padding-top: 25px;             /* aire arriba sin romper alineación */
}

/* 5) Reservar siempre 2 líneas para el título */
.zwt-shop-grid .elementor-loop-container h3.product_title{
  line-height: 1.2;
  min-height: 2.4em;             /* 2 líneas */
  margin: 0;
}

/* 6) Botón siempre abajo del bloque inferior (misma línea entre cards) */
.zwt-shop-grid .elementor-loop-container > [data-elementor-type="loop-item"] .btn-ver-producto{
  margin-top: auto;
}








/* CAMBIO DE ICONO "X" A BASURERO DE PÁGINA COTIZAR, PARA REMOVER PRODUCTOS */
/* CART (solo widget .resumen-form): reemplazar "×" por basurero Elementor */
.resumen-form td.product-remove a.remove{
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* Oculta el carácter × pero deja el link funcionando */
  font-size: 0 !important;
  line-height: 0 !important;

  /* Icono negro como la X */
  color: #000 !important;

  text-decoration: none !important;
  background: transparent;
  border-radius: 8px;
}

/* Basurero (SVG de Elementor) usando mask para que tome color negro */
.resumen-form td.product-remove a.remove::before{
  content: "";
  width: 18px;
  height: 18px;
  display: block;

  background-color: currentColor;

  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20d%3D%22M32%20464a48%2048%200%200%200%2048%2048h288a48%2048%200%200%200%2048-48V128H32zm272-256a16%2016%200%200%201%2032%200v224a16%2016%200%200%201-32%200zm-96%200a16%2016%200%200%201%2032%200v224a16%2016%200%200%201-32%200zm-96%200a16%2016%200%200%201%2032%200v224a16%2016%200%200%201-32%200zM432%2032H312l-9.4-18.7A24%2024%200%200%200%20281.1%200H166.8a23.72%2023.72%200%200%200-21.4%2013.3L136%2032H16A16%2016%200%200%200%200%2048v32a16%2016%200%200%200%2016%2016h416a16%2016%200%200%200%2016-16V48a16%2016%200%200%200-16-16z%22/%3E%3C/svg%3E") no-repeat center / contain;

  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20d%3D%22M32%20464a48%2048%200%200%200%2048%2048h288a48%2048%200%200%200%2048-48V128H32zm272-256a16%2016%200%200%201%2032%200v224a16%2016%200%200%201-32%200zm-96%200a16%2016%200%200%201%2032%200v224a16%2016%200%200%201-32%200zm-96%200a16%2016%200%200%201%2032%200v224a16%2016%200%200%201-32%200zM432%2032H312l-9.4-18.7A24%2024%200%200%200%20281.1%200H166.8a23.72%2023.72%200%200%200-21.4%2013.3L136%2032H16A16%2016%200%200%200%200%2048v32a16%2016%200%200%200%2016%2016h416a16%2016%200%200%200%2016-16V48a16%2016%200%200%200-16-16z%22/%3E%3C/svg%3E") no-repeat center / contain;
}

/* (Opcional) hover: si querés que siga negro, dejalo así.
   Si querés color en hover, cambiamos el color acá. */
.resumen-form td.product-remove a.remove:hover,
.resumen-form td.product-remove a.remove:focus{
  color: #000 !important;
}



/* Centrar el basurero dentro de la celda (vertical + horizontal) */
.resumen-form td.product-remove{
  vertical-align: middle !important;
  text-align: center !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Asegura que el link sea “cuadro” y quede centrado */
.resumen-form td.product-remove a.remove{
  margin: 0 auto !important;
  align-self: center;
}

/* Si aún queda 1px arriba por el render del mask, ajustamos fino */
.resumen-form td.product-remove a.remove::before{
  transform: translateY(6px);
}













/* MENSAJE WOOCOMMERCE - tipografía + botón Ver cotización */
.woocommerce-notices-wrapper .woocommerce-message{
  font-family: "Mozilla Headline", sans-serif !important;
}

.woocommerce-notices-wrapper .woocommerce-message .button.wc-forward{
  font-family: "Mozilla Headline", sans-serif !important;
  background: #0D4BA8 !important;
  color: #fff !important;
  border-radius: 20px !important;
  padding: 10px 18px !important;
  border: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
  transition: all 0.3s ease;
}

.woocommerce-notices-wrapper .woocommerce-message .button.wc-forward:hover,
.woocommerce-notices-wrapper .woocommerce-message .button.wc-forward:focus{
  background: #94C912 !important;
  color: #fff !important;
  text-decoration: none !important;
}


















/* =========================================
   COTIZADOR - estado vacío real
   Actúa SOLO cuando JS agrega .cart-empty
========================================= */

.quote-wrap.cart-empty > .e-con-inner{
  justify-content: center !important;
}

.quote-wrap.cart-empty > .e-con-inner > .quote-cart-col{
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
}

.quote-wrap.cart-empty > .e-con-inner > .quote-checkout-col{
  display: none !important;
}

.quote-wrap.cart-empty .seccion-cotizacion-vacia > .e-con-inner{
  max-width: 700px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.quote-wrap.cart-empty .seccion-cotizacion-vacia p,
.quote-wrap.cart-empty .seccion-cotizacion-vacia .elementor-button-wrapper{
  text-align: center !important;
}