/**
 * Alquima - Correcciones de accesibilidad (WCAG 2.1 AA)
 * Cambios minimos, no destructivos. Cada bloque indica el criterio WCAG.
 * -------------------------------------------------------------------------- */

/* 2.4.7 Foco visible - el tema/Elementor elimina el outline; lo reponemos
   con doble anillo (oscuro + claro) visible sobre fondos claros y dorados. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[role="link"]:focus-visible,
[role="tab"]:focus-visible,
[role="menuitem"]:focus-visible,
.elementor-button:focus-visible,
.elementor-menu-toggle:focus-visible,
.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible,
.alquima-consultar-boton:focus-visible,
.select2-selection:focus-visible,
.trp-language-switcher *:focus-visible {
	outline: 3px solid #10233b !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 3px #ffffff, 0 0 0 6px #10233b !important;
	border-radius: 2px;
}

/* Fallback sin :focus-visible */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
.elementor-button:focus,
.elementor-menu-toggle:focus,
.alquima-consultar-boton:focus {
	outline: 3px solid #10233b;
	outline-offset: 2px;
}
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
.elementor-button:focus:not(:focus-visible),
.elementor-menu-toggle:focus:not(:focus-visible),
.alquima-consultar-boton:focus:not(:focus-visible) {
	outline: none;
	box-shadow: none;
}

/* 2.4.1 Skip link visible al recibir foco */
.skip-link.screen-reader-text:focus,
a.skip-link:focus {
	position: fixed !important;
	top: 8px !important;
	left: 8px !important;
	width: auto !important;
	height: auto !important;
	padding: 12px 20px !important;
	clip: auto !important;
	clip-path: none !important;
	background: #ffffff !important;
	color: #10233b !important;
	font-size: 1rem !important;
	font-weight: 700 !important;
	z-index: 100000 !important;
	border: 2px solid #10233b !important;
	border-radius: 3px;
	text-decoration: underline;
}

/* 1.4.3 Contraste - BOTONES RELLENOS dorados: bg dorado claro (#9E8540 /
   #CBB26A) + texto blanco daba 1.9-3.6:1. Se oscurece el relleno a #7d6a2e
   (blanco = 5.3:1) manteniendo la identidad dorada. */
.elementor-button,
.elementor-button:link,
.elementor-button:visited,
.woocommerce a.button.button-primary,
.woocommerce button.button.alt,
.woocommerce .single_add_to_cart_button,
.woocommerce #respond input#submit,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.alquima-consultar-boton,
.woolentor-quick-view-btn,
form.woocommerce-form button[type="submit"],
.elementor-field-type-submit .elementor-button {
	background-color: #7d6a2e !important;
	color: #ffffff !important;
	border-color: #7d6a2e !important;
}
.elementor-button:hover,
.elementor-button:focus,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce #respond input#submit:hover,
.alquima-consultar-boton:hover,
.alquima-consultar-boton:focus,
form.woocommerce-form button[type="submit"]:hover {
	background-color: #5f5122 !important;
	color: #ffffff !important;
	border-color: #5f5122 !important;
}

/* 1.4.3 Contraste - ENLACES-BOTON sin relleno del loop de tienda
   ("Leer mas"): eran texto dorado #9E8540 ~2.8:1. Se oscurece el texto y se
   mantiene el estilo sin caja. */
.woocommerce ul.products a.button,
.woocommerce ul.products a.add_to_cart_button,
.woocommerce ul.products a.product_type_simple,
.woocommerce ul.products a.product_type_external,
.woocommerce ul.products a.product_type_variable {
	background-color: transparent !important;
	color: #6b5a26 !important;
	border: 0 !important;
	padding: 0 !important;
	text-decoration: none !important;
	font-weight: 600;
}
.woocommerce ul.products a.button:hover,
.woocommerce ul.products a.button:focus {
	color: #4a3d19 !important;
	text-decoration: underline !important;
}

/* 1.4.3 Contraste - etiquetas de formulario Elementor (dorado claro < 4.5:1) */
.elementor-field-label,
.elementor-field-subgroup label,
.elementor-form .elementor-field-group > label {
	color: #333333 !important;
}

/* 3.3.2 - Indicacion visible de campo obligatorio (el asterisco y la leyenda
   los inserta accessibility.js). El asterisco no depende solo del color. */
.elementor-field-label .a11y-req {
	color: #a11212;
	font-weight: 700;
}
.a11y-req-legend {
	margin: 0 0 14px;
	font-size: 0.9em;
	color: #333333;
}
.a11y-req-legend::before {
	content: "*";
	color: #a11212;
	font-weight: 700;
	margin-right: 4px;
}
.elementor-mark-required .elementor-field-label::after,
.elementor-field-required .elementor-field-label::after {
	color: #a11212;
}

/* 1.3.1 / 2.4.6 - El titulo del producto (H1) estaba oculto por la opcion
   "Ocultar titulo" de Elementor (que apunta a h1.entry-title). Se vuelve a
   mostrar el H1 real del producto para que exista un encabezado visible. */
.single-product h1.product_title,
.single-product .wl-single-product-title h1,
.elementor-799 .elementor-element-5258fe45 h1.product_title {
	display: block !important;
	visibility: visible !important;
	font-size: 24px;
	line-height: 1.3;
	margin: 0 0 12px;
	color: #000000 !important;
	font-weight: 400;
}

/* 1.4.3 Contraste - bloque "Programa kit digital" del footer (blanco sobre gris) */
.elementor-element-39d15227 {
	background-color: #6e6e6e !important;
}

/* 1.4.1 Uso del color - los enlaces se distinguen del texto por color
   (contraste >= 3:1) y, como senal adicional NO cromatica, se subrayan y
   cambian a un dorado mas oscuro al pasar el raton o recibir el foco.
   Sin subrayado en reposo (decision de diseno). */
.elementor-widget-text-editor a:hover,
.elementor-widget-text-editor a:focus,
.elementor-widget-theme-post-content a:hover,
.elementor-widget-theme-post-content a:focus,
.woocommerce-product-details__short-description a:hover,
.woocommerce-product-details__short-description a:focus,
.wc-tab a:hover,
.wc-tab a:focus,
.e-con .elementor-widget-text-editor p a:hover,
.e-con .elementor-widget-text-editor p a:focus,
.entry-content a:hover,
.entry-content a:focus,
footer .elementor-widget-text-editor a:hover,
footer .elementor-widget-text-editor a:focus,
.woocommerce-product-meta a:hover,
.woocommerce-product-meta a:focus,
.product_meta a:hover,
.product_meta a:focus,
.posted_in a:hover,
.posted_in a:focus,
.tagged_as a:hover,
.tagged_as a:focus,
.wl-single-product-description a:hover,
.wl-single-product-description a:focus,
.woocommerce-Tabs-panel a:hover,
.woocommerce-Tabs-panel a:focus,
.eael-toc-list a:hover,
.eael-toc-list a:focus,
.elementor-nav-menu a:hover,
.elementor-nav-menu a:focus,
.elementor-nav-menu__container a:hover,
.elementor-nav-menu__container a:focus {
	text-decoration: underline;
}
/* Los botones-enlace nunca se subrayan, tampoco al pasar el raton */
.elementor-widget-text-editor a.elementor-button:hover,
.elementor-widget-text-editor a.button:hover,
.elementor-button:hover,
.elementor-button:focus,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woolentor-quick-view-btn:hover {
	text-decoration: none;
}

/* 1.4.3 Contraste - enlaces dorados (color "accent" #9E8540 ~3:1) en meta de
   producto y contenido: se oscurece a #6b5a26 (~5.9:1 sobre blanco). Mismo
   tono que el global "accent" usado en los menus (cabecera y pie), para que
   todos los enlaces del sitio compartan un unico color. */
.woocommerce-product-meta a,
.product_meta a,
.posted_in a,
.tagged_as a,
.wl-single-product-description a,
.eael-toc-list a,
.entry-content a,
:not(.elementor-widget-n-carousel):not(.e-n-carousel) > .elementor-widget-container > .elementor-widget-text-editor a,
.elementor-widget-text-editor:not([class*="n-carousel"]) a:not(.elementor-button):not(.button) {
	color: #6b5a26 !important;
}
/* Estado hover/foco de esos mismos enlaces - mismo tono "Dorado hover"
   (#4a3d19) que usan los menus de cabecera y pie, para que el cambio de
   color al pasar el raton sea coherente en todo el sitio. */
.woocommerce-product-meta a:hover,
.woocommerce-product-meta a:focus,
.product_meta a:hover,
.product_meta a:focus,
.posted_in a:hover,
.posted_in a:focus,
.tagged_as a:hover,
.tagged_as a:focus,
.wl-single-product-description a:hover,
.wl-single-product-description a:focus,
.eael-toc-list a:hover,
.eael-toc-list a:focus,
.entry-content a:hover,
.entry-content a:focus,
:not(.elementor-widget-n-carousel):not(.e-n-carousel) > .elementor-widget-container > .elementor-widget-text-editor a:hover,
:not(.elementor-widget-n-carousel):not(.e-n-carousel) > .elementor-widget-container > .elementor-widget-text-editor a:focus,
.elementor-widget-text-editor:not([class*="n-carousel"]) a:not(.elementor-button):not(.button):hover,
.elementor-widget-text-editor:not([class*="n-carousel"]) a:not(.elementor-button):not(.button):focus {
	color: #4a3d19 !important;
}
.elementor-widget-n-carousel .elementor-widget-text-editor a,
.e-n-carousel .elementor-widget-text-editor a {
	color: #ffffff !important;
}
.elementor-widget-text-editor a.elementor-button,
.elementor-widget-text-editor a.button,
footer .elementor-widget-text-editor a.elementor-button {
	text-decoration: none;
}

/* 1.4.3 Contraste - texto blanco del slider hero sobre foto sin veladura.
   Se anade una veladura oscura (55%) sobre la imagen del slideshow y sombra
   al texto; la foto sigue siendo perfectamente visible. */
.elementor-widget-n-carousel .swiper-slide .elementor-background-slideshow::after,
.elementor-widget-n-carousel .swiper-slide .elementor-background-slideshow__slide__image::after,
.e-n-carousel .swiper-slide .elementor-background-slideshow::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	pointer-events: none;
}
.elementor-widget-n-carousel .swiper-slide .elementor-widget-text-editor,
.elementor-widget-n-carousel .swiper-slide h1,
.elementor-widget-n-carousel .swiper-slide h2,
.e-n-carousel .swiper-slide .elementor-widget-text-editor {
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* 2.1.1 Region desplazable - foco visible del contenedor (tabindex via JS) */
.eael-data-table-wrap:focus-visible,
.eael-data-table-container:focus-visible,
[data-a11y-scroll]:focus-visible {
	outline: 3px solid #10233b !important;
	outline-offset: -3px !important;
}

/* 2.3.3 / 2.2.2 Movimiento - respetar prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
	.swiper-wrapper { transition-duration: 0.001ms !important; }
}

/* 2.1.1 / 2.4.3 - El menu desplegable colapsado (max-height:0;overflow:hidden)
   deja sus enlaces accesibles por Tab de forma invisible. Se ocultan de verdad
   cuando el menu esta cerrado y se restauran al abrir. */
.elementor-nav-menu--toggle .elementor-menu-toggle:not(.elementor-active) + .elementor-nav-menu__container {
	visibility: hidden !important;
}
.elementor-nav-menu--toggle .elementor-menu-toggle.elementor-active + .elementor-nav-menu__container {
	visibility: visible !important;
}

/* 2.4.3 - Modal "Vista rapida" de WooLentor: encima de todo y foco atrapado */
#woolentor-quickview-modal { z-index: 999999; }
#woolentor-quickview-modal .woolentor-quickview-modal-close:focus-visible {
	outline: 3px solid #10233b !important;
	outline-offset: 2px !important;
}

/* 2.1.1 / 2.4.3 - En movil el selector de idioma flotante (TranslatePress,
   position:fixed top-right, z-index 9999999) TAPABA el boton de menu
   hamburguesa haciendolo inoperable con puntero. Se reubica abajo-derecha. */
@media (max-width: 1024px) {
	#trp-floater-ls.trp-top-right,
	#trp-floater-ls.trp-floater-ls-flags.trp-top-right,
	.trp-language-switcher-container.trp-floater-ls.trp-top-right {
		top: auto !important;
		bottom: 16px !important;
		right: 16px !important;
	}
	#trp-floater-ls-language-list {
		top: auto !important;
		bottom: 100% !important;
	}
}

/* Buena practica - area objetivo minima en movil (no altera el layout) */
@media (max-width: 1024px) {
	.elementor-menu-toggle { min-width: 44px; min-height: 44px; }
	.trp-language-switcher a,
	.trp-ls-shortcode-current-language {
		min-height: 44px; display: inline-flex; align-items: center;
	}
	.woocommerce-pagination a,
	.woocommerce-pagination span {
		min-width: 40px; min-height: 40px;
		display: inline-flex; align-items: center; justify-content: center;
	}
}