:root{
  --eql-panel-w:238px;
  --eql-trigger-w:104px;
  --eql-trigger-h:126px;
  --eql-gap:16px;
  --eql-pad:18px;
  --eql-z:2147483000;
}

.eql-shell,
.eql-shell *{box-sizing:border-box}

.eql-shell{
  position:fixed;
  inset:0;
  z-index:var(--eql-z);
  pointer-events:none;
  font-family:Arial,Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased;
}

.eql-panel{
  position:fixed;
  right:0;
  top:54%;
  width:var(--eql-panel-w);
  transform:translate(100%,-50%);
  background:#171717;
  border-radius:18px 0 0 18px;
  box-shadow:-12px 16px 34px rgba(0,0,0,.34);
  overflow:hidden;
  pointer-events:none;
  transition:transform .3s cubic-bezier(.22,.8,.28,1);
  will-change:transform;
}

.eql-shell[data-eql-state="open"] .eql-panel{
  transform:translate(0,-50%);
  pointer-events:auto;
}

.eql-panel__inner{padding:var(--eql-pad)}
.eql-cards{display:grid;gap:var(--eql-gap)}

.eql-card{
  position:relative;
  display:block;
  width:100%;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:11px;
  overflow:hidden;
  background:transparent!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.06);
  text-decoration:none!important;
  line-height:0;
  transform:translateZ(0) scale(1);
  filter:brightness(1);
  transition:transform .2s cubic-bezier(.22,.8,.28,1),filter .2s ease,box-shadow .2s ease;
  -webkit-tap-highlight-color:transparent;
  pointer-events:auto;
}

.eql-card__image{
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  object-fit:contain!important;
  background:transparent!important;
}

.eql-card__shine{
  position:absolute;
  inset:-25%;
  z-index:2;
  pointer-events:none;
  opacity:0;
  background:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.34) 49%,transparent 64%);
  transform:translateX(-145%) rotate(7deg);
}

.eql-card:hover,
.eql-card:focus-visible{
  transform:translateY(-3px) scale(1.035);
  filter:brightness(1.06) saturate(1.04);
  box-shadow:0 14px 28px rgba(0,0,0,.36);
  outline:none;
}

.eql-card.is-pressed{
  transform:scale(.965);
  filter:brightness(.92);
  box-shadow:0 4px 10px rgba(0,0,0,.24);
}

.eql-card.is-reacting{
  transform:translateY(-3px) scale(1.035);
  filter:brightness(1.08) saturate(1.06);
  box-shadow:0 14px 28px rgba(0,0,0,.36);
}

.eql-card:hover .eql-card__shine,
.eql-card:focus-visible .eql-card__shine,
.eql-card.is-reacting .eql-card__shine{
  animation:eql-shine .52s ease forwards;
}

@keyframes eql-shine{
  0%{transform:translateX(-145%) rotate(7deg);opacity:0}
  20%{opacity:.8}
  100%{transform:translateX(120%) rotate(7deg);opacity:0}
}

/*
 * El WEBP original tiene bastante lienzo transparente alrededor del logo.
 * Este contenedor recorta ese lienzo para que el elemento visible quede
 * realmente pegado al borde derecho y se perciba mucho más grande.
 */
.eql-trigger{
  position:fixed!important;
  right:0!important;
  top:54%!important;
  z-index:calc(var(--eql-z) + 2)!important;
  width:var(--eql-trigger-w)!important;
  height:var(--eql-trigger-h)!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  outline:0!important;
  border-radius:0!important;
  background:transparent!important;
  background-color:transparent!important;
  box-shadow:none!important;
  line-height:0!important;
  appearance:none!important;
  -webkit-appearance:none!important;
  cursor:pointer;
  pointer-events:auto;
  overflow:visible!important;
  transform:translate(0,-50%);
  filter:drop-shadow(-5px 7px 10px rgba(0,0,0,.34));
  transition:transform .3s cubic-bezier(.22,.8,.28,1),filter .2s ease;
  will-change:transform;
}

.eql-trigger__crop{
  position:absolute;
  inset:0;
  display:block;
  overflow:hidden;
  pointer-events:none;
}

.eql-trigger__image{
  position:absolute!important;
  width:212px!important;
  height:auto!important;
  max-width:none!important;
  max-height:none!important;
  left:-43px!important;
  top:-26px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  outline:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  object-fit:contain!important;
  opacity:1!important;
  visibility:visible!important;
}

.eql-shell[data-eql-state="open"] .eql-trigger{
  transform:translate(calc(-1 * var(--eql-panel-w) + 2px),-50%);
}

.eql-trigger:hover,
.eql-trigger:focus-visible{
  background:transparent!important;
  background-color:transparent!important;
  box-shadow:none!important;
  filter:drop-shadow(-5px 8px 12px rgba(0,0,0,.42));
}

.eql-trigger:active{
  transform:translate(0,-50%) scale(.97);
}

.eql-shell[data-eql-state="open"] .eql-trigger:active{
  transform:translate(calc(-1 * var(--eql-panel-w) + 2px),-50%) scale(.97);
}

.eql-backdrop{display:none;pointer-events:none}
.screen-reader-text{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

@media(max-width:782px){
  :root{
    --eql-panel-w:184px;
    --eql-trigger-w:92px;
    --eql-trigger-h:112px;
    --eql-gap:11px;
    --eql-pad:14px;
  }

  .eql-panel,
  .eql-trigger{top:53%!important}

  .eql-panel{border-radius:15px 0 0 15px}
  .eql-card{border-radius:9px}

  .eql-trigger__image{
    width:188px!important;
    left:-38px!important;
    top:-23px!important;
  }

  .eql-shell[data-eql-state="open"] .eql-backdrop{
    display:block;
    position:fixed;
    inset:0;
    z-index:calc(var(--eql-z) - 1);
    background:rgba(0,0,0,.10);
    pointer-events:auto;
  }
}

@media(max-width:390px){
  :root{
    --eql-panel-w:172px;
    --eql-trigger-w:86px;
    --eql-trigger-h:104px;
    --eql-gap:10px;
    --eql-pad:13px;
  }

  .eql-trigger__image{
    width:176px!important;
    left:-35.5px!important;
    top:-21.5px!important;
  }
}

@media(max-height:720px) and (min-width:783px){
  :root{
    --eql-panel-w:204px;
    --eql-trigger-w:94px;
    --eql-trigger-h:114px;
    --eql-gap:10px;
    --eql-pad:14px;
  }

  .eql-trigger__image{
    width:192px!important;
    left:-39px!important;
    top:-23.5px!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .eql-panel,.eql-trigger,.eql-card,.eql-card__shine{transition:none!important;animation:none!important}
}


/* v1.0.7: ocultar completamente el launcher en la versión móvil */
@media (max-width:782px){
  .eql-shell{
    display:none!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }
}