/* Double Text — Button injection styles */

.elementor-button.pe-dt-active {
  overflow: hidden;
}

/* Text wrapper */
.pe-dt-text-wrapper {
  position: relative;
  display: block;
  overflow: hidden;
  line-height: 1.2;
}

.pe-dt-text {
  display: block;
  will-change: transform;
  transition: transform var(--pe-dt-hover-duration, 0.3s) ease;
}

.pe-dt-text--clone {
  position: absolute;
  inset-inline-start: 0;
  inset-inline-end: 0;
  top: 100%;
}

.elementor-button.pe-dt-active:hover .pe-dt-text--primary {
  transform: translateY(-100%);
}

.elementor-button.pe-dt-active:hover .pe-dt-text--clone {
  transform: translateY(-100%);
}

/* Icon wrapper */
.pe-dt-icon-active {
  position: relative;
  overflow: hidden;
}

.pe-dt-icon-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.pe-dt-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--pe-dt-hover-duration, 0.3s) ease;
}

.pe-dt-icon--clone {
  position: absolute;
  top: 100%;
  left: 0;
}

.elementor-button.pe-dt-active:hover .pe-dt-icon--primary {
  transform: translateY(-100%);
}

.elementor-button.pe-dt-active:hover .pe-dt-icon--clone {
  transform: translateY(-100%);
}

.pe-dt-icon svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
  transition: fill var(--pe-dt-hover-duration, 0.3s) ease;
}

/* 2026-10-06 (CUMBRE · Alture .button-secondary) — opciones nuevas, solo con su clase (apagadas por defecto: nada cambia).
   «Deslizar con desenfoque»: el texto sube (outCubic) mientras se apaga y se desenfoca 5 px; la copia entra enfocándose. La
   caja del texto conserva la altura de línea del botón y no recorta el desenfoque. */
.pe-dt-style-blur .pe-dt-text-wrapper { overflow: visible; line-height: inherit; }
.pe-dt-style-blur .pe-dt-text { transition: transform var(--pe-dt-hover-duration, .3s) cubic-bezier(.215,.61,.355,1),
  opacity var(--pe-dt-hover-duration, .3s) cubic-bezier(.25,.1,.25,1), filter var(--pe-dt-hover-duration, .3s) cubic-bezier(.25,.1,.25,1); }
.pe-dt-style-blur .pe-dt-text--clone { opacity: 0; filter: blur(5px); }
.pe-dt-style-blur .elementor-button.pe-dt-active:hover .pe-dt-text--primary { opacity: 0; filter: blur(5px); }
.pe-dt-style-blur .elementor-button.pe-dt-active:hover .pe-dt-text--clone { opacity: 1; filter: blur(0px); }
/* «Punto que late»: punto 4 px después del texto (su espacio va como relleno del contenido: está desde el HTML, el botón no
   cambia de ancho al cargar) y un aro de 2rem que se expande y se apaga en 500 ms al pasar el mouse. */
.pe-dt-dot-yes .elementor-button-content-wrapper { position: relative; padding-inline-end: calc(var(--pe-dt-dot-gap, 24px) + 4px); }
.pe-dt-dot-yes .elementor-button-content-wrapper::after { content: ''; position: absolute; z-index: 1; right: 0; top: 50%; width: 4px; height: 4px; margin-top: -2px;
  border-radius: 50%; background: var(--pe-dt-dot, #f3350c); }
.pe-dt-dot-yes .elementor-button-content-wrapper::before { content: ''; position: absolute; z-index: 0; right: calc(2px - 1rem); top: 50%; width: 2rem; height: 2rem; margin-top: -1rem;
  border-radius: 50%; background: var(--pe-dt-dot, #f3350c); transform: scale(0); opacity: 1; pointer-events: none; }
.pe-dt-dot-yes .elementor-button:hover .elementor-button-content-wrapper::before { animation: pe-dt-ring 500ms cubic-bezier(.215,.61,.355,1) forwards; }
@keyframes pe-dt-ring { from { transform: scale(0); opacity: 1; } to { transform: scale(1); opacity: 0; } }
/* Con cualquiera de las opciones nuevas el botón se alinea arriba: sin el hueco del descendente del renglón que lo envuelve
   (Elementor lo deja inline-block; sumaba ~3 px debajo). */
.pe-dt-style-blur .elementor-button, .pe-dt-dot-yes .elementor-button { vertical-align: top; }

/* Reducir movimiento (2026-10-07): es una respuesta corta al pasar el mouse, iniciada por el visitante,
   así que se mantiene igual que siempre. Sin esto la regla de Elementor
   `@media (prefers-reduced-motion:reduce){html *{transition-duration:0s!important;transition-delay:0s!important}}`
   la anula y el efecto parece no funcionar. Mismas reglas y valores que arriba, con !important. */
@media (prefers-reduced-motion: reduce) {
  .pe-dt-text { transition: transform var(--pe-dt-hover-duration, 0.3s) ease !important; }
  .pe-dt-icon { transition: transform var(--pe-dt-hover-duration, 0.3s) ease !important; }
  .pe-dt-icon svg { transition: fill var(--pe-dt-hover-duration, 0.3s) ease !important; }
  .pe-dt-style-blur .pe-dt-text { transition: transform var(--pe-dt-hover-duration, .3s) cubic-bezier(.215,.61,.355,1),
  opacity var(--pe-dt-hover-duration, .3s) cubic-bezier(.25,.1,.25,1), filter var(--pe-dt-hover-duration, .3s) cubic-bezier(.25,.1,.25,1) !important; }
}