/* ==========================================================================
   ETCHIZURI — rediseño monocromo
   Blanco, negro y aire. El fucsia queda solo en precios y estados;
   el verde lima desaparece de los fondos.

   Todo se aplica por encima de Astra, Elementor y el CSS adicional.
   Se revierte desactivando el plugin: no toca el theme ni los widgets.
   ========================================================================== */

:root{
	--etz-tinta:        #0E0E0E;   /* negro de textos y bandas */
	--etz-tinta-2:      #1C1C1C;
	--etz-gris-90:      #3D3D3D;
	--etz-gris-60:      #6E6E6E;   /* 4.8:1 sobre blanco */
	--etz-gris-30:      #B4B4B4;
	--etz-linea:        #E6E6E6;
	--etz-humo:         #F6F6F6;
	--etz-papel:        #FFFFFF;
	/* Acento: el fucsia de marca oscurecido hasta pasar AA sobre blanco (4.95:1).
	   El #FF4F81 original daba 2.9:1. */
	--etz-acento:       #D6215F;
	--etz-acento-osc:   #A8154A;
	--etz-radio:        2px;
	--etz-trans:        .25s cubic-bezier(.4,0,.2,1);
}

/* ==========================================================================
   1. BASE
   ========================================================================== */

body{
	color: var(--etz-tinta);
	-webkit-font-smoothing: antialiased;
}
::selection{ background: var(--etz-tinta); color: #fff; }

h1,h2,h3,h4,h5,h6,
.elementor-heading-title{ color: var(--etz-tinta); }

/* Los textos largos de las paginas ocupaban los 1440px enteros: linea de
   200 caracteres, imposible de leer. Se acotan a medida editorial. */
.ast-page-builder-template .entry-content > p,
.ast-page-builder-template .entry-content > ul,
.ast-page-builder-template .entry-content > ol,
.ast-page-builder-template .entry-content > h2,
.ast-page-builder-template .entry-content > h3,
.elementor-widget-text-editor .elementor-widget-container > p,
.elementor-widget-text-editor .elementor-widget-container > ul,
.elementor-widget-text-editor .elementor-widget-container > h2,
.elementor-widget-text-editor .elementor-widget-container > h3{
	max-width: 74ch;
	margin-inline: auto;   /* el bloque acotado va centrado, no pegado a la izquierda */
}
.elementor-widget-text-editor{ line-height: 1.75; }

/* Dos bajadas que quedaban corridas a la izquierda.

   Son la de "Condiciones de acceso" (Como comprar) y la de "Nuestra historia"
   (Nosotros). Las dos tienen un ancho propio de 765 px puesto en el widget
   (`elementor-widget__width-initial`) dentro de una columna de 1140, y Elementor
   las deja pegadas a la izquierda: el titulo de arriba sale centrado y el
   parrafo no, con el espacio muerto a la derecha.

   Se centra el bloque. Y de paso la de Como comprar pasa de `justify` a
   `center`, para que las dos bajadas se comporten igual — justificar en una
   columna angosta abre huecos entre palabras.

   OJO: van por id de Elementor. Si alguna de las dos paginas se rehace desde
   cero, el id cambia y hay que actualizarlo aca. Se miden con:
       python scripts/_mapa.py "https://etchizuridistribuciones.com/nosotros/" */
.elementor-element-38461742,
.elementor-element-3213d0d7{
	margin-left: auto !important;
	margin-right: auto !important;
}
.elementor-element-38461742,
.elementor-element-38461742 p,
.elementor-element-38461742 .elementor-widget-container{
	text-align: center;
}

/* ==========================================================================
   2. BARRA SUPERIOR — gris sobre gris (3.6:1) -> negra
   ========================================================================== */

.ast-above-header-bar,
.ast-above-header-bar .ast-builder-grid-row{
	background-color: var(--etz-tinta) !important;
	border-bottom: none !important;
}
.ast-above-header-bar,
.ast-above-header-bar h4,
.ast-above-header-bar p,
.ast-above-header-bar a{
	color: #fff !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	letter-spacing: .06em;
	text-transform: uppercase;
	margin: 0;
}

/* ==========================================================================
   3. HEADER
   ========================================================================== */

.ast-primary-header-bar{
	border-bottom: 1px solid var(--etz-linea) !important;
	box-shadow: none !important;
}
.ast-builder-menu-1 .menu-item > .menu-link{
	color: var(--etz-gris-90) !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	letter-spacing: .14em !important;
	text-transform: uppercase;
	position: relative;
	transition: color var(--etz-trans);
}
/* Al pasar el mouse cambia el color, sin linea. La linea queda como marca
   de "estas aca" y va en el color de acento. */
.ast-builder-menu-1 .menu-item.current-menu-item > .menu-link::after,
.ast-builder-menu-1 .menu-item.current-menu-ancestor > .menu-link::after{
	content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
	background: var(--etz-acento);
}
.ast-builder-menu-1 .menu-item:hover > .menu-link,
.ast-builder-menu-1 .menu-item:focus-within > .menu-link{
	color: var(--etz-acento) !important;
}
.ast-builder-menu-1 .menu-item.current-menu-item > .menu-link,
.ast-builder-menu-1 .menu-item.current-menu-ancestor > .menu-link{
	color: var(--etz-tinta) !important;
}
[data-section="section-header-mobile-trigger"] .ast-button-wrap .ast-mobile-menu-trigger-minimal,
[data-section="section-header-mobile-trigger"] .ast-button-wrap .mobile-menu-wrap .mobile-menu{
	color: var(--etz-tinta) !important;
}
[data-section="section-header-mobile-trigger"] .ast-button-wrap .mobile-menu-toggle-icon .ast-mobile-svg{
	fill: var(--etz-tinta) !important;
}
/* El trigger del menu mobile es un <button>: no debe heredar el boton negro */
.ast-mobile-menu-trigger-minimal,
.ast-button-wrap button.menu-toggle,
button.menu-toggle{
	background: transparent !important;
	border: none !important;
	padding: 0 !important;
	color: var(--etz-tinta) !important;
}
.ast-header-break-point .ast-mobile-header-content{ border-top: 1px solid var(--etz-linea); }
.ast-site-header-cart .ast-cart-menu-wrap .count,
.ast-header-woo-cart .ast-addon-cart-wrap .ast-cart-menu-wrap .ast-woo-header-cart-info-wrap{
	background: var(--etz-tinta) !important; color:#fff !important;
}

/* ==========================================================================
   4. BANDA DEL BUSCADOR (contenedor 4e838ff, ya negro)
   ========================================================================== */

.elementor-element-4e838ff{
	background-color: var(--etz-tinta) !important;
	padding-block: 22px !important;
	border-bottom: 1px solid rgba(255,255,255,.08);
}
.elementor-element-4e838ff .search-field,
.elementor-element-4e838ff input[type="search"]{
	background: transparent !important;
	border: 1px solid rgba(255,255,255,.3) !important;
	border-right: none !important;
	border-radius: 0 !important;
	color: #fff !important;
	height: 46px !important;
	padding-left: 16px !important;
	font-size: 14px !important;
}
.elementor-element-4e838ff .search-field::placeholder{ color: rgba(255,255,255,.55) !important; }
.elementor-element-4e838ff .search-field:focus{ border-color:#fff !important; }
.elementor-element-4e838ff button[type="submit"],
.elementor-element-4e838ff .wp-block-search__button{
	background:#fff !important; color: var(--etz-tinta) !important;
	border:1px solid #fff !important; border-radius:0 !important;
	height:46px !important; padding-inline: 26px !important;
	font-size:12px !important; font-weight:700 !important;
	letter-spacing:.12em; text-transform:uppercase;
	transition: background var(--etz-trans), color var(--etz-trans);
}
.elementor-element-4e838ff button[type="submit"]:hover{
	background: var(--etz-acento) !important; border-color: var(--etz-acento) !important; color:#fff !important;
}

/* ==========================================================================
   5. HERO — la foto se queda, se le da profundidad
   ========================================================================== */

.elementor-element-0b06bfb{
	background: var(--etz-tinta) !important;
	padding: 0 !important;
	overflow: hidden;
}
.elementor-element-3aa41c5{ padding: 0 !important; margin: 0 !important; }
.elementor-element-3aa41c5 img{
	display:block; width:100%; height:auto;
	filter: grayscale(.35) contrast(1.08) brightness(.92);
	transform: scale(1.001);
	transition: filter 1.2s ease, transform 8s ease;
}
.elementor-element-0b06bfb:hover .elementor-element-3aa41c5 img{
	filter: grayscale(0) contrast(1.05) brightness(1);
	transform: scale(1.04);
}

/* ==========================================================================
   6. BANDAS DE TITULAR — la negra se queda, la lima se pasa a negra
   ========================================================================== */

.elementor-element-263efb8,
.elementor-element-884258e{
	background-color: var(--etz-tinta) !important;
	border-top: 1px solid rgba(255,255,255,.1);
	border-bottom: 1px solid rgba(255,255,255,.1);
	padding-block: 42px !important;
}
/* El patron de "d" venia al 46% de opacidad y peleaba con el titular.
   Baja a textura de fondo; el overlay es el ::before de Elementor. */
.elementor-element-263efb8::before,
.elementor-element-884258e::before{ opacity: .13 !important; }
.elementor-element-263efb8 .elementor-heading-title,
.elementor-element-884258e .elementor-heading-title,
.elementor-element-263efb8 h1, .elementor-element-263efb8 h2,
.elementor-element-884258e h1, .elementor-element-884258e h2{
	color: #fff !important;
	font-size: clamp(18px, 2vw, 26px) !important;
	font-weight: 700 !important;
	letter-spacing: .16em !important;
	text-transform: uppercase;
	line-height: 1.4 !important;
}

/* ==========================================================================
   7. TITULOS DE SECCION — DESTACADOS / ULTIMOS INGRESOS / SUGERIDOS
   ========================================================================== */

.elementor-element-75921e9 .elementor-heading-title,
.elementor-element-53e4c0d .elementor-heading-title,
.elementor-element-643fbab > .e-con-inner > .elementor-widget-heading .elementor-heading-title,
.elementor-element-310925a .elementor-heading-title{
	color: var(--etz-tinta) !important;
	font-size: clamp(22px, 2.4vw, 30px) !important;
	font-weight: 700 !important;
	letter-spacing: .18em !important;
	text-transform: uppercase;
	position: relative;
	padding-bottom: 18px;
}
.elementor-element-75921e9 .elementor-heading-title::after,
.elementor-element-53e4c0d .elementor-heading-title::after,
.elementor-element-310925a .elementor-heading-title::after{
	content:""; position:absolute; bottom:0; left:50%; transform:translateX(-50%);
	width:44px; height:2px; background: var(--etz-acento);
}

/* Los headings de las secciones claras venian en blanco (heredado del diseño
   con fondo fucsia): sobre gris claro no se leian. */
.elementor-element-ce90508 .elementor-heading-title,
.elementor-element-643fbab .elementor-heading-title,
.elementor-element-75921e9 .elementor-heading-title,
.elementor-element-b1a7f01 .elementor-heading-title,
.elementor-element-e41deb7 .elementor-heading-title{
	color: var(--etz-tinta) !important;
}

/* "VER TODOS" deja de ser un boton lima y pasa a enlace con linea.
   Va acotado a la home: sin el .home, el selector generico pegaba en TODOS
   los botones de Elementor del sitio (elementor-size-sm es el tamano por
   defecto) y rompia los CTA de las paginas internas. */
.home .elementor-widget-button .elementor-button.elementor-size-sm,
.elementor-element-78116e2 .elementor-button{
	background: transparent !important;
	border: 0 !important;
	border-width: 0 !important;
	border-style: none !important;
	color: var(--etz-tinta) !important;
	padding: 6px 0 !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: .16em !important;
	text-transform: uppercase;
	box-shadow: inset 0 -1px 0 0 var(--etz-tinta) !important;
	border-radius: 0 !important;
	transition: box-shadow var(--etz-trans), color var(--etz-trans);
}
.home .elementor-widget-button .elementor-button.elementor-size-sm:hover,
.elementor-element-78116e2 .elementor-button:hover{
	color: var(--etz-acento) !important;
	box-shadow: inset 0 -1px 0 0 var(--etz-acento) !important;
	background: transparent !important;
}
.home .elementor-widget-button .elementor-button.elementor-size-sm .elementor-button-text::after{
	content:" →";
}

/* ==========================================================================
   8. SECCION "ULTIMOS INGRESOS" — fondo fucsia -> negro con foto en B/N
   ========================================================================== */

.elementor-element-68e7d21{
	position: relative;
	background-image: none !important;
	background-color: var(--etz-tinta) !important;
	isolation: isolate;
}
.elementor-element-68e7d21::before{
	content:""; position:absolute; inset:0; z-index:-1;
	background-image: url("https://etchizuridistribuciones.com/wp-content/uploads/2025/08/MANUAL-DE-MARCA-ED-12.jpg");
	background-size: cover; background-position: 50% 50%;
	filter: grayscale(1) contrast(1.15) brightness(.42);
}
/* La tarjeta flotante: borde fucsia -> tarjeta limpia */
.elementor-element-25bf384{
	--border-color: transparent !important;
	background: var(--etz-papel) !important;
	border: none !important;
	border-radius: var(--etz-radio) !important;
	box-shadow: 0 24px 60px rgba(0,0,0,.28) !important;
	padding: 44px 40px !important;
}

/* ==========================================================================
   9. SECCION "SUGERIDOS" — degradado radial rosa -> plano
   ========================================================================== */

.elementor-element-ce90508{
	background-image: none !important;
	background-color: var(--etz-humo) !important;
	border-top: 1px solid var(--etz-linea);
	border-bottom: 1px solid var(--etz-linea);
}

/* ==========================================================================
   10. TARJETAS DE PRODUCTO — el cambio que mas se nota
   ========================================================================== */

ul.products li.product,
.elementor-wc-products ul.products li.product{
	background: var(--etz-papel) !important;
	border: 1px solid var(--etz-linea) !important;
	border-radius: var(--etz-radio) !important;
	padding: 0 0 20px !important;
	overflow: hidden;
	display: flex !important;
	flex-direction: column;
	transition: border-color var(--etz-trans), box-shadow var(--etz-trans), transform var(--etz-trans);
}
ul.products li.product:hover,
.elementor-wc-products ul.products li.product:hover{
	border-color: var(--etz-gris-30) !important;
	box-shadow: 0 14px 34px rgba(0,0,0,.09) !important;
	transform: translateY(-3px);
}
/* La foto: ocupa el ancho completo de la tarjeta sobre un fondo neutro */
ul.products li.product .astra-shop-thumbnail-wrap{
	background: var(--etz-humo);
	margin: 0 0 20px !important;
	padding: 24px !important;
	overflow: hidden;
	border-bottom: 1px solid var(--etz-linea);
}
ul.products li.product .astra-shop-thumbnail-wrap img,
.elementor-wc-products ul.products li.product .astra-shop-thumbnail-wrap img{
	margin: 0 !important;
	padding: 0 !important;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	width: 100%;
	mix-blend-mode: multiply;
	transition: transform .5s cubic-bezier(.4,0,.2,1);
}
ul.products li.product:hover .astra-shop-thumbnail-wrap img{ transform: scale(1.07); }

/* El markup de Astra es titulo > categoria > precio > boton.
   Con flex se reordena para que la categoria vaya arriba, como sobretitulo. */
ul.products li.product .astra-shop-summary-wrap{
	display: flex !important;
	flex-direction: column;
	flex: 1;
	padding: 0 18px !important;
}
/* Elementor tambien escribe "order" en estos hijos: hay que ganarle. */
ul.products li.product .ast-woo-product-category{ order: 1 !important; }
ul.products li.product .ast-loop-product__link,
ul.products li.product .woocommerce-loop-product__title{ order: 2 !important; }
ul.products li.product .price{ order: 3 !important; }
ul.products li.product .woocommerce-loop-product__buttons,
ul.products li.product .button,
ul.products li.product .added_to_cart{ order: 4 !important; }
ul.products li.product .screen-reader-text{ order: 5 !important; }

ul.products li.product .ast-woo-product-category,
.elementor-wc-products ul.products li.product .ast-woo-product-category{
	color: var(--etz-gris-60) !important;
	font-size: 10px !important;
	font-weight: 600 !important;
	letter-spacing: .16em !important;
	text-transform: uppercase !important;
	margin-bottom: 7px !important;
	padding: 0 !important;
}
ul.products li.product .woocommerce-loop-product__title,
.elementor-wc-products ul.products li.product .woocommerce-loop-product__title{
	color: var(--etz-tinta) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.45 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	padding: 0 !important;
	margin-bottom: 12px !important;
	min-height: 2.9em;
}
ul.products li.product .price,
.elementor-wc-products ul.products li.product .price,
.elementor-wc-products ul.products li.product .price ins,
.elementor-wc-products ul.products li.product .price ins .amount{
	color: var(--etz-tinta) !important;
	font-size: 20px !important;
	font-weight: 700 !important;
	letter-spacing: -.01em;
	padding: 0 !important;
	margin-bottom: 16px !important;
	margin-top: auto !important;
}
ul.products li.product .price del,
ul.products li.product .price del .amount,
.elementor-wc-products ul.products li.product .price del,
.elementor-wc-products ul.products li.product .price del .amount{
	color: var(--etz-gris-60) !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	opacity: .8;
}
/* Boton: negro plano, ancho completo dentro de la tarjeta */
ul.products li.product .button,
.elementor-wc-products ul.products li.product .button,
ul.products li.product .add_to_cart_button{
	background: var(--etz-tinta) !important;
	border: 1px solid var(--etz-tinta) !important;
	color: #fff !important;
	border-radius: 0 !important;
	margin: 0 !important;
	padding: 13px 10px !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: .14em !important;
	text-transform: uppercase !important;
	line-height: 1.3 !important;
	transition: background var(--etz-trans), border-color var(--etz-trans);
}
ul.products li.product .button:hover,
.elementor-wc-products ul.products li.product .button:hover{
	background: var(--etz-acento) !important;
	border-color: var(--etz-acento) !important;
	color:#fff !important;
}
ul.products li.product .added_to_cart{
	display:block; margin: 10px 0 0; font-size: 11px; letter-spacing:.1em;
	text-transform: uppercase; color: var(--etz-acento) !important;
}
ul.products li.product .onsale, .woocommerce-js span.onsale{
	background: var(--etz-acento) !important; color:#fff !important;
	border-radius: 0 !important; font-size: 10px !important;
	letter-spacing: .12em; text-transform: uppercase; font-weight:700 !important;
	padding: 6px 10px !important; min-height:0 !important; line-height:1 !important;
}

/* ==========================================================================
   11. FICHA DE PRODUCTO
   ========================================================================== */

.woocommerce-js div.product .product_title,
.single-product .entry-title{
	font-size: clamp(24px, 3vw, 34px) !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	letter-spacing: -.01em;
	margin-bottom: 14px !important;
}
.woocommerce-js div.product p.price,
.woocommerce-js div.product span.price{
	color: var(--etz-tinta) !important;
	font-size: 30px !important;
	font-weight: 700 !important;
	letter-spacing: -.02em;
	margin-bottom: 18px !important;
}
.woocommerce-js div.product .woocommerce-product-details__short-description{
	color: var(--etz-gris-90);
	max-width: 60ch;
	line-height: 1.7;
}
.woocommerce-js div.product form.cart .button,
.woocommerce-js div.product .single_add_to_cart_button{
	background: var(--etz-tinta) !important;
	border: 1px solid var(--etz-tinta) !important;
	color:#fff !important;
	border-radius: 0 !important;
	padding: 16px 40px !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: .16em !important;
	text-transform: uppercase !important;
	transition: background var(--etz-trans);
}
.woocommerce-js div.product form.cart .button:hover{
	background: var(--etz-acento) !important; border-color: var(--etz-acento) !important;
}
.woocommerce-js div.product form.cart .quantity input.qty{
	border: 1px solid var(--etz-linea) !important;
	border-radius: 0 !important;
	height: 51px !important;
	text-align: center;
}
.woocommerce-js div.product .product_meta{
	border-top: 1px solid var(--etz-linea);
	padding-top: 18px; margin-top: 26px;
	font-size: 12px; color: var(--etz-gris-60);
	letter-spacing: .04em;
}
.woocommerce-js div.product .product_meta a{ color: var(--etz-tinta); }
.woocommerce-js div.product .product_meta a:hover{ color: var(--etz-acento); }
.woocommerce-js div.product .woocommerce-product-gallery{
	background: var(--etz-humo);
	border: 1px solid var(--etz-linea);
	padding: 30px;
}
/* La descripcion cruzaba los 1440px de ancho */
.woocommerce-js div.product .woocommerce-tabs .panel,
.woocommerce-js div.product #tab-description{
	max-width: 78ch;
	margin-inline: auto;
	line-height: 1.8;
	color: var(--etz-gris-90);
}
.woocommerce-js div.product .woocommerce-tabs ul.tabs{ text-align: center; }
.woocommerce-js div.product .woocommerce-tabs ul.tabs{
	border-bottom: 1px solid var(--etz-linea) !important;
	margin-bottom: 32px !important;
}
.woocommerce-js div.product .woocommerce-tabs ul.tabs li a{
	font-size: 12px !important; font-weight:700 !important;
	letter-spacing: .14em; text-transform: uppercase;
	color: var(--etz-tinta) !important;
}
.woocommerce-js div.product .stock{ color: #3E6B12 !important; font-size:13px; }
.woocommerce-js div.product .out-of-stock{ color: var(--etz-acento) !important; }

/* ==========================================================================
   12. TIENDA Y ARCHIVOS
   ========================================================================== */

.woocommerce-products-header__title, .ast-archive-title, .page-title{
	font-size: clamp(26px, 3vw, 38px) !important;
	font-weight: 700 !important;
	letter-spacing: -.01em;
}
.woocommerce-result-count{
	font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
	color: var(--etz-gris-60);
}
.woocommerce-ordering select, .orderby{
	border: 1px solid var(--etz-linea) !important; border-radius: 0 !important;
	font-size: 13px; padding: 10px 14px;
}
/* Sidebar de marcas y categorias */
.ast-woo-sidebar-widget .wp-block-heading,
.ast-woo-sidebar-widget h3,
.widget_block > h3{
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: .18em !important;
	text-transform: uppercase !important;
	color: var(--etz-tinta) !important;
	padding-bottom: 12px !important;
	border-bottom: 1px solid var(--etz-tinta);
	margin-bottom: 14px !important;
}
.widget-area .widget-title, .sidebar-main .widget-title{
	font-size: 12px !important; font-weight: 700 !important;
	letter-spacing: .18em !important; text-transform: uppercase;
	color: var(--etz-tinta) !important;
	padding-bottom: 12px; border-bottom: 1px solid var(--etz-tinta);
	margin-bottom: 16px !important;
}
.widget_product_categories ul li, .widget_brand_thumbnails ul li{
	border-bottom: 1px solid var(--etz-linea);
	padding: 9px 0 !important; margin: 0 !important;
}
.widget_product_categories ul li a, .widget_brand_thumbnails ul li a{
	color: var(--etz-gris-90) !important; font-size: 14px !important;
	transition: color var(--etz-trans), padding-left var(--etz-trans);
	display: inline-block;
}
.widget_product_categories ul li a:hover, .widget_brand_thumbnails ul li a:hover,
.ast-woo-sidebar-widget li a:hover,
.widget_block li a:hover{
	color: var(--etz-acento) !important; padding-left: 5px;
}
.widget_brand_thumbnails li.current-cat a,
.widget_product_categories li.current-cat a{
	border-left: 2px solid var(--etz-acento) !important;
	color: var(--etz-tinta) !important; font-weight: 700 !important;
}
/* Paginacion */
.woocommerce-pagination ul.page-numbers li a, .woocommerce-pagination ul.page-numbers li span{
	border: 1px solid var(--etz-linea) !important; border-radius: 0 !important;
	min-width: 42px; line-height: 40px; padding: 0 !important;
	font-size: 13px; font-weight: 600;
}
.woocommerce-pagination ul.page-numbers li span.current{
	background: var(--etz-tinta) !important; color: #fff !important;
	border-color: var(--etz-tinta) !important;
}

/* ==========================================================================
   13. BOTONES GENERALES
   ========================================================================== */

.ast-button, .ast-custom-button,
input#submit, input[type="submit"], input[type="button"], input[type="reset"],
.wp-block-button .wp-block-button__link,
.woocommerce-js a.button, .woocommerce-js button.button,
.woocommerce-js input.button, .ast-continue-shopping,
.wc-block-components-button{
	background: var(--etz-tinta) !important;
	border: 1px solid var(--etz-tinta) !important;
	color: #fff !important;
	border-radius: 0 !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: .14em !important;
	text-transform: uppercase !important;
	padding: 14px 30px !important;
	transition: background var(--etz-trans), border-color var(--etz-trans);
}
.ast-button:hover,
input[type="submit"]:hover,
.woocommerce-js a.button:hover, .woocommerce-js button.button:hover,
.ast-continue-shopping:hover{
	background: var(--etz-acento) !important;
	border-color: var(--etz-acento) !important;
	color:#fff !important;
}

/* ==========================================================================
   14. FORMULARIOS
   ========================================================================== */

input[type="text"], input[type="number"], input[type="email"], input[type="url"],
input[type="password"], input[type="search"], input[type="tel"], textarea, select{
	border: 1px solid var(--etz-linea) !important;
	border-radius: 0 !important;
	padding: 12px 14px !important;
	font-size: 14px !important;
	transition: border-color var(--etz-trans);
}
input[type="text"]:focus, input[type="number"]:focus, input[type="email"]:focus,
input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus,
input[type="tel"]:focus, textarea:focus, select:focus{
	border-color: var(--etz-tinta) !important;
	outline: none !important;
	box-shadow: 0 0 0 3px rgba(14,14,14,.06) !important;
}
/* Buscador propio: el input era pill y el boton cuadrado. Se unifica en recto. */
.buho-buscador-input-group,
.buho-buscador-input-group input,
.buho-buscador-boton, .buho-buscador-submit,
.buho-buscador form, .buho-buscador button{
	border-radius: 0 !important;
}
.buho-buscador-input-group{ border: 1px solid var(--etz-linea) !important; }
.buho-buscador-input-group:focus-within{
	border-color: var(--etz-tinta) !important;
	box-shadow: 0 0 0 3px rgba(14,14,14,.06) !important;
}
.buho-buscador-icono{ color: var(--etz-gris-60) !important; }
.buho-buscador-boton, .buho-buscador-submit,
.buho-buscador button[type="submit"]{
	background: var(--etz-tinta) !important; color:#fff !important;
	font-size: 12px !important; font-weight: 700 !important;
	letter-spacing: .14em; text-transform: uppercase;
}
.buho-buscador-boton:hover, .buho-buscador button[type="submit"]:hover{
	background: var(--etz-acento) !important;
}

/* ==========================================================================
   15. RESEÑAS
   ========================================================================== */

.elementor-element-e41deb7{
	background: var(--etz-papel);
	border-top: 1px solid var(--etz-linea);
	padding-block: 70px !important;
}
[class*="tp-widget-review"], .tp-widget-wrapper .tp-widget-review{
	border: 1px solid var(--etz-linea) !important;
	background: var(--etz-papel) !important;
	border-radius: var(--etz-radio) !important;
	box-shadow: none !important;
}

/* ==========================================================================
   16. FOOTER
   ========================================================================== */

.site-primary-footer-wrap, .site-below-footer-wrap{
	background-color: var(--etz-tinta) !important;
	border-top: 1px solid rgba(255,255,255,.1);
}
.site-primary-footer-wrap{ padding-block: 54px !important; }
.site-footer .footer-widget-area .menu-link,
.site-footer a{
	color: rgba(255,255,255,.72) !important;
	font-size: 12px !important;
	letter-spacing: .1em;
	text-transform: uppercase;
	transition: color var(--etz-trans);
}
.site-footer .footer-widget-area .menu-link:hover, .site-footer a:hover{ color:#fff !important; }
.site-footer, .site-footer p{ color: rgba(255,255,255,.55) !important; font-size: 12px !important; }
.ast-scroll-top-icon{
	background: var(--etz-tinta) !important; color:#fff !important;
	border-radius: 0 !important;
}

/* ==========================================================================
   17. ENLACES DE CONTENIDO
   ========================================================================== */

.entry-content a:not(.button):not(.elementor-button):not(.wp-block-button__link),
.elementor-widget-text-editor a{
	color: var(--etz-tinta);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	text-decoration-color: var(--etz-acento);
	transition: color var(--etz-trans);
}
.entry-content a:not(.button):not(.elementor-button):hover,
.elementor-widget-text-editor a:hover{ color: var(--etz-acento); }

/* ==========================================================================
   18. APARICION AL SCROLL (la clase la pone colores.js)
   ========================================================================== */

.etz-reveal{
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .7s cubic-bezier(.4,0,.2,1), transform .7s cubic-bezier(.4,0,.2,1);
	will-change: opacity, transform;
}
.etz-reveal.etz-visible{ opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce){
	.etz-reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
	*{ animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ==========================================================================
   19. MOBILE
   ========================================================================== */

@media (max-width: 921px){
	.ast-above-header-bar, .ast-above-header-bar h4{ font-size: 11px !important; }
	.elementor-element-263efb8, .elementor-element-884258e{ padding-block: 30px !important; }
	.elementor-element-25bf384{ padding: 28px 20px !important; }
	ul.products li.product .woocommerce-loop-product__title{ font-size: 13px !important; }
	ul.products li.product .price{ font-size: 17px !important; }
}

/* ==========================================================================
   20. ESTADOS DE LOS BOTONES — donde vive el fucsia
   ==========================================================================
   En reposo todo es negro. El color de marca aparece al interactuar:
   fucsia al pasar el mouse, fucsia oscuro al presionar. Esto no cambia
   nada del estado en reposo, asi que tienda, ficha y categoria se ven
   exactamente igual que antes hasta que el visitante toca algo.
   ========================================================================== */

.ast-button, .ast-custom-button, .button,
input#submit, input[type="submit"], input[type="button"], input[type="reset"],
.wp-block-button .wp-block-button__link,
.woocommerce-js a.button, .woocommerce-js button.button, .woocommerce-js input.button,
.ast-continue-shopping, .wc-block-components-button,
ul.products li.product .button,
.elementor-wc-products ul.products li.product .button,
.woocommerce-js div.product form.cart .button,
.woocommerce-js div.product .single_add_to_cart_button,
.elementor-element-4e838ff button[type="submit"],
.buho-buscador-boton, .buho-buscador-submit,
.buho-buscador button[type="submit"]{
	transition: background-color .18s ease, border-color .18s ease,
	            color .18s ease, transform .12s ease, box-shadow .18s ease;
}

/* Mouse encima: el fucsia de marca */
.ast-button:hover, .ast-custom-button:hover, .button:hover,
input#submit:hover, input[type="submit"]:hover, input[type="button"]:hover,
.wp-block-button .wp-block-button__link:hover,
.woocommerce-js a.button:hover, .woocommerce-js button.button:hover,
.woocommerce-js input.button:hover,
.ast-continue-shopping:hover, .wc-block-components-button:hover,
ul.products li.product .button:hover,
.elementor-wc-products ul.products li.product .button:hover,
.woocommerce-js div.product form.cart .button:hover,
.woocommerce-js div.product .single_add_to_cart_button:hover,
.elementor-element-4e838ff button[type="submit"]:hover,
.buho-buscador-boton:hover, .buho-buscador button[type="submit"]:hover{
	background-color: var(--etz-acento) !important;
	border-color: var(--etz-acento) !important;
	color: #fff !important;
	box-shadow: 0 4px 14px rgba(214,33,95,.28) !important;
	transform: translateY(-1px);
}

/* Presionado: el fucsia se hunde y se oscurece */
.ast-button:active, .ast-custom-button:active, .button:active,
input#submit:active, input[type="submit"]:active, input[type="button"]:active,
.wp-block-button .wp-block-button__link:active,
.woocommerce-js a.button:active, .woocommerce-js button.button:active,
.woocommerce-js input.button:active,
.ast-continue-shopping:active, .wc-block-components-button:active,
ul.products li.product .button:active,
.elementor-wc-products ul.products li.product .button:active,
.woocommerce-js div.product form.cart .button:active,
.woocommerce-js div.product .single_add_to_cart_button:active,
.elementor-element-4e838ff button[type="submit"]:active,
.buho-buscador-boton:active, .buho-buscador button[type="submit"]:active{
	background-color: var(--etz-acento-osc) !important;
	border-color: var(--etz-acento-osc) !important;
	color: #fff !important;
	box-shadow: none !important;
	transform: translateY(1px);
}

/* Foco de teclado: mismo idioma, sin depender del mouse */
.ast-button:focus-visible, .button:focus-visible,
input[type="submit"]:focus-visible,
.woocommerce-js a.button:focus-visible, .woocommerce-js button.button:focus-visible,
ul.products li.product .button:focus-visible,
.woocommerce-js div.product .single_add_to_cart_button:focus-visible,
.elementor-element-4e838ff button[type="submit"]:focus-visible,
.elementor-button:focus-visible,
.buho-buscador button[type="submit"]:focus-visible{
	outline: 2px solid var(--etz-acento) !important;
	outline-offset: 2px !important;
}

/* "VER TODOS" y los enlaces con linea: la linea se pinta de fucsia */
.elementor-widget-button .elementor-button.elementor-size-sm:active,
.elementor-element-78116e2 .elementor-button:active{
	color: var(--etz-acento-osc) !important;
	box-shadow: inset 0 -2px 0 0 var(--etz-acento-osc) !important;
}

/* En pantallas tactiles no hay hover: el :hover se queda pegado despues de
   tocar. Ahi vale solo el estado presionado. */
@media (hover: none){
	ul.products li.product .button:hover,
	.woocommerce-js a.button:hover, .woocommerce-js button.button:hover,
	.button:hover{
		background-color: var(--etz-tinta) !important;
		border-color: var(--etz-tinta) !important;
		box-shadow: none !important;
		transform: none;
	}
	ul.products li.product .button:active,
	.woocommerce-js a.button:active, .button:active{
		background-color: var(--etz-acento) !important;
		border-color: var(--etz-acento) !important;
	}
}

@media (prefers-reduced-motion: reduce){
	.button, .ast-button, input[type="submit"], ul.products li.product .button{
		transform: none !important;
	}
}

/* ==========================================================================
   21. ESCUDO — que el rediseño no se meta con otros plugins
   ==========================================================================
   Los selectores genericos de arriba (button, .button, input[type=submit],
   los campos de formulario) alcanzan a cualquier plugin del sitio, no solo a
   Astra y WooCommerce. Aca se les devuelve el control a los que tienen
   interfaz propia en el frontend.

   Si un navegador viejo no entiende :not() con descendientes, invalida la
   regla entera y el elemento se queda con el estilo de su plugin: falla del
   lado seguro, que es el que queremos.
   ========================================================================== */

/* Joinchat (el boton flotante de WhatsApp), Instagram Feed y Trustindex
   traen su propio diseño y su propia marca. No se tocan. */
.joinchat button,
.joinchat input,
.joinchat a,
#sb_instagram button,
#sb_instagram input,
#sb_instagram a,
.sbi_lightbox button,
.sb-instagram-feed button,
[class*="tp-widget"] button,
[class*="tp-widget"] a,
[class*="trustindex"] button,
[class*="trustindex"] a{
	background-color: revert !important;
	border: revert !important;
	color: revert !important;
	border-radius: revert !important;
	padding: revert !important;
	font-size: revert !important;
	letter-spacing: revert !important;
	text-transform: none !important;
	box-shadow: revert !important;
	transform: none !important;
}
.joinchat input,
#sb_instagram input,
.joinchat textarea,
#sb_instagram select{
	border-radius: revert !important;
}

/* Un boton de bloque al que le eligieron color en el editor conserva el suyo.
   WordPress marca esos casos con .has-background / has-*-background-color. */
.wp-block-button .wp-block-button__link.has-background,
.wp-block-button .wp-block-button__link[class*="-background-color"],
.wp-block-button.is-style-outline .wp-block-button__link{
	background-color: revert !important;
	border-color: revert !important;
}
.wp-block-button .wp-block-button__link[class*="has-"][class*="-color"]{
	color: revert !important;
}

/* Los campos de formulario de terceros conservan su forma */
.joinchat input[type="text"],
#sb_instagram input[type="text"],
[class*="tp-widget"] input,
[class*="trustindex"] input{
	border: revert !important;
	border-radius: revert !important;
	padding: revert !important;
}

/* ==========================================================================
   22. BUSCADOR DE LA TIENDA — sacarle el borde de adentro
   ==========================================================================
   El grupo lleva su propio borde, y la regla generica de campos de texto de
   la seccion 14 le ponia OTRO borde al input de adentro. Quedaban dos marcos
   encajados, con una linea suelta antes del icono y un corte antes del boton.
   ========================================================================== */

.buho-buscador-input-group{
	display: flex !important;
	align-items: stretch !important;
	overflow: hidden;
}
.buho-buscador-input-group input,
.buho-buscador-input-group input[type="text"],
.buho-buscador-input-group input[type="search"]{
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	outline: none !important;
	background: transparent !important;
	align-self: stretch !important;
}
.buho-buscador-input-group input:focus{
	border: 0 !important;
	box-shadow: none !important;
}
/* El boton toma la altura completa del grupo, sin sobresalir */
.buho-buscador-input-group button,
.buho-buscador-boton,
.buho-buscador-submit{
	align-self: stretch !important;
	height: auto !important;
	margin: 0 !important;
	flex: none;
	border: 0 !important;
	transform: none !important;
}
/* El icono de la lupa no lleva separador propio */
.buho-buscador-icono{
	border: 0 !important;
	background: transparent !important;
	align-self: center !important;
}

/* ==========================================================================
   23. BLOG — el archivo de Astra pasa a grilla de tarjetas

   Astra ya trae las clases de grilla (ast-grid-3 ast-blog-layout-5-grid) pero
   cada articulo llega con ast-full-width y termina apilado a lo ancho. Aca se
   arma la grilla de verdad y se le da a cada post la misma tarjeta que usan
   las paginas nuevas. Los posts sin imagen destacada (.ast-no-thumb) reciben
   una banda de acento en lugar de la foto, asi la grilla no queda despareja.

   OJO con los selectores: .archive y .search NO se pueden usar aca. La tienda
   de WooCommerce tambien es un archive (body.archive.post-type-archive-product
   y body.archive.tax-product_cat) y el buscador del sitio devuelve productos,
   asi que esas dos clases le pintaban el fondo rosa a la tienda. Los archivos
   de POSTS son .blog, .category y .tag: esos tres son los unicos que van.
   ========================================================================== */

/* El gris azulado lo pone Astra en el body (ast-separate-container), no en
   el contenedor: pintarlo aca es lo unico que llega a los bordes. */
body.blog,
body.category,
body.tag{ background: #FFF5F8; }

.blog #primary,
.category #primary,
.tag #primary{
	background: transparent;
	padding-top: 48px;
	padding-bottom: 56px;
}

.blog #primary .ast-row,
.category #primary .ast-row,
.tag #primary .ast-row{
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: start;   /* sin esto las tarjetas se estiran y quedan huecas */
	gap: 28px;
	margin: 0;
}

.blog #primary .ast-article-post,
.category #primary .ast-article-post,
.tag #primary .ast-article-post{
	width: 100% !important;
	max-width: none !important;
	flex: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

.blog #primary .ast-article-inner,
.category #primary .ast-article-inner,
.tag #primary .ast-article-inner{
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--etz-papel);
	border: 1px solid #FCE0EB;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: none;
	transition: transform var(--etz-trans), box-shadow var(--etz-trans);
}
.blog #primary .ast-article-inner:hover,
.category #primary .ast-article-inner:hover,
.tag #primary .ast-article-inner:hover{
	transform: translateY(-4px);
	box-shadow: 0 12px 28px rgba(14,14,14,.10);
}

/* La foto: misma proporcion en todas, sin deformarse */
.blog #primary .ast-blog-featured-section,
.category #primary .ast-blog-featured-section,
.tag #primary .ast-blog-featured-section{
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	flex: none !important;
}
/* Cuadrada y con `contain`, no 16/10 con `cover`.

   Las portadas son las mismas placas que van a Instagram: cuadradas, 1254x1254,
   con el titulo arriba y los bullets abajo. Recortarlas a 16/10 se comia 235 px
   arriba y 235 abajo — el 37% — y la placa perdia el titulo o los bullets.

   Y `contain` en vez de `cover` por el caso de Tintura ADS, que vino en
   1536x1024: forzada a 1/1 con `cover` perdia 256 px de cada lado y el titulo
   quedaba en "TURA ADS". Con `contain` la placa entra entera siempre, sea
   cuadrada o no, y lo que sobra lo cierra el fondo blanco de la tarjeta.

   El costo de `contain` es que una foto panoramica quedaria con dos bandas
   blancas. Para placas —que es lo que se publica aca— es el intercambio
   correcto: ninguna pierde texto. */
.blog #primary .ast-blog-featured-section img,
.category #primary .ast-blog-featured-section img,
.tag #primary .ast-blog-featured-section img{
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	border-radius: 0;
	background: #fff;
}

/* Sin imagen destacada: banda de acento en vez de un hueco */
.blog #primary .ast-no-thumb .ast-blog-featured-section,
.category #primary .ast-no-thumb .ast-blog-featured-section,
.tag #primary .ast-no-thumb .ast-blog-featured-section{
	height: 10px;
	background: linear-gradient(135deg, var(--etz-acento-osc), var(--etz-acento));
}

.blog #primary .post-content,
.category #primary .post-content,
.tag #primary .post-content{
	width: 100% !important;
	max-width: none !important;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	padding: 26px 24px 24px !important;
	margin: 0 !important;
}

/* Categorias arriba, chicas y en acento */
.blog #primary .ast-taxonomy-container,
.category #primary .ast-taxonomy-container,
.tag #primary .ast-taxonomy-container{
	display: block;
	margin-bottom: 10px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.blog #primary .ast-taxonomy-container a,
.category #primary .ast-taxonomy-container a,
.tag #primary .ast-taxonomy-container a{
	color: var(--etz-acento);
	text-decoration: none;
}
.blog #primary .ast-taxonomy-container a:hover,
.category #primary .ast-taxonomy-container a:hover,
.tag #primary .ast-taxonomy-container a:hover{
	color: var(--etz-acento-osc);
	text-decoration: underline;
}

.blog #primary .entry-title,
.category #primary .entry-title,
.tag #primary .entry-title{
	margin: 0 0 10px;
	font-size: 19px;
	line-height: 1.35;
	font-weight: 700;
}
.blog #primary .entry-title a,
.category #primary .entry-title a,
.tag #primary .entry-title a{
	color: var(--etz-tinta);
	text-decoration: none;
	box-shadow: none;
}
.blog #primary .entry-title a:hover,
.category #primary .entry-title a:hover,
.tag #primary .entry-title a:hover{ color: var(--etz-acento); }

.blog #primary .entry-meta,
.category #primary .entry-meta,
.tag #primary .entry-meta{
	margin: 0 0 12px;
	font-size: 12px;
	color: var(--etz-gris-60);
}
.blog #primary .entry-meta a,
.category #primary .entry-meta a,
.tag #primary .entry-meta a{
	color: var(--etz-gris-60);
	text-decoration: none;
	box-shadow: none;
}

.blog #primary .entry-content,
.blog #primary .ast-excerpt-container,
.category #primary .entry-content,
.category #primary .ast-excerpt-container,
.tag #primary .entry-content,
.tag #primary .ast-excerpt-container{
	font-size: 14px;
	line-height: 1.6;
	color: var(--etz-gris-60);
	margin: 0 0 18px;
}

/* Astra deja un .entry-content vacio al final de cada tarjeta: con el margen
   heredado abria un hueco de 36px abajo del extracto. */
.blog #primary .entry-content.clear:empty,
.category #primary .entry-content.clear:empty,
.tag #primary .entry-content.clear:empty{ display: none; }

.blog #primary .post-content > *:last-child,
.category #primary .post-content > *:last-child,
.tag #primary .post-content > *:last-child{ margin-bottom: 0; }

/* El "leer mas" queda abajo de todo, alineado entre tarjetas */
.blog #primary .ast-blog-read-more-wrap,
.blog #primary .read-more,
.category #primary .ast-blog-read-more-wrap,
.category #primary .read-more,
.tag #primary .ast-blog-read-more-wrap,
.tag #primary .read-more{
	margin-top: auto;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.blog #primary .read-more a,
.category #primary .read-more a,
.tag #primary .read-more a{
	color: var(--etz-tinta);
	text-decoration: none;
	box-shadow: inset 0 -1px 0 0 var(--etz-tinta);
	transition: color var(--etz-trans), box-shadow var(--etz-trans);
}
.blog #primary .read-more a:hover,
.category #primary .read-more a:hover,
.tag #primary .read-more a:hover{
	color: var(--etz-acento);
	box-shadow: inset 0 -1px 0 0 var(--etz-acento);
}

/* El primer post ya no va a doble ancho.

   Con foto panoramica tenia sentido: daba un punto de entrada en vez de tres
   tarjetas iguales. Con placas cuadradas no cierra. A doble ancho la imagen se
   recortaba a 16/7 y perdia el 56% del alto — mas de la mitad de la placa — y
   encima iba rotando: cada vez que se publica algo, al que queda primero le
   toca el recorte.

   Las cinco parejas se leen mejor, y la jerarquia ya la trae la placa, que
   tiene su propio titulo grande.

   Va anulado y no borrado a proposito: LiteSpeed cachea la hoja, y si queda
   servida una version anterior junto con esta, la regla vieja volveria a
   aplicar. Anularla cuesta dos lineas y cierra ese caso. */
.blog #primary .ast-row > .ast-article-post:first-child,
.blog #primary .ast-row > .ast-article-post:first-child:not(.ast-no-thumb){
	grid-column: auto !important;
}
.blog #primary .ast-row > .ast-article-post:first-child img,
.blog #primary .ast-row > .ast-article-post:first-child:not(.ast-no-thumb) img{
	aspect-ratio: 1 / 1 !important;
	width: 100% !important;
	object-fit: contain !important;
}

@media (max-width: 921px){
	.blog #primary .ast-row,
	.category #primary .ast-row,
	.tag #primary .ast-row{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}

@media (max-width: 544px){
	.blog #primary,
	.category #primary,
	.tag #primary{ padding-top: 28px; padding-bottom: 32px; }
	.blog #primary .ast-row,
	.category #primary .ast-row,
	.tag #primary .ast-row{ grid-template-columns: 1fr; gap: 18px; }
	.blog #primary .post-content,
	.category #primary .post-content,
	.tag #primary .post-content{ padding: 22px 20px 20px !important; }
}