.tesla-panel-wrapper { position: relative; }
.tesla-panel-buttons ul { list-style: none; padding: 0; }
.tesla-panel-buttons li { margin: 5px 0; }
.tesla-offcanvas {
    position: fixed;
    right: -100%;
    top: 0;
    max-width: 550px;
    height: 100%;
    width: 100%;
    background: #fff;
    box-shadow: -2px 0 8px rgba(0,0,0,0.2);
    overflow-y: auto;
    transition: right 0.3s ease;
    z-index: 100000000;
    padding: 40px;
    box-sizing: border-box;
}
.tesla-offcanvas.open { right: 0; }
.tesla-offcanvas h3 { margin-top: 0; }
.tesla-close-panel {
    position: absolute;
    top: 46px;
    right: 35px;
    cursor: pointer;
    font-weight: bold;
    font-size: 28px;
}
@media(max-width:812px){

.tesla-offcanvas {
    position: fixed;
    right: -100%;
    top: 0;
    width: 90%;
    height: 100%;
    background: #fff;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.2);
    overflow-y: auto;
    transition: right 0.3s ease;
    z-index: 10000000;
    padding: 20px;
    box-sizing: border-box;
}
}

/* Velo / overlay para los paneles */
.velo-paneles{
    position:fixed;
    inset:0;                 /* top/right/bottom/left: 0 */
    background:rgba(0,0,0,.45);
    opacity:0;
    pointer-events:none;
    transition:opacity .25s ease;
    z-index:9998;            /* por debajo del panel (9999) en desktop */
  }
  .velo-paneles.is-active{
    opacity:1;
    pointer-events:auto;
  }
  
  /* Evitar scroll del fondo */
  html.tesla-noscroll, body.tesla-noscroll{ overflow:hidden; }
  
  /* En móvil tu panel usa z-index altísimo; el velo queda justo debajo */
  @media (max-width:812px){
    .velo-paneles{ z-index: 9999999; }     /* panel: 10000000 */
  }

  .tesla-panel-buttons.botones li a {
    padding: 25px 0px;
}

.tesla-panel-buttons.botones li a i {
    font-size: 17px;
    margin-right: 20px;
}

.tesla-offcanvas h3 {
    font-size: 33px;
    padding: 30px 0px;
}

@media(max-width:812px){
  .tesla-panel-buttons.botones li a {
    padding: 10px 0px;
    font-size: 16px;
}
}