/* =========================================================================
   JLM Comunicación — Capa de "refresco visual" (aditiva y reversible)
   Se carga DESPUÉS de todo el CSS de Elementor. No cambia estructura ni
   textos: solo pule tipografía, interacciones, foco y aparición.
   Para desactivar: quitar el <link> de refresh.css en las páginas.
   ========================================================================= */

/* -- Suavizados globales -- */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
:where(h1, h2, h3, .elementor-heading-title) { text-wrap: balance; }
[id] { scroll-margin-top: 90px; }

/* -- Tipografía un punto más moderna (ajuste fino, sin cambiar tamaños) -- */
.elementor-heading-title { letter-spacing: -0.015em; }

/* -- Botones: transición e "elevación" al pasar (sin cambiar forma ni color) -- */
.elementor-button,
.elementor-cta__button {
  transition: transform .2s cubic-bezier(.2,.7,.2,1),
              box-shadow .2s cubic-bezier(.2,.7,.2,1),
              background-color .2s ease, filter .2s ease;
}
.elementor-button:hover,
.elementor-cta__button:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(18,20,28,.18);
}

/* -- Enlaces: cambio de color suave -- */
a { transition: color .16s ease, opacity .16s ease, background-color .16s ease; }

/* -- Imágenes (logos de clientes, fotos): zoom sutil al pasar -- */
.elementor-widget-image img,
.elementor-widget-image a { transition: transform .35s cubic-bezier(.2,.7,.2,1), filter .35s ease; will-change: transform; }
.elementor-widget-image:hover img { transform: scale(1.04); }

/* -- Accesibilidad: foco visible claro (neutro, no depende de la paleta) -- */
a:focus-visible,
button:focus-visible,
.elementor-button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(20,20,25,.75);
  outline-offset: 2px;
  border-radius: 3px;
}

/* -- Formulario: foco de campos más moderno -- */
.elementor-field-group input:focus,
.elementor-field-group textarea:focus,
.elementor-field-group select:focus {
  box-shadow: 0 0 0 3px rgba(20,20,25,.12);
  transition: box-shadow .15s ease, border-color .15s ease;
}

/* -- Cabecera: sombra sutil cuando se hace scroll (si es fija) -- */
[data-elementor-type="header"] { transition: box-shadow .25s ease, background-color .25s ease; }
body.jlm-scrolled [data-elementor-type="header"] { box-shadow: 0 6px 24px rgba(18,20,28,.10); }

/* -- Aparición elegante de secciones al bajar (SOLO con JS activo) -- */
.js .jlm-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.js .jlm-reveal.jlm-in { opacity: 1; transform: none; }

/* -- Botón "volver arriba" (aparece al bajar) -- */
.jlm-top {
  position: fixed; right: clamp(14px, 3vw, 28px); bottom: clamp(14px, 3vw, 28px);
  width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(20,20,25,.86); color: #fff; display: grid; place-items: center;
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, background-color .2s ease;
  z-index: 9999; box-shadow: 0 8px 24px rgba(0,0,0,.22);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.jlm-top.show { opacity: 1; transform: none; pointer-events: auto; }
.jlm-top:hover { background: rgba(20,20,25,1); transform: translateY(-2px); }
.jlm-top svg { width: 20px; height: 20px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .jlm-reveal { opacity: 1 !important; transform: none !important; }
  .elementor-button:hover, .elementor-cta__button:hover, .elementor-widget-image:hover img { transform: none; }
}