.elementor-16707 .elementor-element.elementor-element-1256906{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:100px 100px;--row-gap:100px;--column-gap:100px;--flex-wrap:wrap;--align-content:center;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:10%;--padding-bottom:10%;--padding-left:0%;--padding-right:0%;}.elementor-16707 .elementor-element.elementor-element-ea18671 .elementor-button{font-family:"Poppins", Sans-serif;font-size:15px;border-radius:4px 4px 4px 4px;}.elementor-16707 .elementor-element.elementor-element-e6ff42c{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-16707 .elementor-element.elementor-element-c610c27{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-16707 .elementor-element.elementor-element-230bfc4{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-16707 .elementor-element.elementor-element-781c432 .elementor-button{background-color:#02010100;font-size:15px;font-weight:600;text-transform:none;font-style:normal;text-decoration:none;fill:#FAE800;color:#FAE800;padding:20px 30px 20px 30px;}.elementor-16707 .elementor-element.elementor-element-781c432 .elementor-button:hover, .elementor-16707 .elementor-element.elementor-element-781c432 .elementor-button:focus{background-color:#02010100;}.elementor-16707 .elementor-element.elementor-element-248c2af{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-16707 .elementor-element.elementor-element-a44c5be{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-16707 .elementor-element.elementor-element-ed4284a{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-16707 .elementor-element.elementor-element-329143d .elementor-button{font-family:"Poppins", Sans-serif;font-size:18px;font-weight:500;text-transform:none;font-style:normal;text-decoration:none;border-style:solid;border-width:1px 1px 1px 1px;border-color:#B0FCFF;border-radius:10px 10px 10px 10px;padding:15px 30px 15px 30px;}body.elementor-page-16707:not(.elementor-motion-effects-element-type-background), body.elementor-page-16707 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(180deg, #080808 0%, #111111 100%);}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-14aed47 *//* Botón Resplandor Expandido - Aislado y funcional en Elementor */
.botonresplandorexpandido {
  position: relative;
  width: 10em;
  height: 2em;
  text-align: center;
  font-family: poppins, sans-serif;
  font-size: 17px;
  font-weight: 300;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
  background-color: rgba(3, 3, 3, 0.5);
  border: none;
  transition: color 0.2s linear,
              box-shadow 0.3s linear,
              background-color 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Hover / Focus */
.botonresplandorexpandido:hover,
.botonresplandorexpandido:focus {
  box-shadow: 0 0 110px #fff;
  background-color: rgba(255, 255, 255, 0.4);
  color: #111;
  font-weight: 500;
}

/* Líneas superior e inferior */
.botonresplandorexpandido::before,
.botonresplandorexpandido::after {
  content: '';
  position: absolute;
  pointer-events: none;
  left: 50%;
  width: 0%;
  height: 2px;
  background-color: #fff;
  transition: width 250ms cubic-bezier(0.25, 0.8, 0.25, 1),
              left 250ms cubic-bezier(0.25, 0.8, 0.25, 1);
}

.botonresplandorexpandido::before {
  top: -2px;
}

.botonresplandorexpandido::after {
  bottom: -2px;
}

/* Expandir líneas en hover / focus */
.botonresplandorexpandido:hover::before,
.botonresplandorexpandido:focus::before,
.botonresplandorexpandido:hover::after,
.botonresplandorexpandido:focus::after {
  width: 100%;
  left: 0%;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-6d0ed99 *//* Botón principal */
.monocromaticomoderno {
  line-height: 1;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background-color: #000;
  color: #fff;
  border-radius: 10rem;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  padding-left: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-color 0.3s, color 0.3s;
}

/* Contenedor del icono */
.monocromaticomoderno__icon-wrapper {
  flex-shrink: 0;
  width: 25px;
  height: 25px;
  position: relative;
  color: #000;
  background-color: #fff;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* Hover del botón */
.monocromaticomoderno:hover {
  background-color: #fff;
  color: black;
}

/* Hover del contenedor del icono */
.monocromaticomoderno:hover .monocromaticomoderno__icon-wrapper {
  color: #fff;
  background-color: #000;
}

/* Icono secundario (para animación) */
.monocromaticomoderno__icon-svg--copy {
  position: absolute;
  transform: translate(-150%, 150%);
}

/* Animación iconos al hacer hover */
.monocromaticomoderno:hover .monocromaticomoderno__icon-svg:first-child {
  transition: transform 0.3s ease-in-out;
  transform: translate(150%, -150%);
}

.monocromaticomoderno:hover .monocromaticomoderno__icon-svg--copy {
  transition: transform 0.3s ease-in-out 0.1s;
  transform: translate(0);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-ea18671 *//* Botón estilo Gumroad adaptado para Elementor */
.elementor-button.botongumroad,
.botongumroad .elementor-button,
.elementor-button.botongumroad.elementor-button {
  --bg: #000;
  --hover-bg: #ff90e8;
  --hover-text: #000;

  color: #fff;
  border: 1px solid var(--bg);
  border-radius: 4px;
  padding: 0.8em 2em;
  background: var(--bg);
  transition: 0.2s;
}

.elementor-button.botongumroad:hover,
.botongumroad .elementor-button:hover,
.elementor-button.botongumroad.elementor-button:hover {
  color: var(--hover-text);
  transform: translate(0.25rem, -0.25rem);
  background: var(--hover-bg);
  box-shadow: -0.25rem 0.25rem var(--bg);
}

.elementor-button.botongumroad:active,
.botongumroad .elementor-button:active,
.elementor-button.botongumroad.elementor-button:active {
  transform: translate(0);
  box-shadow: none;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-a235000 *//* Botón 3D animado */
.simple3danimado-scene {
  width: 10em;
  display: flex;
  justify-content: center;
  align-items: center;
}

.simple3danimado-cube {
  color: #ccc;
  cursor: pointer;
  font-family: 'Roboto', sans-serif;
  transition: all 0.85s cubic-bezier(.20,.60,.20,1);
  transform-style: preserve-3d;
  transform-origin: 100% 50%;
  width: 10em;
  height: 4em;
}

.simple3danimado-cube:hover {
  transform: rotateX(-90deg) rotateZ(-20deg);
}

.simple3danimado-side {
  box-sizing: border-box;
  position: absolute;
  display: inline-block;
  height: 4em;
  width: 10em;
  text-align: center;
  text-transform: uppercase;
  padding-top: 1.5em;
  font-weight: bold;
}

.simple3danimado-top {
  background: wheat;
  color: #222229;
  transform: rotateX(90deg) translate3d(0, 0, 2em);
  box-shadow: inset 0 0 0 5px #fff;
}

.simple3danimado-front {
  background: #222229;
  color: #fff;
  box-shadow: inset 0 0 0 5px #fff;
  transform: translate3d(0, 0, 2em);
}

.simple3danimado-right {
  height: 4em;
  width: 4em;
  background: #222229;
  box-shadow: inset 0 0 0 5px #fff;
  transform: rotateY(90deg) translate3d(0, 0, 8em);
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-6e3aed5 */.monocromaticosimple3d {
  --font-color: #323232;
  --bg-color: #fff;
  --main-color: #323232;

  width: 160px; /* un poco más ancho para la flecha */
  height: 40px;
  border-radius: 5px;
  border: 2px solid var(--main-color);
  background-color: #fff;
  box-shadow: 4px 4px var(--main-color);
  font-size: 17px;
  font-weight: 600;
  color: #000;
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px; /* espacio entre texto y flecha */
  transition: transform 0.1s, box-shadow 0.1s;
}

.monocromaticosimple3d:active {
  box-shadow: 0px 0px var(--main-color);
  transform: translate(3px, 3px);
}

/* Opcional: estilo de texto y flecha */
.monocromaticosimple3d-text {
  line-height: 1;
}

.monocromaticosimple3d-arrow {
  line-height: 1;
  display: inline-block;
  transition: transform 0.2s;
}

/* Animación ligera al presionar */
.monocromaticosimple3d:active .monocromaticosimple3d-arrow {
  transform: translateX(2px);
}

.monocromaticosimple3d:hover {
  background-color: #fff; /* Mantiene blanco */
  color: #000;            /* Mantiene el texto negro */
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-e6ff42c */.botondobletextoybrillo {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 169px;
  height: 60px;
  background-color: #000;
  color: #fff;
  text-decoration: none;
  font-family: Arial, sans-serif;
  font-weight: bold;
  border: 3px solid #fff;
  outline: 3px solid #000;
  box-shadow: 6px 6px 0 #00a4ef;
  transition: all 0.1s ease-out;
  padding: 0 15px;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}

.botondobletextoybrillo::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.8),
    transparent
  );
  z-index: 1;
  transition: none;
  opacity: 0;
}

@keyframes botondobletextoybrillo-slide {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

.botondobletextoybrillo:hover::before {
  opacity: 1;
  animation: botondobletextoybrillo-slide 2s infinite;
}

.botondobletextoybrillo:hover {
  transform: translate(-4px, -4px);
  box-shadow: 10px 10px 0 #000;
  background-color: #000;
  color: #fff;
}

.botondobletextoybrillo:active {
  transform: translate(4px, 4px);
  box-shadow: 0px 0px 0 #00a4ef;
  background-color: #fff;
  color: #000;
  border-color: #000;
}

.botondobletextoybrillo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  transition: transform 0.2s ease-out;
  position: relative;
  z-index: 1;
}

.botondobletextoybrillo:hover .botondobletextoybrillo-text {
  transform: skew(-5deg);
}

.botondobletextoybrillo:active .botondobletextoybrillo-text {
  transform: skew(5deg);
}

.botondobletextoybrillo-text span:first-child {
  font-size: 11px;
  text-transform: uppercase;
}

.botondobletextoybrillo-text span:last-child {
  font-size: 16px;
  text-transform: uppercase;
}

.botondobletextoybrillo:hover {
  transform: translate(-4px, -4px);
  box-shadow: 10px 10px 0 #000;
  background-color: #000;
  color: #fff;
  border: 3px solid #fff; /* <--- esto mantiene el borde blanco */
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-c610c27 *//* Contenedor para perspectiva 3D */
.brillointernoinfinito-container {
  perspective: 1000px;
}

/* Botón principal */
.elementor-button.brillointernoinfinito,
.brillointernoinfinito .elementor-button,
.brillointernoinfinito {
  width: 200px;
  height: 60px;
  border-radius: 30px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.15), rgba(255,255,255,0.05));
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,0.4),
    inset 0 -1px 2px rgba(0,0,0,0.2),
    0 4px 8px rgba(0,0,0,0.2),
    0 0 20px rgba(255,255,255,0.1);
  transform: rotateX(15deg) translateZ(0);
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  position: relative;
  cursor: pointer;
  animation: brillointernoinfinito-pulse 2s infinite ease-in-out;
  overflow: hidden;
  border: none;
}

/* Brillo dinámico */
.brillointernoinfinito::before {
  content: "";
  position: absolute;
  top: 0;
  left: -50px;
  width: 50px;
  height: 100%;
  background: linear-gradient(
    to right,
    transparent,
    rgba(255,255,255,0.1),
    rgba(255,255,255,0.2),
    rgba(255,255,255,0.1),
    transparent
  );
  transform: skewX(-25deg);
  animation: brillointernoinfinito-shine 3s infinite linear;
  pointer-events: none;
  z-index: 1;
}

/* Sombra inferior para efecto 3D */
.brillointernoinfinito::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 10%;
  width: 80%;
  height: 10px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.3) 0%, transparent 70%);
  z-index: -1;
}

/* Texto */
.brillointernoinfinito-text {
  position: relative;
  z-index: 2;
  color: white;
  font-size: 18px;
  font-family: Arial, sans-serif;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  display: block;
  line-height: 0px;
  text-align: center;
}

/* Hover: levantar y resaltar */
.brillointernoinfinito:hover {
  transform: rotateX(0deg) translateZ(15px) scale(1.05);
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,0.4),
    inset 0 -1px 2px rgba(0,0,0,0.2),
    0 8px 16px rgba(0,0,0,0.3),
    0 0 40px rgba(255,255,255,0.25);
}

/* Click: presionar */
.brillointernoinfinito:active {
  transform: rotateX(0deg) translateZ(-5px) scale(0.95);
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,0.4),
    inset 0 -1px 2px rgba(0,0,0,0.2),
    0 2px 4px rgba(0,0,0,0.2),
    0 0 10px rgba(255,255,255,0.1);
}

/* Animaciones */
@keyframes brillointernoinfinito-pulse {
  0%,100% {
    box-shadow:
      inset 0 1px 2px rgba(255,255,255,0.4),
      inset 0 -1px 2px rgba(0,0,0,0.2),
      0 4px 8px rgba(0,0,0,0.2),
      0 0 20px rgba(255,255,255,0.1);
  }
  50% {
    box-shadow:
      inset 0 1px 2px rgba(255,255,255,0.4),
      inset 0 -1px 2px rgba(0,0,0,0.2),
      0 4px 8px rgba(0,0,0,0.2),
      0 0 30px rgba(255,255,255,0.2);
  }
}

@keyframes brillointernoinfinito-shine {
  0% { left: -50px; }
  100% { left: 250px; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-d21e0ed *//* Botón limpio doble aislado */
.elementor-button.botonlimpiodoble,
.botonlimpiodoble .elementor-button,
.botonlimpiodoble {
  --color: #3dd5f3;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.5s;
  border: none;
  background-color: transparent;
  overflow: visible;
}

.botonlimpiodoble-text {
  letter-spacing: 2px;
  font-weight: 500;
  background: var(--color);
  border-radius: 100PX;
  color: black;
  padding: 1rem;
  display: inline-block;
  z-index: 1;
  transition: all 0.5s;
}

.botonlimpiodoble::before {
  content: '';
  z-index: 0;
  background-color: var(--color);
  border: 2px solid black;
  border-radius: 100PX;
  width: 110%;
  height: 100%;
  position: absolute;
  transform: rotate(10deg);
  transition: 0.5s;
  opacity: 0.2;
}

.botonlimpiodoble:hover {
  cursor: pointer;
  filter: brightness(1.2);
  transform: scale(1.1);
    border-radius: 100px;
}

.botonlimpiodoble:hover::before {
  transform: rotate(0deg);
  opacity: 1;
}

.botonlimpiodoble-icon {
  transform: translateX(-200%);
  transition: 0.5s;
  width: 0;
  opacity: 0;
}

.botonlimpiodoble:hover .botonlimpiodoble-icon {
  width: 25px;
  transform: translateX(0%);
  opacity: 1;
}

.botonlimpiodoble:active {
  filter: brightness(1.4);
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-eeeda16 */.botonletrasaterrizaje,
.botonletrasaterrizaje *,
.botonletrasaterrizaje :after,
.botonletrasaterrizaje :before,
.botonletrasaterrizaje:after,
.botonletrasaterrizaje:before {
  border: 0 solid;
  box-sizing: border-box;
}

.botonletrasaterrizaje {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  color: #fff;
  cursor: pointer;
  padding: 1.2rem 3rem;
  font-weight: 900;
  text-transform: uppercase;
  display: inline-block;
  border-radius: 999px;
  position: relative;
  overflow: hidden;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  font-size: 100%;
  line-height: 1.5;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.6);
}

.botonletrasaterrizaje:disabled {
  cursor: default;
}

.botonletrasaterrizaje:-moz-focusring {
  outline: auto;
}

.botonletrasaterrizaje .botonletrasaterrizaje-original {
  background: #000;
  color: #fff;
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  transition: transform 0.2s cubic-bezier(0.87, 0, 0.13, 1);
}

.botonletrasaterrizaje:hover .botonletrasaterrizaje-original {
  transform: translateY(100%);
}

.botonletrasaterrizaje .botonletrasaterrizaje-letters {
  display: flex;
  justify-content: center;
  height: 100%;
}

.botonletrasaterrizaje span {
  opacity: 0;
  transform: translateY(-100%);
  transition: opacity 0.2s, transform 0.2s cubic-bezier(0.87, 0, 0.13, 1);
  transition-delay: 0.1s;
}

.botonletrasaterrizaje:hover span {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered delays para cada letra */
.botonletrasaterrizaje:hover span:nth-child(1) { transition-delay: 0.1s; }
.botonletrasaterrizaje:hover span:nth-child(2) { transition-delay: 0.2s; }
.botonletrasaterrizaje:hover span:nth-child(3) { transition-delay: 0.3s; }
.botonletrasaterrizaje:hover span:nth-child(4) { transition-delay: 0.4s; }
.botonletrasaterrizaje:hover span:nth-child(5) { transition-delay: 0.5s; }
.botonletrasaterrizaje:hover span:nth-child(6) { transition-delay: 0.6s; }
.botonletrasaterrizaje:hover span:nth-child(7) { transition-delay: 0.7s; }
.botonletrasaterrizaje:hover span:nth-child(8) { transition-delay: 0.8s; }
.botonletrasaterrizaje:hover span:nth-child(9) { transition-delay: 0.9s; }/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-0ad3af6 */.botoncodigoanimado {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 45px;
  width: 45px;
  border: none;
  border-radius: 10px;
  background-color: black;
  cursor: pointer;
  transition: all 0.3s;
  overflow: hidden;
}

/* Corchetes */
.botoncodigoanimado-bracket {
  font-size: 18px;
  transition: all 0.3s;
  color: rgb(182, 104, 255);
}

/* Texto animado */
.botoncodigoanimado-text {
  font-size: 14px;
  width: 0;
  transform: scale(0);
  transition: all 0.3s;
  color: white;
}

/* Hover: expande el botón y muestra el texto */
.botoncodigoanimado:hover {
  width: 100px;
}

.botoncodigoanimado:hover .botoncodigoanimado-text {
  transform: scale(1);
  width: 40px;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-230bfc4 *//* Contenedor del botón */
.bordesfantasma-container {
  position: relative;
  width: fit-content;
  height: fit-content;
}

/* Bordes superior e inferior del contenedor */
.bordesfantasma-container::before {
  content: "";
  position: absolute;
  width: calc(100% + 0.5em);
  height: 50%;
  left: -0.3em;
  top: -0.3em;
  border: 1px solid #0e1822;
  border-bottom: 0;
}

.bordesfantasma-container::after {
  content: "";
  position: absolute;
  width: calc(100% + 0.5em);
  height: 50%;
  left: -0.3em;
  bottom: -0.3em;
  border: 1px solid #0e1822;
  border-top: 0;
  z-index: 0;
}

/* Botón */
.bordesfantasma-button {
  font-family: "Ropa Sans", sans-serif;
  color: rgb(255, 255, 255);
  cursor: pointer;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 0.05rem;
  border: 1px solid #0e1822;
  padding: 0.8rem 2.1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='://www.w3.org/2000/svg' viewBox='0 0 531.28 200'%3E%3Cdefs%3E%3Cstyle%3E .shape %7B fill: %23FF4655 %7D %3C/style%3E%3C/defs%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpolygon class='shape' points='415.81 200 0 200 115.47 0 531.28 0 415.81 200' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
  background-color: #0e1822;
  background-size: 200%;
  background-position: 200%;
  background-repeat: no-repeat;
  transition: 0.3s ease-in-out;
  transition-property: background-position, border, color;
  position: relative;
  z-index: 1;
}

/* Hover del botón */
.bordesfantasma-button:hover {
  border: 1px solid #ff4655;
  color: white;
  background-position: 40%;
    background-color: #0e1822;
}

/* Pseudo-elementos del botón */
.bordesfantasma-button::before {
  content: "";
  position: absolute;
  background-color: #0e1822;
  width: 0.2rem;
  height: 0.2rem;
  top: -1px;
  left: -1px;
  transition: background-color 0.15s ease-in-out;
}

.bordesfantasma-button::after {
  content: "";
  position: absolute;
  background-color: #ff4655;
  width: 0.3rem;
  height: 0.3rem;
  bottom: -1px;
  right: -1px;
  transition: background-color 0.15s ease-in-out;
}

/* Hover pseudo-elementos */
.bordesfantasma-button:hover::before {
  background-color: white;
}

.bordesfantasma-button:hover::after {
  background-color: white;
}

/* SVG shape (dependencia original) */
.bordesfantasma-button .shape {
  fill: #0e1822;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-76f4481 */.botonglitchanimado6 {
  position: relative;
  border: 0;
  padding: 1em 2em;
  font-weight: 700;
  cursor: pointer;
  outline: 0.5em solid #fff;
  outline-offset: -0.3em;
  color: #fff;
  background-color: #333;
  text-transform: uppercase;
  transition: all 0.1s ease-in-out;
  display: inline-block;
  z-index: 0; /* asegúrate de que no se salga del botón */
}

/* Hover: animaciones shake + glitch */
.botonglitchanimado6:hover {
  animation: botonglitchanimado6-shake 500ms infinite,
             botonglitchanimado6-glitch 400ms infinite steps(4);
}

/* Shake animation: mueve todo el botón */
@keyframes botonglitchanimado6-shake {
  0% {}
  25% { transform: translate(-0.1em,-0.1em); }
  50% { transform: translate(0.3em,0); }
  75% { transform: translate(0,0.3em); }
  100% {}
}

/* Glitch animation: solo texto y box-shadow */
@keyframes botonglitchanimado6-glitch {
  0% {
    text-shadow: 0.8em 0.8em rgba(240,84,219,0.7),
                 -0.8em -0.8em rgba(84,240,232,0.7);
    box-shadow: 0 0 0.5em rgba(240,84,219,0.3),
                0 0 0.5em rgba(84,240,232,0.3);
    transform: translate(0,0);
  }
  25% {
    text-shadow: 0.5em -0.3em rgba(240,84,219,0.7),
                 -0.5em 0.3em rgba(84,240,232,0.7);
    box-shadow: 0 0 0.5em rgba(240,84,219,0.3),
                0 0 0.5em rgba(84,240,232,0.3);
    transform: translate(-0.1em,0.1em);
  }
  50% {
    text-shadow: -0.3em 0.4em rgba(240,84,219,0.7),
                 0.3em -0.4em rgba(84,240,232,0.7);
    box-shadow: 0 0 0.5em rgba(240,84,219,0.3),
                0 0 0.5em rgba(84,240,232,0.3);
    transform: translate(0.1em,-0.1em);
  }
  75% {
    text-shadow: 0.4em -0.2em rgba(240,84,219,0.7),
                 -0.4em 0.2em rgba(84,240,232,0.7);
    box-shadow: 0 0 0.5em rgba(240,84,219,0.3),
                0 0 0.5em rgba(84,240,232,0.3);
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-781c432 */.botonintercambioesferas {
  position: relative !important;
  display: inline-block !important;
  cursor: pointer !important;
  z-index: 1 !important;
  isolation: isolate !important;
  overflow: visible !important; /* 🔥 permite ver la esfera fuera del botón */
}

/* Capas animadas */
.botonintercambioesferas::before,
.botonintercambioesferas::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  right: 0 !important;
  border-radius: 50px !important;
  transition: all 0.4s ease !important;
}

/* Fondo base (gris oscuro) */
.botonintercambioesferas::before {
  width: 100% !important;
  height: 100% !important;
  background: darkslategray !important;
  transform: translate(0, 0) !important;
  z-index: -2 !important;
}

/* Burbuja brillante (esfera animada) */
.botonintercambioesferas::after {
  width: 10px !important;
  height: 10px !important;
  background: #ffffff30 !important; /* un poco más visible que el #ffffff15 original */
  backdrop-filter: blur(5px) !important;
  transform: translate(0, 0) !important;
  z-index: -1 !important;
}

/* Hover: la burbuja se expande y el fondo se reduce */
.botonintercambioesferas:hover::before {
  width: 10px !important;
  height: 10px !important;
  transform: translate(5%, 20%) !important;
}

.botonintercambioesferas:hover::after {
  width: 100% !important;
  height: 100% !important;
  transform: translate(0, 0) !important;
}

/* Al presionar el botón */
.botonintercambioesferas:active::after {
  transition: 0s !important;
  transform: translate(0, 5%) !important;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-f0eb16d *//* Botón aislado: botonabrirabajo */
.botonabrirabajo {
  width: 160px;
  line-height: 40px;
  font-weight: 500;
  font-size: 17px;
  letter-spacing: 2px;
  text-decoration: none;
  text-transform: uppercase;
  padding: 0;
  background: #FBEAEB;
  position: relative;
  z-index: 2;
  color: #FBEAEB;
  perspective: 300px;
  transform-style: preserve-3d;
  border-radius: 9px;
  border: none;
  cursor: pointer;
  transition: color 0.3s ease;
}

.botonabrirabajo:hover {
  color: #2F3C7E;
}

.botonabrirabajo:hover {
  background-color: #FBEAEB; /* color rosita claro al hacer hover */
}

.botonabrirabajo::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #2F3C7E;
  border-radius: 6px;
  z-index: -1;
  transform-origin: center bottom;
  transform: rotateX(0);
  transition: transform 0.3s ease;
}

.botonabrirabajo:hover::after {
  transform: rotateX(-180deg);
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-48fa891 *//* Botón aislado: botondemodaalegre */
.botondemodaalegre {
  padding: 10px 35px;
  background-color: #EBF5EE;
  font-family: 'poppins';
  font-size: 15px;
  color: #000;
  font-weight: 600;
  border: 0px;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  border-radius: 3px;
  transition: all .2s ease-in-out .1s;
}

/* Hover: efecto de escala y rotación */
.botondemodaalegre:hover {
  background-color: #EBF5EE;
  transform: scale(1.2) rotate(5deg);
}

/* Pseudo-elemento ::before */
.botondemodaalegre::before {
  content: '';
  position: absolute;
  background-color: #78A1BB;
  height: 180%;
  top: -30%;
  left: -40%;
  transform: rotateZ(20deg);
  width: 40px;
  transition: left .2s ease-in-out, left 0s;
  z-index: 0;
}

/* Pseudo-elemento ::after */
.botondemodaalegre::after {
  content: '';
  position: absolute;
  background-color: #283044;
  height: 180%;
  top: -30%;
  left: -40%;
  transform: translateX(-40px) rotateZ(20deg);
  width: 40px;
  transition: left .2s ease-in-out, left 0s;
  z-index: 0;
}

/* Hover: animación de los pseudo-elementos */
.botondemodaalegre:hover::before {
  left: 150%;
  transition: left .3s ease-in-out;
}

.botondemodaalegre:hover::after {
  left: 150%;
  transition: left .3s ease-in-out;
}

/* Mantener el texto visible durante el hover */
.botondemodaalegre:hover,
.botondemodaalegre:hover span,
.botondemodaalegre > * {
  color: #000 !important; /* texto negro */
}

/* Asegura que el texto quede encima de los pseudo-elementos */
.botondemodaalegre span,
.botondemodaalegre > * {
  position: relative;
  z-index: 1;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-00f180e *//* Botón aislado: botonunionlineasconneon */
.botonunionlineasconneon {
  cursor: pointer;
  background: transparent;
  position: relative;
  display: inline-block;
  outline: none;
  border: 2px solid #0f0;
  width: 150px;
  height: 60px;
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: 2px;
  text-decoration: none;
  color: #fff;
  -webkit-box-reflect: below 0px linear-gradient(transparent, #0002);
  transition: 0.45s;
  transition-delay: 0s;
}

/* Hover: brillo verde neon y texto negro al final */
.botonunionlineasconneon:hover {
  transition-delay: 1.5s;
  color: #000;
  box-shadow: 0 0 10px #0f0,
              0 0 20px #0f0,
              0 0 40px #0f0,
              0 0 80px #0f0,
              0 0 100px #0f0;
}

/* Texto encima del botón */
.botonunionlineasconneon span {
  position: relative;
  z-index: 100;
  display: inline-block;
}

/* Líneas laterales ::before y ::after */
.botonunionlineasconneon::before {
  content: "";
  position: absolute;
  left: -20px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 2px;
  background: #0f0;
  box-shadow: 5px -8px 0 #0f0,
              5px 8px 0 #0f0;
  transition: width 0.5s, left 0.5s, height 0.5s, box-shadow 0.5s;
  transition-delay: 1s, 0.5s, 0s, 0s;
}

.botonunionlineasconneon:hover::before {
  width: 60%;
  height: 100%;
  left: -2px;
  box-shadow: 5px 0 0 #0f0,
              5px 0 0 #0f0;
  transition-delay: 0s, 0.5s, 1s, 1s;
}

.botonunionlineasconneon::after {
  content: "";
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 2px;
  background: #0f0;
  box-shadow: -5px -8px 0 #0f0,
              -5px 8px 0 #0f0;
  transition: width 0.5s, right 0.5s, height 0.5s, box-shadow 0.5s;
  transition-delay: 1s, 0.5s, 0s, 0s;
}

.botonunionlineasconneon:hover::after {
  width: 100%;
  height: 110%;
  right: -2px;
  box-shadow: -5px 0 0 #0f0,
              -5px 0 0 #0f0;
  transition-delay: 0s, 0.5s, 1s, 1s;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-cca18ca *//* ===== BOTÓN AISLADO: botoncuadroanimadominimalista ===== */

.botoncuadroanimadominimalista {
  position: relative;
  top: 0;
  left: 0;
  width: 160px;
  height: 50px;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Capa interna del botón */
.botoncuadroanimadominimalista > div {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: none;
  box-shadow: 
    4px 4px 6px 0 rgba(255, 255, 255, 0.5),
    -4px -4px 6px 0 rgba(116, 125, 136, 0.5),
    inset -4px -4px 6px 0 rgba(255, 255, 255, 0.2),
    inset 4px 4px 6px 0 rgba(0, 0, 0, 0.4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  letter-spacing: 1px;
  color: #000;
  z-index: 1;
  transition: 0.6s;
}

/* Hover: efecto de expansión y brillo del texto */
.botoncuadroanimadominimalista:hover > div {
  letter-spacing: 4px;
  color: #fff;
}

/* Pseudo-elementos para el efecto de cuadro animado */
.botoncuadroanimadominimalista::after,
.botoncuadroanimadominimalista::before {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: -99999;
  transition: all 0.4s;
}

/* Capa inferior oscura (efecto blur que se expande) */
.botoncuadroanimadominimalista::after {
  transform: translate(15px, 15px);
  width: 35px;
  height: 35px;
  background: #000;
  backdrop-filter: blur(5px);
  border-radius: 10px;
}

/* Al hacer hover: el cuadro crece hasta ocupar el fondo */
.botoncuadroanimadominimalista:hover::after {
  border-radius: 10px;
  transform: translate(0, 0);
  width: 100%;
  height: 100%;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-26853fa *//* ===== BOTÓN AISLADO: botonesquinasmatch ===== */

.botonesquinasmatch {
  position: relative;
  text-decoration: none;
  color: #e8e8e8;
  padding: 15px 30px;
  width: 170px;
  height: 60px;
  font-weight: 600;
  font-size: 18px;
  cursor: pointer;
  border: none;
  overflow: hidden;
  background: linear-gradient(-45deg, #f89b29 0%, #ff0f7b 100%);
  transition: all 0.3s cubic-bezier(0.215, 0.610, 0.355, 1);
}

/* Texto principal y su pseudo texto oculto */
.botonesquinasmatch span,
.botonesquinasmatch span::before {
  position: absolute;
  top: 0%;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.215, 0.610, 0.355, 1);
}

/* Texto que aparece al hacer hover */
.botonesquinasmatch span::before {
  content: 'Hello!';
  top: -100%;
}

/* Marcos animados en las esquinas */
.botonesquinasmatch::before {
  top: 0;
  left: 0;
  border-top: 2px solid #e8e8e8;
  border-left: 2px solid #e8e8e8;
}

.botonesquinasmatch::after {
  bottom: 0;
  right: 0;
  border-bottom: 2px solid #e8e8e8;
  border-right: 2px solid #e8e8e8;
}

.botonesquinasmatch::after,
.botonesquinasmatch::before {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.215, 0.610, 0.355, 1);
}

/* Efecto hover */
.botonesquinasmatch:hover {
  box-shadow: 0 0 30px rgba(248, 155, 41, 0.4),
              0 0 30px rgba(255, 15, 123, 0.4);
}

.botonesquinasmatch:hover::before,
.botonesquinasmatch:hover::after {
  width: 100%;
  height: 100%;
}

/* Animación del texto */
.botonesquinasmatch:hover span {
  top: 100%;
}

/* Efecto click (presionado) */
.botonesquinasmatch:active {
  scale: 0.95;
  box-shadow: 0 0 10px rgba(248, 155, 41, 0.4),
              0 0 10px rgba(255, 15, 123, 0.4);
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-2c809db *//* === Botón aislado: botonsombrainferiorblur === */
.botonsombrainferiorblur {
  display: table-cell;
  vertical-align: middle;
  border: none;
  background-color: transparent;
  color: white;
  margin: auto;
  width: 150px;
  line-height: 30px;
  font-size: 12px;
  letter-spacing: 2px;
  border-radius: 0px;
  font-weight: bold;
  text-transform: uppercase;
  background-color: #031d67;
  box-shadow: 0px 15px 18px -6px rgba(35, 22, 214, 0.65);
  transition: all 0.4s ease;
  position: relative;
  cursor: pointer;
}

.botonsombrainferiorblur:hover {
  background-color: #051749;
  box-shadow: 0px 22px 19px -8px rgba(16, 8, 119, 0.65);
  transform: scale(1.02, 1.02);
}

.botonsombrainferiorblur:active {
  background-color: #051749;
  box-shadow: 0px 12px 18px -4px rgba(7, 4, 51, 0.65);
  transform: scale(0.95, 0.95);
  transition: all 0.4s ease -0.125s;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-16ce86c */.botoncierresdeslizantes {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 10px 30px;
  transition: 0.5s;
  position: relative;
  font-size: 17px;
  background: #333;
  border: none;
  color: #fff;
}

.botoncierresdeslizantes:hover {
  letter-spacing: 0.25em;
  background: #ff1867;
  color: #ff1867;
  box-shadow: 0 0 45px #ff1867;
}

.botoncierresdeslizantes::before {
  content: '';
  position: absolute;
  inset: 2px;
  background: #222222;
}

.botoncierresdeslizantes span {
  position: relative;
  z-index: 1;
}

.botoncierresdeslizantes i {
  position: absolute;
  inset: 0;
  display: block;
}

/* 🔹 Corrección exacta de líneas: más visibles y separadas del borde */
.botoncierresdeslizantes i::before {
  content: '';
  position: absolute;
  border: 2px solid #ff1867;
  width: 12px;
  height: 9px;
  top: -4px; /* más separada arriba */
  left: 80%;
  background: #00000095;
  transform: translateX(-50%);
  transition: 0.5s;
}

.botoncierresdeslizantes:hover i::before {
  width: 20px;
  left: 20%;
}

.botoncierresdeslizantes i::after {
  content: '';
  position: absolute;
  border: 2px solid #ff1867;
  width: 12px;
  height: 9px;
  bottom: -4px; /* más separada abajo */
  left: 20%;
  background: #00000095;
  transform: translateX(-50%);
  transition: 0.5s;
}

.botoncierresdeslizantes:hover i::after {
  width: 20px;
  left: 80%;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-c53094a */.botonirflechaanimada {
  position: relative;
  background-color: #F1F7F7;
  width: 200px;
  height: 60px;
  color: #324B4C;
  border-radius: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  letter-spacing: 2px;
  border-top: 0.5px solid rgba(0, 0, 0, 0.35);
  border-left: 0.5px solid rgba(0, 0, 0, 0.35);
  padding-left: 40px;
  cursor: pointer;
  transition: all 0.35s ease;
  overflow: hidden;
  z-index: 1;
}

.botonirflechaanimada__texto {
  font-weight: 600;
  font-size: 16px;
  color: #324B4C;
  position: relative;
  z-index: 2;
}

.botonirflechaanimada__icono {
  position: absolute;
  left: 5px;
  width: 50px;
  height: 50px;
  background: #7AB5B7;
  border-radius: 50%;
  transition: all 0.35s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #f1f4f7;
  z-index: 1;
}

/* ===== EFECTOS ===== */
.botonirflechaanimada:hover {
  padding-left: 0;
  padding-right: 40px;
  color: #324B4C;
}

.botonirflechaanimada:hover .botonirflechaanimada__icono {
  left: calc(100% - 55px);
  background: #7AB5B7;
  color: #324B4C;
}

/* ===== PREVENCIÓN DE CONFLICTOS GLOBALES ===== */
.botonirflechaanimada *,
.botonirflechaanimada *::before,
.botonirflechaanimada *::after {
  box-sizing: border-box !important;
  transition: inherit;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-248c2af *//* === BOTÓN LINEAS CIERRE CENTRO (aislado para Elementor) === */
.botonlineascierrecentro {
  text-decoration: none !important;
  color: white !important;
  font-weight: 600 !important;
  font-size: 20px !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  padding: 15px 30px !important;
  display: inline-block !important;
  background-color: transparent !important;
  border: none !important;
  position: relative !important;
  cursor: pointer !important;
  overflow: hidden !important;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1) !important;
  isolation: isolate !important;
}

/* Texto con gradiente */
.botonlineascierrecentro span {
  background: linear-gradient(-45deg, #63A4FF 0%, #83EAF1 100%) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1) !important;
}

/* Hover: el texto pasa a blanco */
.botonlineascierrecentro:hover span {
  -webkit-text-fill-color: white !important;
}

/* Líneas del borde (superior e inferior) */
.botonlineascierrecentro::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: scaleY(2) !important;
  border: 3px solid !important;
  border-image: linear-gradient(-45deg, #63A4FF 0%, #83EAF1 100%) !important;
  border-image-slice: 1 !important;
  border-width: 2px 0 2px 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1) !important;
  z-index: -1 !important;
}

/* Hover: las líneas se cierran al centro */
.botonlineascierrecentro:hover::before {
  transform: scaleY(0) !important;
  opacity: 1 !important;
}

/* Fondo animado que aparece al cerrar las líneas */
.botonlineascierrecentro::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(-45deg, #63A4FF 0%, #83EAF1 100%) !important;
  transform: scale(0) !important;
  pointer-events: none !important;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1) !important;
  z-index: -1 !important;
}

/* Hover: el fondo se expande desde el centro */
.botonlineascierrecentro:hover::after {
  transform: scaleY(1) !important;
}

/* Efecto al presionar el botón */
.botonlineascierrecentro:active {
  transform: scale(0.9) !important;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-f464fc4 */.textoanimadoelementor {
  position: relative;
  font-family: 'poppins';
  font-size: 1em;
  letter-spacing: 4px;
  overflow: hidden;

  /* Gradiente animado */
  background: linear-gradient(90deg, #fff 10%, #4d4d4d 20%);
  background-repeat: no-repeat;
  background-size: 80%;

  /* Animación */
  animation: textoanimadoelementor-anim 3s linear infinite;

  /* Efecto de gradiente sobre el texto */
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(255, 255, 255, 0);
}

/* Keyframes de animación del gradiente */
@keyframes textoanimadoelementor-anim {
  0% {
    background-position: -500%;
  }
  100% {
    background-position: 500%;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-a44c5be */.botonanimadoscroll2 {
  --basicolor: white; /* color base de borde y chevrons */
  --tamX: 30px;
  --tamY: 50px;
  position: relative;
  width: var(--tamX);
  height: var(--tamY);
  margin-left: calc(var(--tamX) / 2);
  border: calc(var(--tamX) / 10) solid var(--basicolor);
  border-radius: 50px;
  box-sizing: border-box;
  margin-bottom: 16px;
  cursor: pointer;
}

/* Animación del punto central */
.botonanimadoscroll2::before {
  content: "";
  position: absolute;
  bottom: 30px;
  left: 50%;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  background-color: var(--basicolor);
  border-radius: 100%;
  animation: botonanimadoscroll2-anim 2s infinite;
  box-sizing: border-box;
  box-shadow: 0px -5px 3px 1px rgba(42, 84, 112, 0.4);
}

/* Keyframes para el punto animado */
@keyframes botonanimadoscroll2-anim {
  0% {
    opacity: 0;
    height: 6px;
  }
  40% {
    opacity: 1;
    height: 10px;
  }
  80% {
    transform: translateY(20px);
    height: 10px;
    opacity: 0;
  }
  100% {
    height: 3px;
    opacity: 0;
  }
}

/* Contenedor de chevrons */
.botonanimadoscroll2-chevrons {
  padding: 6px 0 0 0;
  margin-left: -3px;
  margin-top: 48px;
  width: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Cada chevron */
.botonanimadoscroll2-chevrondown {
  margin-top: -6px;
  position: relative;
  border: solid var(--basicolor);
  border-width: 0 3px 3px 0;
  display: inline-block;
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
}

/* Animación alternada de chevrons */
.botonanimadoscroll2-chevrondown:nth-child(odd) {
  animation: botonanimadoscroll2-pulse 500ms ease infinite alternate;
}

.botonanimadoscroll2-chevrondown:nth-child(even) {
  animation: botonanimadoscroll2-pulse 500ms ease infinite alternate 250ms;
}

/* Keyframes de pulsación */
@keyframes botonanimadoscroll2-pulse {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.5;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-ed4284a */.emojianimadoscroll {
  width: 30px; /* un poco más ancho para que el scroll se vea */
  height: 60px; /* un poco más alto */
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: none;
  outline: 2px solid rgb(105, 127, 255);
  box-shadow: 0px 0px 10px rgb(105, 127, 255);
  position: relative;
  cursor: pointer;
  overflow: hidden; /* aseguramos que el scroll no se salga */
}

/* Scroll interno animado */
.emojianimadoscroll-scroll {
  width: 5px;
  height: 8px;
  border-radius: 50%;
  background-color: rgb(105, 127, 255);
  box-shadow: 0 0 10px rgb(105, 127, 255);
  animation: emojianimadoscroll-anim 3s linear infinite;
  position: absolute; /* para centrar correctamente */
  top: 20%; /* posición inicial dentro del botón */
  left: 50%;
  transform: translateX(-50%);
  z-index: 2; /* encima del fondo */
}

/* Hover: mantener transparencia del botón */
.emojianimadoscroll:hover {
  background-color: transparent;
}

/* Animación del scroll */
@keyframes emojianimadoscroll-anim {
  0% {
    top: 20%;
  }
  50% {
    top: 70%;
  }
  100% {
    top: 20%;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-bbb9347 *//* ==== Botón Aislado: botonconparticulas ==== */

.contenedor-botonconparticulas {
  position: relative;
  display: inline-block;
  padding: 2px;
  border-radius: 12px;
  background: linear-gradient(90deg, #00c6ff, #845ec2, #ff6f91, #00c6ff);
  background-size: 400% 400%;
  animation: botonconparticulas-gradientBorder 20s ease-in-out infinite;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  will-change: transform, filter;
  backdrop-filter: blur(5px);
}

.botonconparticulas {
  position: relative;
  padding: 15px 40px;
  font-size: 16px;
  color: rgba(255, 255, 255, 1);
  background: linear-gradient(45deg, #0f0f2d, #1a1a3a);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:
    0 4px 10px rgba(10, 10, 31, 0.5),
    0 0 10px rgba(66, 135, 245, 0.15),
    inset 0 0 10px rgba(66, 135, 245, 0.05);
  font-family: "poppins;
  text-transform: uppercase;
  letter-spacing: 2px;
  z-index: 1;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  will-change: transform;
  text-shadow:
    0 0 10px rgba(255, 255, 255, 0.3),
    0 0 20px rgba(255, 255, 255, 0.1);
  font-weight: 500;
}

.botonconparticulas span {
  position: relative;
  z-index: 5;
  mix-blend-mode: normal;
  font-weight: 500;
  background: linear-gradient(to right, #ffffff, #ffffff);
  -webkit-background-clip: text;
  background-clip: text;
  filter: brightness(1.5) contrast(1.8);
  text-shadow:
    0 0 15px rgba(255, 255, 255, 0.6),
    0 0 30px rgba(255, 255, 255, 0.3);
}

/* Partículas principales */
.botonconparticulas::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(1px 1px at 10% 15%, rgba(255, 255, 255, 0.95), rgba(0, 0, 0, 0)),
    radial-gradient(1.5px 1.5px at 85% 25%, rgba(255, 255, 255, 0.95), rgba(0, 0, 0, 0)),
    radial-gradient(1px 1px at 75% 85%, rgba(255, 255, 255, 0.95), rgba(0, 0, 0, 0)),
    radial-gradient(1.5px 1.5px at 15% 75%, rgba(255, 255, 255, 0.95), rgba(0, 0, 0, 0)),
    radial-gradient(1px 1px at 50% 25%, rgba(255, 255, 255, 0.95), rgba(0, 0, 0, 0)),
    radial-gradient(1.5px 1.5px at 25% 50%, rgba(255, 255, 255, 0.95), rgba(0, 0, 0, 0)),
    radial-gradient(1px 1px at 85% 65%, rgba(255, 255, 255, 0.95), rgba(0, 0, 0, 0));
  animation: botonconparticulas-moveParticles1 20s linear infinite;
  opacity: 0.45;
  pointer-events: none;
  will-change: transform;
  z-index: 2;
}

/* Capa de partículas secundaria */
.botonconparticulas::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  animation: botonconparticulas-moveParticles2 18s linear infinite;
  transform: rotate(25deg);
  opacity: 0.55;
  pointer-events: none;
  will-change: transform;
  z-index: 3;
}

/* Capa de partículas adicionales */
.botonconparticulas-particulas {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(2px 2px at 15% 25%, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0)),
    radial-gradient(1.8px 1.8px at 85% 15%, rgba(255, 255, 255, 0.98), rgba(0, 0, 0, 0)),
    radial-gradient(2px 2px at 75% 75%, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0)),
    radial-gradient(1.5px 1.5px at 25% 85%, rgba(255, 255, 255, 0.95), rgba(0, 0, 0, 0)),
    radial-gradient(2.2px 2.2px at 65% 35%, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0));
  animation: botonconparticulas-moveParticles4 15s linear infinite;
  opacity: 0.85;
  mix-blend-mode: screen;
  pointer-events: none;
  will-change: transform;
  z-index: 4;
  filter: blur(0.3px);
}

/* ==== Hover ==== */
.botonconparticulas:hover {
  transform: translateY(-1px) translateZ(0);
  box-shadow:
    0 6px 10px rgba(10, 10, 31, 0.6),
    0 0 15px rgba(66, 135, 245, 0.3),
    inset 0 0 15px rgba(66, 135, 245, 0.1);
  background: linear-gradient(45deg, #141436, #1e1e42);
}

.botonconparticulas:hover span {
  filter: brightness(1.8) contrast(2);
  text-shadow:
    0 0 20px rgba(255, 255, 255, 0.8),
    0 0 40px rgba(255, 255, 255, 0.4),
    0 0 60px rgba(255, 255, 255, 0.2);
}

.contenedor-botonconparticulas:hover {
  filter: brightness(1.1);
  box-shadow:
    0 0 25px rgba(0, 0, 0, 0.4),
    0 0 10px rgba(66, 135, 245, 0.2);
  backdrop-filter: blur(8px);
  animation: botonconparticulas-gradientBorder 10s ease-in-out infinite;
}

.botonconparticulas:hover::before {
  opacity: 0.65;
}

.botonconparticulas:hover::after {
  opacity: 0.75;
}

/* ==== Animaciones ==== */
@keyframes botonconparticulas-moveParticles1 {
  0% { transform: translate(0, 0) rotate(0deg); }
  20% { transform: translate(-25px, 15px) rotate(90deg); }
  40% { transform: translate(20px, -20px) rotate(180deg); }
  60% { transform: translate(-15px, -25px) rotate(270deg); }
  80% { transform: translate(25px, 20px) rotate(320deg); }
  100% { transform: translate(0, 0) rotate(360deg); }
}

@keyframes botonconparticulas-moveParticles2 {
  0% { transform: translate(0, 0) rotate(20deg); }
  25% { transform: translate(20px, -15px) rotate(110deg); }
  50% { transform: translate(-20px, 20px) rotate(200deg); }
  75% { transform: translate(15px, 15px) rotate(290deg); }
  100% { transform: translate(0, 0) rotate(380deg); }
}

@keyframes botonconparticulas-moveParticles4 {
  0% { transform: translate(0, 0) rotate(0deg); }
  20% { transform: translate(-30px, 20px) rotate(90deg); }
  40% { transform: translate(25px, -25px) rotate(180deg); }
  60% { transform: translate(-20px, -30px) rotate(270deg); }
  80% { transform: translate(30px, 25px) rotate(320deg); }
  100% { transform: translate(0, 0) rotate(360deg); }
}

@keyframes botonconparticulas-gradientBorder {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-84d9249 */.boton-borderecorridoconneon,
.boton-borderecorridoconneon *,
.boton-borderecorridoconneon :after,
.boton-borderecorridoconneon :before,
.boton-borderecorridoconneon:after,
.boton-borderecorridoconneon:before {
  border: 0 solid;
  box-sizing: border-box;
}

.boton-borderecorridoconneon {
  --neon-borderecorridoconneon: red;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  background-color: #000;
  color: #fff;
  cursor: pointer;
  font-family: 'poppins';
  display: block;
  font-weight: 700;
  outline: 3px solid #fff;
  outline-offset: -3px;
  overflow: hidden;
  padding: 1.3rem 4rem;
  position: relative;
  transition: 0.2s linear 0.1s;
  box-sizing: border-box;
}

.boton-borderecorridoconneon .texto-borderecorridoconneon {
  position: relative;
  z-index: 2;
}

.boton-borderecorridoconneon:disabled {
  cursor: default;
}

.boton-borderecorridoconneon:hover {
  background: var(--neon-borderecorridoconneon);
  box-shadow: 
    0 0 5px var(--neon-borderecorridoconneon),
    0 0 25px var(--neon-borderecorridoconneon),
    0 0 50px var(--neon-borderecorridoconneon),
    0 0 100px var(--neon-borderecorridoconneon);
  color: #fff;
  outline-color: transparent;
  transition: 0.2s linear 0.6s;
}

.texto-borderecorridoconneon {
  position: relative;
  z-index: 2;
}

.boton-borderecorridoconneon span {
  display: block;
  inset: 0;
  position: absolute;
}

/* ==== Bordes animados ==== */
.borderecorridoconneon-top {
  border-top: 4px solid var(--neon-borderecorridoconneon);
  opacity: 0;
  transform: translateX(calc(-100% + var(--progress, 0%)));
  transition: none;
}

.boton-borderecorridoconneon:hover .borderecorridoconneon-top {
  --progress: 100%;
  opacity: 1;
  transition: transform 0.2s linear;
}

.borderecorridoconneon-right {
  border-right: 4px solid var(--neon-borderecorridoconneon);
  opacity: 0;
  transform: translateY(calc(-100% + var(--progress, 0%)));
  transition: none;
}

.boton-borderecorridoconneon:hover .borderecorridoconneon-right {
  --progress: 100%;
  opacity: 1;
  transition: transform 0.2s linear 0.2s;
}

.borderecorridoconneon-bottom {
  border-bottom: 4px solid var(--neon-borderecorridoconneon);
  opacity: 0;
  transform: translateX(calc(100% - var(--progress, 0%)));
  transition: none;
}

.boton-borderecorridoconneon:hover .borderecorridoconneon-bottom {
  --progress: 100%;
  opacity: 1;
  transition: transform 0.2s linear 0.4s;
}

.borderecorridoconneon-left {
  border-left: 3px solid var(--neon-borderecorridoconneon);
  opacity: 0;
  transform: translateY(calc(100% - var(--progress, 0%)));
  transition: none;
}

.boton-borderecorridoconneon:hover .borderecorridoconneon-left {
  --progress: 100%;
  opacity: 1;
  transition: transform 0.2s linear 0.6s;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-a8217a9 *//* Botón aislado: botondoblecruce */
.botondoblecruce {
  font-size: 16px;
  font-weight: 700;
  color: #292930;
  background: #ffdc60;
  height: 60px;
  line-height: 60px;
  text-align: center;
  padding: 0 50px;
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-radius: 10px;
  text-transform: capitalize;
  cursor: pointer;
  border: none;
  box-shadow: 0px 0px 77px 12px rgba(0,0,0,0.13);
  -webkit-box-shadow: 0px 0px 77px 12px rgba(0,0,0,0.13);
  -moz-box-shadow: 0px 0px 77px 12px rgba(0,0,0,0.13);
}

.botondoblecruce::before,
.botondoblecruce::after {
  content: "";
  background: #5956e9;
  height: 50%;
  width: 0;
  position: absolute;
  transition: 0.3s cubic-bezier(.785,.135,.15,.86);
  z-index: -1;
}

.botondoblecruce::before {
  top: 0;
  left: 0;
  right: auto;
}

.botondoblecruce::after {
  bottom: 0;
  right: 0;
  left: auto;
}

.botondoblecruce:hover {
  color: #fff;
  background-color: #57c9da;
}

.botondoblecruce:hover::before {
  width: 100%;
  right: 0;
  left: auto;
}

.botondoblecruce:hover::after {
  width: 100%;
  left: 0;
  right: auto;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-262008a *//* Botón aislado: botonluxuryblanco3d */
.botonluxuryblanco3d {
  position: relative;
  display: inline-block;
  cursor: pointer;
  outline: none;
  border: 0;
  vertical-align: middle;
  text-decoration: none;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: #2c2f33;
  text-transform: uppercase;
  padding: 1.25em 2em;
  background: #f6f8fa;
  border: 2px solid #ccd6dd;
  border-radius: 0.75em;
  transform-style: preserve-3d;
  transition: transform 150ms cubic-bezier(0,0,0.58,1), background 150ms cubic-bezier(0,0,0.58,1);
  
  
}

.botonluxuryblanco3d::before {
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #e9ebee;
  border-radius: inherit;
  box-shadow: 0 0 0 2px #ccd6dd, 0 0.625em 0 0 #ffffff;
  transform: translate3d(0, 0.75em, -1em);
  transition: transform 150ms cubic-bezier(0,0,0.58,1), box-shadow 150ms cubic-bezier(0,0,0.58,1);
}

.botonluxuryblanco3d:hover {
  background: #dce0e3;
  color: #2c2f33;
  transform: translate(0, 0.25em);
  border-color: #ccd6dd;
}

.botonluxuryblanco3d:hover::before {
  box-shadow: 0 0 0 2px #ccd6dd, 0 0.5em 0 0 #ffffff;
  transform: translate3d(0, 0.5em, -1em);
}

.botonluxuryblanco3d:active {
  background: #dce0e3;
  transform: translate(0em, 0.75em);
  background-color: #dce0e3;
}

.botonluxuryblanco3d:active::before {
  box-shadow: 0 0 0 2px #ccd6dd, 0 0 #ffffff;
  transform: translate3d(0, 0, -1em);
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-8c007bf */.botonwarnningneon {
  cursor: pointer;
  border-radius: 5px;
  color: rgb(219, 218, 218);
  border-style: solid;
  background-color: transparent;
  border-color: rgb(219, 218, 218);
  width: 150px;
  height: 40px;
  transition: 0.2s ease;
  text-transform: uppercase;
  font-family: "aldrich";
  border-width: 2px;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 2px;
}

.botonwarnningneon:hover {
  color: rgb(247, 247, 247);
  background-color: rgb(201, 147, 31);
  border-color: rgb(201, 147, 31);
  text-shadow: 0 0 50px white, 0 0 20px white, 0 0 15px white;
  box-shadow: 0 0 50px rgb(201, 147, 31),
              0 0 30px rgb(201, 147, 31),
              0 0 60px rgb(201, 147, 31),
              0 0 120px rgb(201, 147, 31);
  font-size: 20px;
  width: 170px;
  height: 50px;
  letter-spacing: 3px;
}

.botonwarnningneon:active {
  width: 115px;
  height: 38px;
  letter-spacing: 0px;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-4fefa67 *//* From Uiverse.io by reglobby */ 
.stars-container {
  position: absolute;
  width: 100%;
  height: 100%;
  perspective: 500px;
  transform-style: preserve-3d;
}

.star-layer {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0.8;
}

.star-layer:nth-child(1) {
  transform: translateZ(-50px);
  animation: star-drift 150s linear infinite;
}

.star-layer:nth-child(2) {
  transform: translateZ(-100px);
  animation: star-drift 200s linear infinite reverse;
  opacity: 0.6;
}

.star-layer:nth-child(3) {
  transform: translateZ(-200px);
  animation: star-drift 250s linear infinite;
  opacity: 0.4;
}

@keyframes star-drift {
  0% {
    transform: translateZ(-50px) translateY(0);
  }
  100% {
    transform: translateZ(-50px) translateY(100%);
  }
}

.star {
  position: absolute;
  background: white;
  border-radius: 50%;
  filter: blur(1px);
}

.star-layer::before,
.star-layer::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
}

.star-layer:nth-child(1)::before {
  background-image: radial-gradient(1px 1px at 10% 10%, white 100%, transparent),
    radial-gradient(1px 1px at 20% 20%, white 100%, transparent),
    radial-gradient(2px 2px at 30% 30%, white 100%, transparent),
    radial-gradient(1px 1px at 40% 40%, white 100%, transparent),
    radial-gradient(2px 2px at 50% 50%, white 100%, transparent),
    radial-gradient(1px 1px at 60% 60%, white 100%, transparent),
    radial-gradient(2px 2px at 70% 70%, white 100%, transparent),
    radial-gradient(1px 1px at 80% 80%, white 100%, transparent),
    radial-gradient(2px 2px at 90% 90%, white 100%, transparent),
    radial-gradient(1px 1px at 15% 85%, white 100%, transparent);
}

.nebula {
  position: absolute;
  width: 120%;
  height: 120%;
  top: -10%;
  left: -10%;
  background: radial-gradient(
      ellipse at 30% 30%,
      rgba(63, 0, 113, 0.3) 0%,
      rgba(63, 0, 113, 0) 70%
    ),
    radial-gradient(
      ellipse at 70% 60%,
      rgba(0, 113, 167, 0.3) 0%,
      rgba(0, 113, 167, 0) 70%
    ),
    radial-gradient(
      ellipse at 50% 50%,
      rgba(167, 0, 157, 0.2) 0%,
      rgba(167, 0, 157, 0) 70%
    );
  filter: blur(30px);
  opacity: 0.5;
  animation: nebula-shift 30s infinite alternate ease-in-out;
}

@keyframes nebula-shift {
  0% {
    transform: scale(1) rotate(0deg);
    opacity: 0.3;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    transform: scale(1.2) rotate(5deg);
    opacity: 0.4;
  }
}

.grid-plane {
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  background-image: linear-gradient(
      rgba(0, 162, 255, 0.15) 1px,
      transparent 1px
    ),
    linear-gradient(90deg, rgba(0, 162, 255, 0.15) 1px, transparent 1px);
  background-size: 40px 40px;
  transform: perspective(500px) rotateX(60deg);
  transform-origin: center;
  animation: grid-move 20s linear infinite;
  opacity: 0.3;
}

@keyframes grid-move {
  0% {
    transform: perspective(500px) rotateX(60deg) translateY(0);
  }
  100% {
    transform: perspective(500px) rotateX(60deg) translateY(40px);
  }
}

.button-container {
  position: relative;
  perspective: 1000px;
  transform-style: preserve-3d;
  z-index: 10;
}

.holo-button {
  position: relative;
  width: 280px;
  height: 80px;
  background: rgba(10, 10, 30, 0.6);
  border: none;
  color: rgba(0, 221, 255, 0.8);
  font-family: "Orbitron", sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 3px;
  text-shadow: 0 0 10px rgba(0, 221, 255, 0.5);
  cursor: pointer;
  overflow: hidden;
  transform-style: preserve-3d;
  transition: all 0.3s ease;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  z-index: 5;
  border-radius: 2px;
}

.holo-button::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  background: linear-gradient(
    45deg,
    rgba(0, 0, 40, 0.8) 0%,
    rgba(0, 20, 50, 0.8) 50%,
    rgba(5, 10, 30, 0.8) 100%
  );
  z-index: -1;
  border-radius: 1px;
}

.button-border {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.button-border::before,
.button-border::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border: 2px solid transparent;
  box-shadow: 0 0 10px rgba(0, 221, 255, 0.7);
  animation: border-flow 3s infinite;
}

.button-border::before {
  border-top-color: rgba(0, 221, 255, 0.8);
  border-left-color: rgba(0, 221, 255, 0.8);
  filter: drop-shadow(0 0 5px rgba(0, 221, 255, 0.7));
}

.button-border::after {
  border-bottom-color: rgba(255, 0, 222, 0.8);
  border-right-color: rgba(255, 0, 222, 0.8);
  filter: drop-shadow(0 0 5px rgba(255, 0, 222, 0.7));
}

@keyframes border-flow {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.03);
    opacity: 0.8;
  }
}

.holo-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 221, 255, 0.2) 0%,
    rgba(0, 0, 0, 0) 70%
  );
  pointer-events: none;
  z-index: 1;
  opacity: 0.7;
  filter: blur(10px);
  animation: glow-pulse 3s infinite alternate;
}

@keyframes glow-pulse {
  0% {
    opacity: 0.4;
    filter: blur(10px) brightness(0.8);
  }
  100% {
    opacity: 0.7;
    filter: blur(15px) brightness(1.2);
  }
}

/* Световые линии */
.holo-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}

.holo-line {
  position: absolute;
  background: rgba(0, 221, 255, 0.5);
  filter: blur(1px);
}

.holo-line:nth-child(1) {
  top: 0;
  left: 30px;
  width: 1.5px;
  height: 100%;
  animation: line-pulse 2s infinite alternate;
  animation-delay: -0.5s;
}

.holo-line:nth-child(2) {
  top: 0;
  right: 30px;
  width: 1.5px;
  height: 100%;
  animation: line-pulse 2s infinite alternate;
  animation-delay: -1s;
}

.holo-line:nth-child(3) {
  top: 15px;
  left: 0;
  width: 100%;
  height: 1.5px;
  animation: line-pulse 2s infinite alternate;
  animation-delay: -1.5s;
}

.holo-line:nth-child(4) {
  bottom: 15px;
  left: 0;
  width: 100%;
  height: 1.5px;
  animation: line-pulse 2s infinite alternate;
  animation-delay: -2s;
}

@keyframes line-pulse {
  0% {
    opacity: 0.3;
    background: rgba(0, 221, 255, 0.5);
  }
  100% {
    opacity: 0.7;
    background: rgba(255, 0, 222, 0.5);
  }
}

.scan-line {
  position: absolute;
  width: 100%;
  height: 3px;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 221, 255, 0.5) 20%,
    rgba(255, 255, 255, 0.8) 50%,
    rgba(255, 0, 222, 0.5) 80%,
    rgba(0, 0, 0, 0) 100%
  );
  top: 0;
  left: 0;
  filter: blur(1px);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  animation: scan 2s infinite;
}

@keyframes scan {
  0% {
    top: -5px;
    opacity: 0;
  }
  15% {
    opacity: 0.7;
  }
  85% {
    opacity: 0.7;
  }
  100% {
    top: 85px;
    opacity: 0;
  }
}

/* Частицы */
.holo-particles {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.holo-particle {
  position: absolute;
  background: white;
  box-shadow: 0 0 10px rgba(0, 221, 255, 0.7);
  border-radius: 50%;
  filter: blur(1px);
  opacity: 0;
  pointer-events: none;
  animation: particle-float 3s infinite ease-out;
}

.holo-particle:nth-child(1) {
  width: 3px;
  height: 3px;
  top: 70%;
  left: 30%;
  animation-delay: 0.2s;
}

.holo-particle:nth-child(2) {
  width: 2px;
  height: 2px;
  top: 60%;
  left: 40%;
  animation-delay: 0.5s;
}

.holo-particle:nth-child(3) {
  width: 4px;
  height: 4px;
  top: 80%;
  left: 60%;
  animation-delay: 0.8s;
}

.holo-particle:nth-child(4) {
  width: 2px;
  height: 2px;
  top: 70%;
  left: 70%;
  animation-delay: 1.1s;
}

.holo-particle:nth-child(5) {
  width: 3px;
  height: 3px;
  top: 75%;
  left: 50%;
  animation-delay: 1.4s;
}

.holo-particle:nth-child(6) {
  width: 2px;
  height: 2px;
  top: 65%;
  left: 65%;
  animation-delay: 1.7s;
}

@keyframes particle-float {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.8;
  }
  100% {
    transform: translateY(-40px) rotate(360deg);
    opacity: 0;
  }
}

.button-hexagons {
  position: absolute;
  width: 380px;
  height: 180px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
}

.hexagon {
  position: absolute;
  width: 30px;
  height: 17.32px;
  background: transparent;
  border: 1.5px solid rgba(0, 221, 255, 0.3);
  transform: rotate(30deg);
  opacity: 0;
  animation: hexagon-pulse 3s infinite;
}

.hexagon::before,
.hexagon::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: transparent;
  border: 1.5px solid rgba(0, 221, 255, 0.3);
}

.hexagon::before {
  transform: rotate(60deg);
}

.hexagon::after {
  transform: rotate(-60deg);
}

.hexagon:nth-child(1) {
  top: 20px;
  left: 20px;
  animation-delay: 0.1s;
}

.hexagon:nth-child(2) {
  top: 20px;
  right: 20px;
  animation-delay: 0.3s;
}

.hexagon:nth-child(3) {
  bottom: 20px;
  left: 20px;
  animation-delay: 0.5s;
}

.hexagon:nth-child(4) {
  bottom: 20px;
  right: 20px;
  animation-delay: 0.7s;
}

.hexagon:nth-child(5) {
  top: 50%;
  left: 0;
  transform: translate(0, -50%) rotate(30deg);
  animation-delay: 0.9s;
}

.hexagon:nth-child(6) {
  top: 50%;
  right: 0;
  transform: translate(0, -50%) rotate(30deg);
  animation-delay: 1.1s;
}

@keyframes hexagon-pulse {
  0% {
    opacity: 0;
    transform: rotate(30deg) scale(0.8);
  }
  20% {
    opacity: 0.5;
    transform: rotate(30deg) scale(1);
  }
  80% {
    opacity: 0.5;
    transform: rotate(30deg) scale(1);
  }
  100% {
    opacity: 0;
    transform: rotate(30deg) scale(1.2);
  }
}

.digital-glyphs {
  position: absolute;
  width: 400px;
  height: 200px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
}

.digital-glyph {
  position: absolute;
  color: rgba(0, 221, 255, 0.5);
  font-size: 10px;
  font-family: "Orbitron", monospace;
  white-space: nowrap;
  opacity: 0;
  animation: glyph-fade 4s infinite;
}

.digital-glyph:nth-child(1) {
  top: -30px;
  left: 60px;
  animation-delay: 0.2s;
}

.digital-glyph:nth-child(2) {
  top: -20px;
  right: 40px;
  animation-delay: 0.6s;
}

.digital-glyph:nth-child(3) {
  bottom: -30px;
  left: 80px;
  animation-delay: 1s;
}

.digital-glyph:nth-child(4) {
  bottom: -20px;
  right: 60px;
  animation-delay: 1.4s;
}

@keyframes glyph-fade {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  10% {
    opacity: 0.7;
  }
  90% {
    opacity: 0.7;
  }
  100% {
    opacity: 0;
    transform: translateY(-10px);
  }
}

.corner-accents {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.corner-accent {
  position: absolute;
  width: 15px;
  height: 15px;
  border-style: solid;
  border-width: 2px;
  border-color: rgba(0, 221, 255, 0.7);
}

.corner-accent:nth-child(1) {
  top: 0;
  left: 0;
  border-right: none;
  border-bottom: none;
}

.corner-accent:nth-child(2) {
  top: 0;
  right: 0;
  border-left: none;
  border-bottom: none;
}

.corner-accent:nth-child(3) {
  bottom: 0;
  left: 0;
  border-right: none;
  border-top: none;
}

.corner-accent:nth-child(4) {
  bottom: 0;
  right: 0;
  border-left: none;
  border-top: none;
}

.button-glitch {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  animation: button-glitch 8s infinite;
}

@keyframes button-glitch {
  0%,
  100% {
    opacity: 0;
  }
  94%,
  96% {
    opacity: 0;
  }
  94.5% {
    opacity: 0.8;
    transform: translate(5px, -2px) skew(-5deg, 2deg);
    background: rgba(255, 0, 222, 0.2);
  }
  95% {
    opacity: 0.8;
    transform: translate(-5px, 2px) skew(5deg, -2deg);
    background: rgba(0, 221, 255, 0.2);
  }
  95.5% {
    opacity: 0.8;
    transform: translate(2px, 0) skew(-2deg, 0);
    background: rgba(255, 255, 255, 0.2);
  }
}

/* Звуковые волны */
.sound-wave {
  position: absolute;
  bottom: -30px;
  left: 0;
  width: 100%;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

.wave-bar {
  width: 2px;
  height: 5px;
  background: rgba(0, 221, 255, 0.5);
  margin: 0 2px;
  border-radius: 1px;
  animation: wave-animation 1.5s infinite;
}

@keyframes wave-animation {
  0%,
  100% {
    height: 5px;
  }
  50% {
    height: 15px;
  }
}

.wave-bar:nth-child(1) {
  animation-delay: 0.1s;
}
.wave-bar:nth-child(2) {
  animation-delay: 0.2s;
}
.wave-bar:nth-child(3) {
  animation-delay: 0.3s;
}
.wave-bar:nth-child(4) {
  animation-delay: 0.4s;
}
.wave-bar:nth-child(5) {
  animation-delay: 0.5s;
}
.wave-bar:nth-child(6) {
  animation-delay: 0.6s;
}
.wave-bar:nth-child(7) {
  animation-delay: 0.7s;
}
.wave-bar:nth-child(8) {
  animation-delay: 0.8s;
}
.wave-bar:nth-child(9) {
  animation-delay: 0.9s;
}
.wave-bar:nth-child(10) {
  animation-delay: 1s;
}
.wave-bar:nth-child(11) {
  animation-delay: 0.9s;
}
.wave-bar:nth-child(12) {
  animation-delay: 0.8s;
}
.wave-bar:nth-child(13) {
  animation-delay: 0.7s;
}
.wave-bar:nth-child(14) {
  animation-delay: 0.6s;
}
.wave-bar:nth-child(15) {
  animation-delay: 0.5s;
}

.holo-button:hover {
  color: rgb(255, 255, 255);
  text-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
  transform: scale(1.02);
  transition: all 0.2s ease;
}

.holo-button:hover .holo-glow {
  background: radial-gradient(
    ellipse at center,
    rgba(255, 255, 255, 0.3) 0%,
    rgba(0, 221, 255, 0.2) 40%,
    rgba(0, 0, 0, 0) 70%
  );
  animation: glow-pulse-hover 1.5s infinite alternate;
}

@keyframes glow-pulse-hover {
  0% {
    opacity: 0.6;
    filter: blur(10px) brightness(1);
  }
  100% {
    opacity: 0.9;
    filter: blur(15px) brightness(1.5);
  }
}

.holo-button:active {
  transform: scale(0.98);
  transition: all 0.1s ease;
}

.holo-button:active .holo-glow {
  opacity: 1;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 0, 222, 0.3) 40%,
    rgba(0, 0, 0, 0) 70%
  );
}

.button-text {
  position: relative;
  z-index: 5;
  transform-style: preserve-3d;
  text-transform: uppercase;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-f894d97 *//* Botón aislado: botonestrellassorpresa */
.botonestrellassorpresa {
  position: relative;
  padding: 20px 35px;
  background: #ffffff;
  font-size: 20px;
  font-weight: 600;
  color: #000000;
  box-shadow: 0px 0px 10px 0px rgb(255, 255, 255);
  border-radius: 100px;
  border: none;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}

.botonestrellassorpresa:hover {
  background: #000000;
  color: #ffffff;
  box-shadow: 0 0 80px #ffffff8c;
}

/* Estrellas */
.botonestrellassorpresa .estrella-1,
.botonestrellassorpresa .estrella-2,
.botonestrellassorpresa .estrella-3,
.botonestrellassorpresa .estrella-4,
.botonestrellassorpresa .estrella-5,
.botonestrellassorpresa .estrella-6 {
  position: absolute;
  height: auto;
  filter: drop-shadow(0 0 0 #fffdef);
  z-index: -5;
  transition: all 0.8s cubic-bezier(0, 0.4, 0, 1.01);
}

/* Posiciones iniciales de cada estrella */
.botonestrellassorpresa .estrella-1 { top: 20%; left: 20%; width: 25px; transition-timing-function: cubic-bezier(0.05,0.83,0.43,0.96);}
.botonestrellassorpresa .estrella-2 { top: 45%; left: 45%; width: 15px; }
.botonestrellassorpresa .estrella-3 { top: 40%; left: 40%; width: 5px; }
.botonestrellassorpresa .estrella-4 { top: 20%; left: 40%; width: 8px; }
.botonestrellassorpresa .estrella-5 { top: 25%; left: 45%; width: 15px; }
.botonestrellassorpresa .estrella-6 { top: 5%; left: 50%; width: 5px; }

/* Hover de estrellas */
.botonestrellassorpresa:hover .estrella-1 { top: -20%; left: -20%; width: 20px; filter: drop-shadow(0 0 10px #fffdef); z-index:2; }
.botonestrellassorpresa:hover .estrella-2 { top: 35%; left: -25%; width: 15px; filter: drop-shadow(0 0 10px #fffdef); z-index:2; }
.botonestrellassorpresa:hover .estrella-3 { top: 80%; left: -10%; width: 10px; filter: drop-shadow(0 0 10px #fffdef); z-index:2; }
.botonestrellassorpresa:hover .estrella-4 { top: -25%; left: 105%; width: 20px; filter: drop-shadow(0 0 10px #fffdef); z-index:2; }
.botonestrellassorpresa:hover .estrella-5 { top: 30%; left: 115%; width: 15px; filter: drop-shadow(0 0 10px #fffdef); z-index:2; }
.botonestrellassorpresa:hover .estrella-6 { top: 80%; left: 105%; width: 10px; filter: drop-shadow(0 0 10px #fffdef); z-index:2; }

/* Color de relleno SVG */
.botonestrellassorpresa .relleno { fill: #fffdef; }/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-9cfec8e *//* Botón aislado: botonletrasup */
.botonletrasup {
  cursor: pointer;
  padding: 12px 18px;
  border-radius: 30px;
  border: none;
  display: inline-block;
  overflow: hidden;
  background: #ffffff;
  box-shadow:
    inset 6px 6px 12px rgba(0, 0, 0, 0.1),
    inset -6px -6px 12px rgba(255, 255, 255, 0.7),
    6px 6px 12px rgba(0, 0, 0, 0.1),
    -6px -6px 12px rgba(255, 255, 255, 0.7);
  transition:
    box-shadow 0.3s ease,
    transform 0.1s ease;
}

.botonletrasup span {
  font-family: Arial, sans-serif;
  font-weight: 900;
  font-size: 24px;
  color: #777;
  text-shadow:
    2px 2px 3px rgba(0, 0, 0, 0.2),
    -2px -2px 3px rgba(255, 255, 255, 0.8);
  position: relative;
  display: inline-block;
  transition: transform 0.3s ease-out;
  z-index: 1;
  padding: 0px 4px;
}

.botonletrasup span:hover {
  transform: translateY(-7px);
  color: #444;
  text-shadow:
    2px 2px 5px rgba(0, 0, 0, 0.3),
    -2px -2px 5px rgba(255, 255, 255, 0.9);
}

.botonletrasup:hover {
  background-color: #fff;
  box-shadow:
    inset 3px 3px 6px rgba(0, 0, 0, 0.1),
    inset -3px -3px 6px rgba(255, 255, 255, 0.9),
    4px 4px 10px rgba(0, 0, 0, 0.1),
    -4px -4px 10px rgba(255, 255, 255, 0.9);
}

.botonletrasup:active {
  box-shadow:
    inset 2px 2px 4px rgba(0, 0, 0, 0.2),
    inset -2px -2px 4px rgba(255, 255, 255, 0.8);
  transform: scale(0.98);
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-44f5663 */#gasses {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.gas {
  --blur: 5rem;
  --box-blur: calc(0.5 * var(--blur));
  --glow: var(--color);
  --size: 12rem;

  align-items: center;
  border-radius: 40px;
  border: 9px solid currentColor;
  box-shadow: 
    /* --- "glass" tube --- */
    /* inside */ inset 0 0 0 2px
      rgba(0, 0, 0, 0.15),
    /* outside */ 0 0 0 2px rgba(0, 0, 0, 0.15),
    /* --- glow --- */ /* inside */ inset 0 0 var(--box-blur) var(--glow),
    /* outside */ 0 0 var(--box-blur) var(--glow);
  color: var(--color, white);
  display: inline-flex;
  flex-direction: column;
  font-family: 'poppins';
  height: var(--size);
  justify-content: space-around;
  padding: 1rem;
  width: var(--size);
}
.gas.number {
  font-weight: 700;
}

.symbol {
  font-size: 4rem;
  font-family: "poppins";
  text-shadow: 0 0 var(--blur) var(--glow);
}

.gas.he {
  --color: #fce205;
  filter: saturate(999%);
  cursor: pointer;
}

.gas.he:hover {
  filter: brightness(120%) drop-shadow(0 0 50px var(--glow));
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-35ee26f *//* Botón Aislado: suscribirseanimado */
.suscribirseanimado-wrapper {
  position: relative;
  width: 190px;
  height: 60px;
  text-align: center;
  cursor: pointer;
  transition: background-color 1s; /* transición del fondo al hover */
}

.suscribirseanimado-shape {
  stroke-dasharray: 100 300;
  stroke-dashoffset: -297;
  fill: transparent;
  stroke: rgb(220, 20, 60);
  stroke-width: 5px;
  transition: stroke-width 1s, stroke-dashoffset 1s, stroke-dasharray 1s;
}

.suscribirseanimado-text {
  font-size: 22px;
  position: relative;
  top: -52px;
  font-weight: 600;
  color: white;
}

/* Hover */
.suscribirseanimado-wrapper:hover .suscribirseanimado-shape {
  stroke-width: 2px;
  stroke-dashoffset: 0;
  stroke-dasharray: 760;
}

.suscribirseanimado-wrapper:hover {
  background-color: rgba(220, 20, 60, 0.2);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-329143d *//* Botón aislado para Elementor: .botonlamparaencendida */
.elementor-button.botonlamparaencendida,
.botonlamparaencendida .elementor-button,
.elementor-button.botonlamparaencendida::after,
.botonlamparaencendida .elementor-button::after {
  --glow-color: rgb(176, 252, 255);
  --glow-spread-color: rgba(123, 251, 255, 0.781);
  --enhanced-glow-color: rgb(206, 255, 255);
  --btn-color: rgb(61, 127, 136);

  border: 0.25em solid var(--glow-color);
  padding: 1em 3em;
  color: var(--glow-color);
  font-size: 15px;
  font-weight: bold;
  background-color: var(--btn-color);
  border-radius: 1em;
  outline: none;
  box-shadow: 0 0 1em 0.25em var(--glow-color),
              0 0 4em 1em var(--glow-spread-color),
              inset 0 0 0.75em 0.25em var(--glow-color);
  text-shadow: 0 0 0.5em var(--glow-color);
  position: relative;
  transition: all 0.3s;
}

/* Sombra difusa debajo del botón */
.elementor-button.botonlamparaencendida::after,
.botonlamparaencendida .elementor-button::after {
  pointer-events: none;
  content: "";
  position: absolute;
  top: 120%;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: var(--glow-spread-color);
  filter: blur(2em);
  opacity: 0.7;
  transform: perspective(1.5em) rotateX(35deg) scale(1, 0.6);
}

/* Hover: invierte colores y aumenta glow */
.elementor-button.botonlamparaencendida:hover,
.botonlamparaencendida .elementor-button:hover {
  color: var(--btn-color);
  background-color: var(--glow-color);
  box-shadow: 0 0 1em 0.25em var(--glow-color),
              0 0 4em 2em var(--glow-spread-color),
              inset 0 0 0.75em 0.25em var(--glow-color);
}

/* Active: efecto presionado */
.elementor-button.botonlamparaencendida:active,
.botonlamparaencendida .elementor-button:active {
  box-shadow: 0 0 0.6em 0.25em var(--glow-color),
              0 0 2.5em 2em var(--glow-spread-color),
              inset 0 0 0.5em 0.25em var(--glow-color);
}/* End custom CSS */