/* Base global de MisifusArt: solo lo que los Ajustes del sitio de Elementor no cubren.
   Colores, tipografías, botones y formularios se definen en el kit de Elementor (globales). */

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* El kit pone el color de fondo (papel); aquí solo el grano */
body {
  background-image: var(--grano);
  background-size: 220px;
}

/* Fraunces con los ejes de la v3: suave y sin letras «wonky» en los títulos */
h1, h2, h3, h4,
.elementor-heading-title {
  font-variation-settings: "SOFT" 50, "WONK" 0;
  font-optical-sizing: auto;
  text-wrap: balance;
}

a {
  text-decoration-thickness: 1.5px;
  text-underline-offset: .22em;
}

/* Enlaces dentro de texto corrido: siempre subrayados. Elementor quita el subrayado a todos
   los enlaces (.elementor a) y, en el mismo color que el texto, no se distinguirían (WCAG 1.4.1). */
.elementor-widget-text-editor a,
.elementor-widget-theme-post-content a,
.woocommerce-product-details__short-description a {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-decoration-color: color-mix(in srgb, currentColor 55%, transparent);
}
.elementor-widget-text-editor a:hover,
.elementor-widget-theme-post-content a:hover,
.woocommerce-product-details__short-description a:hover {
  text-decoration-color: var(--acento-obra);
}

::selection {
  background: var(--menta);
  color: var(--tinta);
}

/* Saltar al contenido: oculto hasta que recibe el foco */
.mf-saltar {
  position: absolute; left: 12px; top: -80px; z-index: 100000;
  padding: .6em 1em; border-radius: 6px;
  background: var(--tinta); color: var(--papel);
  font-weight: 700; text-decoration: none;
}
/* body a… gana a los colores de enlace del kit de Elementor (.elementor-kit-N a, a:hover) */
body a.mf-saltar,
body a.mf-saltar:hover,
body a.mf-saltar:focus { color: var(--papel); }
.mf-saltar:focus { top: 12px; }

/* Foco siempre visible (WCAG 2.4.7) */
:focus-visible {
  outline: 3px solid var(--indigo);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Objetivo táctil mínimo de 48 px en botones */
.elementor-button,
button,
input[type="submit"],
input[type="button"] {
  min-height: 48px;
}
.elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}