/* Web ABS 2026 · llave-envio.css — La llave abre la puerta (llave-envio.js)
   Riel claro con la llave lila a la izquierda y la puerta de noche a la derecha. Medidas en variables:
   normal en los formularios de página y .ll-compacta en la ventana de bienvenida.
   Estados en .ll-envio: ll-visible, ll-lista, ll-arrastrando, ll-cerca, ll-error, ll-enviando, ll-girada,
   ll-abierta, ll-fallo, ll-saluda. */
.ll-envio{
  --ll-alto:80px;--ll-llave:62px;--ll-pad:12px;--ll-puerta-an:56px;--ll-puerta-al:64px;--ll-fondo:#F1F2F9;
  position:relative;display:block;width:100%;color:var(--texto);
}
.ll-riel{
  position:relative;height:var(--ll-alto);border-radius:16px;background:var(--ll-fondo);
  box-shadow:inset 0 0 0 1px var(--linea);-webkit-user-select:none;user-select:none;isolation:isolate;
}

/* Recorrido: guía discontinua, rastro lila tras la llave y luz de la puerta abierta */
.ll-guia{
  position:absolute;z-index:0;left:calc(var(--ll-pad) + var(--ll-llave) + 14px);right:calc(var(--ll-pad) + var(--ll-puerta-an) + 14px);
  top:50%;border-top:2px dashed var(--linea-fuerte);transition:opacity .3s;
}
.ll-rastro{
  position:absolute;z-index:0;left:calc(var(--ll-pad) + var(--ll-llave) * .5);top:50%;width:var(--x,0px);height:2px;border-radius:2px;
  background:linear-gradient(90deg,rgba(108,99,255,0) 0%,var(--acento) 70%);box-shadow:0 0 10px rgba(108,99,255,.45);
  opacity:0;transition:opacity .3s,width .32s var(--suave);pointer-events:none;
}
.ll-arrastrando .ll-rastro{transition:opacity .3s}
.ll-arrastrando .ll-rastro,.ll-enviando .ll-rastro{opacity:1}
.ll-haz{
  position:absolute;z-index:0;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .9s .35s;
  background:radial-gradient(120% 170% at 100% 50%,rgba(250,170,47,.42) 0%,rgba(250,170,47,.12) 45%,rgba(250,170,47,0) 72%);
}
.ll-abierta .ll-haz{opacity:1}

/* Indicación en el centro del riel: se apaga al acercar la llave */
.ll-texto{
  position:absolute;z-index:1;left:calc(var(--ll-pad) + var(--ll-llave) + 14px);right:calc(var(--ll-pad) + var(--ll-puerta-an) + 14px);
  top:0;bottom:0;display:flex;align-items:center;justify-content:center;margin:0;text-align:center;pointer-events:none;
  opacity:calc(1 - var(--p,0) * 1.8);transition:opacity .25s;
}
.ll-arrastrando .ll-texto{transition:none}
.ll-enviando .ll-texto{opacity:1}
.ll-texto__linea{
  display:inline-block;max-width:100%;padding:2px 10px;border-radius:6px;background:var(--ll-fondo);
  font-size:14px;font-weight:650;line-height:1.3;letter-spacing:-.005em;color:var(--texto-sec);text-wrap:balance;transition:color .25s;
}
.ll-lista .ll-texto__linea,.ll-enviando .ll-texto__linea{color:var(--acento-texto)}
.ll-error .ll-texto__linea,.ll-fallo .ll-texto__linea{color:var(--error-texto)}

/* La llave (botón): se arrastra con --x; gira sobre su eje al entrar */
.ll-llave{
  position:absolute;z-index:3;left:calc(var(--ll-pad) - 8px);top:50%;display:grid;place-items:center;
  width:calc(var(--ll-llave) + 16px);height:max(44px,calc(var(--ll-alto) - 12px));margin:0;padding:0;
  border:0;border-radius:12px;background:transparent;color:inherit;cursor:grab;touch-action:none;
  -webkit-tap-highlight-color:transparent;transform:translate(var(--x,0px),-50%);transition:transform .32s var(--suave),opacity .3s;
}
.ll-envio .ll-llave:focus-visible{outline:3px solid var(--acento);outline-offset:0}
.ll-arrastrando .ll-llave{cursor:grabbing;transition:opacity .3s}
.ll-llave__giro{display:block;transition:transform .56s cubic-bezier(.45,0,.2,1)}
.ll-girada .ll-llave__giro{transform:scaleY(-1)}
.ll-llave__svg{
  display:block;width:var(--ll-llave);height:calc(var(--ll-llave) * .48);fill:var(--acento);overflow:visible;
  filter:drop-shadow(0 4px 6px rgba(48,40,140,.28));transition:fill .25s;
}
.ll-llave:hover .ll-llave__svg{fill:#5B51F0}
.ll-error .ll-llave__svg{fill:var(--error-texto);animation:ll-no .5s ease-in-out}
.ll-saluda .ll-llave__svg{animation:ll-saluda 1.6s ease-in-out}
.ll-visible.ll-lista:not(.ll-arrastrando):not(.ll-enviando):not(.ll-error) .ll-llave__svg{animation:ll-asoma 3.4s ease-in-out .4s infinite}
.ll-abierta .ll-llave{opacity:0;pointer-events:none}
@keyframes ll-asoma{0%,58%,100%{transform:none}68%{transform:translateX(10px)}78%{transform:none}86%{transform:translateX(4px)}93%{transform:none}}
@keyframes ll-saluda{0%,100%{transform:none}28%{transform:translateX(12px)}50%{transform:none}66%{transform:translateX(5px)}82%{transform:none}}
@keyframes ll-no{20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}

/* La puerta: marco de noche, hoja con dos paneles y la cerradura de la marca; dentro, la luz y la llave */
.ll-puerta{
  position:absolute;z-index:2;right:var(--ll-pad);top:50%;width:var(--ll-puerta-an);height:var(--ll-puerta-al);
  margin-top:calc(var(--ll-puerta-al) / -2);border-radius:8px 8px 3px 3px;background:#09090D;
  box-shadow:0 0 0 3px #26262F,0 12px 22px -12px rgba(9,9,13,.6);perspective:380px;
}
.ll-puerta__dentro{
  position:absolute;inset:0;display:grid;place-items:center;border-radius:inherit;overflow:hidden;
  background:radial-gradient(circle at 50% 64%,#FFF1CF 0%,#FAAA2F 42%,#6C63FF 100%);opacity:0;transition:opacity .45s .25s;
}
.ll-puerta__silueta{
  display:block;width:calc(var(--ll-puerta-an) * .3);height:calc(var(--ll-puerta-an) * .3 * 2.09);fill:rgba(22,22,27,.55);
  transform:scale(.6);transition:transform .7s cubic-bezier(.3,1.6,.5,1) .55s;
}
.ll-puerta__hoja{
  position:absolute;inset:0;display:flex;flex-direction:column;gap:6px;padding:8px 8px 8px 30px;border-radius:inherit;
  background:linear-gradient(160deg,#2F2F3B,#1B1C22);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  transform-origin:100% 50%;transition:transform .9s cubic-bezier(.55,0,.2,1),opacity .3s;
}
.ll-puerta__panel{flex:1;border-radius:3px;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.09)}
.ll-puerta__boca{
  position:absolute;left:7px;top:50%;display:grid;place-items:center;width:16px;height:28px;margin-top:-14px;border-radius:5px;
  background:linear-gradient(#5C5C6C,#3A3A46);box-shadow:0 0 0 0 rgba(250,170,47,0);transition:box-shadow .3s;
}
.ll-puerta__boca svg{display:block;width:7px;height:12px;fill:#09090D}
.ll-cerca .ll-puerta__boca{box-shadow:0 0 0 4px rgba(250,170,47,.4)}
.ll-girada .ll-puerta__boca{box-shadow:0 0 0 5px rgba(250,170,47,.65)}
.ll-visible.ll-lista:not(.ll-arrastrando):not(.ll-enviando) .ll-puerta__boca{animation:ll-late 2.2s ease-in-out infinite}
.ll-visible.ll-enviando.ll-girada .ll-puerta__boca{animation:ll-late 1s ease-in-out infinite}
@keyframes ll-late{0%,100%{box-shadow:0 0 0 0 rgba(250,170,47,.15)}50%{box-shadow:0 0 0 5px rgba(250,170,47,.5)}}
.ll-abierta .ll-puerta__dentro{opacity:1}
.ll-abierta .ll-puerta__silueta{transform:none}
.ll-abierta .ll-puerta__hoja{transform:rotateY(-80deg)}
.ll-abierta .ll-puerta__boca{animation:none;box-shadow:none}

/* Puerta abierta: el mensaje ocupa el riel; el texto de site.js sale debajo */
.ll-fin{
  position:absolute;z-index:2;left:calc(var(--ll-pad) + 10px);right:calc(var(--ll-pad) + var(--ll-puerta-an) + 18px);top:50%;
  display:flex;flex-direction:column;gap:2px;margin:0;opacity:0;transform:translateY(-35%);pointer-events:none;
  transition:opacity .45s .5s,transform .7s var(--suave) .5s;
}
.ll-fin b{font-size:19px;font-weight:750;letter-spacing:-.02em;line-height:1.15;color:var(--texto)}
.ll-fin span{font-size:14px;font-weight:600;line-height:1.35;color:var(--ok-texto)}
.ll-abierta .ll-fin{opacity:1;transform:translateY(-50%)}
.ll-abierta :is(.ll-texto,.ll-guia,.ll-rastro){opacity:0}

/* El botón de siempre, en secundario: «o envíalo con el botón» */
.ll-o{font-size:14px;font-weight:600;line-height:1.3;color:var(--texto-sec)}
.formulario .ll-boton.btn{
  min-height:44px;padding:0 18px;font-size:15px;background:var(--blanco);color:var(--acento-texto);
  box-shadow:inset 0 0 0 1.5px var(--acento);
}
.formulario .ll-boton.btn:hover{background:var(--acento-tinte)}
.formulario .ll-boton.btn:focus-visible{outline-color:var(--acento)}
.formulario.ok .ll-o{display:none}
.ll-con-llave .formulario__pie{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 12px}
.ll-con-llave .formulario__pie .formulario__legal{flex:1 1 100%;margin:0}
@media (min-width:760px){
  .formulario-ancho.ll-con-llave .formulario__pie{gap:10px 14px}
  .formulario-ancho.ll-con-llave .formulario__pie .formulario__legal{flex:1 1 240px}
}

/* Ventana de bienvenida: versión compacta */
.ll-compacta{--ll-alto:56px;--ll-llave:46px;--ll-pad:9px;--ll-puerta-an:38px;--ll-puerta-al:44px}
.ll-compacta .ll-riel{border-radius:12px}
.ll-compacta .ll-texto__linea{padding:1px 8px;font-size:13px}
.ll-compacta .ll-guia{left:calc(var(--ll-pad) + var(--ll-llave) + 10px);right:calc(var(--ll-pad) + var(--ll-puerta-an) + 10px)}
.ll-compacta .ll-texto{left:calc(var(--ll-pad) + var(--ll-llave) + 8px);right:calc(var(--ll-pad) + var(--ll-puerta-an) + 8px)}
.ll-compacta .ll-puerta{border-radius:6px 6px 2px 2px;box-shadow:0 0 0 2.5px #26262F,0 8px 16px -10px rgba(9,9,13,.6)}
.ll-compacta .ll-puerta__hoja{gap:4px;padding:5px 5px 5px 19px}
.ll-compacta .ll-puerta__boca{left:4px;width:11px;height:19px;margin-top:-9.5px;border-radius:3.5px}
.ll-compacta .ll-puerta__boca svg{width:5px;height:8.5px}
.ll-compacta .ll-fin{flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:6px}
.ll-compacta .ll-fin b{font-size:15.5px}
.ll-compacta .ll-fin span{font-size:13px}
.bienvenida .ll-envio{margin:-2px 0 -4px}
.bienvenida__acciones.bienvenida__acciones{flex-wrap:nowrap;margin-top:0}
.bienvenida__acciones .ll-boton.btn{flex:1 1 auto;width:auto;min-width:0;padding:0 16px;font-size:14.5px}
.bienvenida__acciones .bienvenida__ahora-no{flex:none}

@media (max-width:759px){
  .ll-envio{--ll-alto:72px;--ll-llave:54px;--ll-pad:10px;--ll-puerta-an:50px;--ll-puerta-al:58px}
  .ll-compacta{--ll-alto:56px;--ll-llave:44px;--ll-pad:8px;--ll-puerta-an:38px;--ll-puerta-al:44px}
  .ll-texto__linea{font-size:13.5px;padding:2px 8px}
  .ll-guia,.ll-texto{left:calc(var(--ll-pad) + var(--ll-llave) + 10px);right:calc(var(--ll-pad) + var(--ll-puerta-an) + 10px)}
  .ll-puerta__hoja{padding:7px 7px 7px 26px;gap:5px}
  .ll-puerta__boca{left:6px;width:14px;height:24px;margin-top:-12px}
  .ll-fin b{font-size:17px}
  .ll-fin span{font-size:13.5px}
  .ll-con-llave .formulario__pie .ll-boton.btn{flex:1 1 auto;width:auto}
  .bienvenida__acciones .bienvenida__ahora-no{margin:0}
}

@media (prefers-reduced-motion:reduce){
  .ll-llave,.ll-llave__giro,.ll-rastro,.ll-texto,.ll-fin,.ll-haz,.ll-puerta__dentro,.ll-puerta__silueta,.ll-puerta__boca{transition-duration:.01s;transition-delay:0s}
  .ll-envio .ll-llave__svg,.ll-envio .ll-puerta__boca{animation:none}
  .ll-fin{transform:translateY(-50%)}
  .ll-puerta__silueta{transform:none}
  .ll-puerta__hoja{transition:opacity .2s}
  .ll-abierta .ll-puerta__hoja{transform:none;opacity:0}
}