/* =========================
   FOOTER
========================= */
/* =========================
   FOOTER
========================= */
.footer{
  position:fixed;
  bottom:0;
  left:0;
  width:100%;
  height:60px;
  display:flex;
  justify-content:space-around;
  align-items:center;
  backdrop-filter:blur(10px);
 /* background:rgba(0,0,0,0.4);*/
   background: #f2f2f2;
   COLOR:#333;
}

/* cada bloque (icono + texto) */
.footer-item{
  display:flex;
  flex-direction:column; /* 🔥 clave: apila vertical */
  align-items:center;    /* 🔥 centra horizontal */
  justify-content:center;
  text-align:center;
  min-width:50px;
}

/* círculo del icono */
.circle{
  width:30px;
  height:30px;
  border-radius:50%;
  background:rgba(0,150,255,0.3);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

/* texto debajo */
.footer-item span{
  font-size:10px;
  margin-top:3px;
  color:#333;
  white-space:nowrap;
}

.circle img{
  width:60%;
  height:60%;
  object-fit:contain;
  /*filter: invert(1);*/
   filter: invert(1) brightness(0) contrast(100%);
 
}
   .footer-item:hover .circle img{
  filter: invert(48%) sepia(98%) saturate(1000%) hue-rotate(180deg);
}




/* OVERLAY DESENFOQUE */
/*.overlay-otras{
  position:fixed;
  top:60px;
  bottom:60px;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.4);
  backdrop-filter:blur(10px);
  display:none;
  z-index:999;
}*/
/* OVERLAY DESENFOQUE CORREGIDO */
.overlay-otras{
  position:fixed;
  top:60px;     /* respeta header */
  bottom:60px;  /* respeta footer */
  left:0;
  width:100%;

  background:rgba(0,0,0,0.4);
  backdrop-filter:blur(10px);

  display:none;
  z-index:999;
}

/* MODAL PRINCIPAL */
.otras-opciones{
  position:fixed;
  bottom:80px; /* 🔥 20px arriba del footer */
  right:5%;
  transform:translateX(-50%);
  width:280px;
  max-height:300px;

  background:rgba(255,255,255,0.12);
  backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,0.3);
  border-radius:16px;

  display:none;
  flex-direction:column;
  overflow:hidden;
  z-index:1000;
}

/* SCROLL INTERNO SIN BARRA */
.scroll-opciones{
  display:flex;
  flex-direction:column;
  overflow-y:auto;
  scrollbar-width:none; /* Firefox */
  -ms-overflow-style:none; /* IE */
  max-height:300px;
}

.scroll-opciones::-webkit-scrollbar{
  display:none;
}

/* OPCIONES */
.scroll-opciones a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px;
  text-decoration:none;
  color:#333;
  transition:0.2s;
}

.scroll-opciones a:hover{
  background:rgba(255,255,255,0.3);
  border-radius:10px;
}

/* ICONO OPCIONES */
.scroll-opciones img{
  width:20px;
  height:20px;
}
@media (max-width:768px){

  .otras-opciones{
    width:90%;

    left:50%;              /* 🔥 centrado real */
    right:auto;            /* 🔥 anula el right */
    transform:translateX(-50%);

    bottom:80px;           /* respeta footer */
  }

  .scroll-opciones a{
    font-size:14px;
  }

}

@media (min-width:769px) and (max-width:1024px){

  .otras-opciones{
    width:320px;
  }

}