.elementor-139 .elementor-element.elementor-element-97caaeb{--display:flex;--min-height:2000px;}.elementor-widget-icon.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-primary );}.elementor-139 .elementor-element.elementor-element-107a8f4{margin:00px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:50px 50px 50px 50px;}.elementor-139 .elementor-element.elementor-element-107a8f4 .elementor-icon-wrapper{text-align:center;}.elementor-139 .elementor-element.elementor-element-107a8f4.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-text );}.elementor-139 .elementor-element.elementor-element-107a8f4.elementor-view-framed .elementor-icon, .elementor-139 .elementor-element.elementor-element-107a8f4.elementor-view-default .elementor-icon{color:var( --e-global-color-text );border-color:var( --e-global-color-text );}.elementor-139 .elementor-element.elementor-element-107a8f4.elementor-view-framed .elementor-icon, .elementor-139 .elementor-element.elementor-element-107a8f4.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-text );}.elementor-139 .elementor-element.elementor-element-107a8f4 .elementor-icon{font-size:17px;}.elementor-139 .elementor-element.elementor-element-107a8f4 .elementor-icon svg{height:17px;}.elementor-139 .elementor-element.elementor-element-2563fa6{--display:flex;}.elementor-widget-animated-headline .elementor-headline-plain-text{color:var( --e-global-color-secondary );}.elementor-widget-animated-headline .elementor-headline{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-animated-headline{--dynamic-text-color:var( --e-global-color-secondary );}.elementor-widget-animated-headline .elementor-headline-dynamic-text{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-animated-headline .elementor-headline-dynamic-wrapper path{stroke:var( --e-global-color-accent );}.elementor-139 .elementor-element.elementor-element-fa33587{--iteration-count:infinite;--animation-duration:1200ms;--dynamic-text-color:var( --e-global-color-secondary );}.elementor-139 .elementor-element.elementor-element-fa33587 .elementor-headline{text-align:center;}.elementor-139 .elementor-element.elementor-element-fa33587 .elementor-headline-plain-text{color:#FFFFFF;}.elementor-139 .elementor-element.elementor-element-fa33587 .elementor-headline-dynamic-wrapper path{stroke:#000000;stroke-width:20px;}.elementor-139 .elementor-element.elementor-element-fa33587 .elementor-headline-dynamic-wrapper svg{z-index:2;}.elementor-139 .elementor-element.elementor-element-fa33587 .elementor-headline-dynamic-text{z-index:auto;}.elementor-139 .elementor-element.elementor-element-c121d43{margin:40px 40px calc(var(--kit-widget-spacing, 0px) + 40px) 40px;}body.elementor-page-139:not(.elementor-motion-effects-element-type-background), body.elementor-page-139 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;}:root{--page-title-display:none;}@media(max-width:767px){.elementor-139 .elementor-element.elementor-element-c121d43{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}}/* Start custom CSS for html, class: .elementor-element-3cd2bcb */.scroll-animation {
  width: 100%;
  height: 500px; /* Ajusta el tamaño según lo que necesites */
  position: relative;
  overflow: hidden;
}

#scroll-img {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Centra la imagen en el medio */
  width: 400px; /* Ajusta el tamaño de la imagen */
  height: auto;
  z-index: -1; /* Para que quede en el fondo */
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-c121d43 */#unlock-container {
    text-align: center;
    display: flex;
    flex-direction: column;
    margin-top: 10px;
    align-items: center;
}

#unlock-input {
    padding: 15px;
    font-size: 14px;
    border-bottom: 1px solid #ccc !important;
    border: none;
    width: 30%;
    color: wheat;
    background-color: #000;
    margin-bottom: 10px;
}


#keyboard {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.button-row {
    display: flex;
    justify-content: center;
    gap: 5px;
}

.key {
    padding: 12px;
    font-size: 14px;
    color: white;
    border: none;
    background-color: #000;
    cursor: not-allowed;
    width: 60px;
    height: 60px;
    transition: background-color 0.3s ease;
}

.key:hover {
    background-color: #EA6E11; /* Color de fondo al hacer hover */
}

.key:enabled {
    cursor: pointer;
}

.key:focus {
    background-color: #8F6B51;
}

#action-buttons {
    display: flex;
    justify-content: space-evenly;
    gap: 10px;
}

#clear-button {
     /* Botón Borrar pequeño */
    padding: 10px;
}

#unlock-button {
    padding: 20px;
    font-size: 18px;
    color: white;
    border: none;
    cursor: not-allowed;
    width: 100%; /* Ocupa todo el ancho disponible */
}
#unlock-button:hover {
    background-color: #fff; /* Color de fondo al hacer hover */
    color: #000;
}

#clear-button:hover {
    background-color: #f20345; /* Color de fondo al hacer hover */
}

#unlock-button:enabled {
    cursor: pointer;
}

/* ===============================
   MOBILE RESPONSIVE – KEYPAD
   =============================== */
@media (max-width: 768px) {

  #unlock-container{
    width: 100%;
    margin: 0 auto;
    padding: 16px;
    align-items: center;
  }

  #unlock-input{
    width: 100%;
    max-width: 420px;
    font-size: 16px;
    padding: 16px;
  }

  #keyboard{
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    gap: 12px;
    align-items: center;
  }

  .button-row{
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 12px;
  }

  /* Teclas 1–9 */
  .key{
    width: calc((100% - 24px) / 3); /* 3 teclas por fila */
    height: 72px;
    font-size: 18px;
    padding: 0;
  }

  /* Fila inferior: 0 + Del */
  #action-buttons{
    width: 100%;
    max-width: 420px;
    display: flex;
    gap: 12px;
    margin: 0 auto;
  }

  #clear-button{
    width: calc((100% - 12px) / 3);
    height: 72px;
    font-size: 16px;
    padding: 0;
  }

  /* Unlock grande (ocupa como 2 teclas) */
  #unlock-button{
    width: calc(((100% - 12px) / 3) * 2);
    height: 72px;
    font-size: 18px;
    padding: 0;
  }
}

/* ===============================
   EXTRA SMALL DEVICES
   =============================== */
@media (max-width: 360px) {

  .key,
  #clear-button,
  #unlock-button{
    height: 64px;
    font-size: 16px;
  }
}


}/* End custom CSS */